This week was all about functions! I hope you have some coffee (or tea) in hand, there's a lot to recap!
Topics
Return keyword: Built-in methods "return" values when we call them. We can store those values to a new variable. Also the return keyword stops the execution of your function. You can only return 1 thing. It could be an array of things, but only 1 array.
Function scope: Where we define a variable in JavaScript impacts where we have access to it.
//In the example below, totalEggs is only accessible within the function
function collectEggs(){
let totalEggs = 6;
console.log(totalEggs);
}
//An example showing that console.log is referencing the bird
//variable that's inside the function because they are more
//closely connected due to both being inside the same function.
//This is overriding the global variable bird.
let bird = "Scarlet Macaw";
function birdWatch(){
let bird = "Great Blue Heron";
console.log(bird);
}
birdWatch();
//Would print: Great Blue Heron
- Block scope: Refers to any content with {} that isn't a function (Example: conditional statements or loop)
//An example of scope within a conditional.
let radius = 8;
if (radius > 0){
const PI = 3.14159;
let message = "Hello!";
}
//This will print the radius variable
console.log(radius);
//This will print undefined because the PI variable is
//inside the radius conditional statement, called a Block
console.log(PI);
- Lexical scope: A child (or inner) function nested inside a parent (or outter) function has access to the parent's functions. This continues on for every nested function inside another nested function. They all have access to their "parent"'s functions.
//An example of nesting functions, where the inner function has
//access to the hero variable in the outer function.
function outer(){
let hero = "Black Panther";
function inner(){
let cryForHelp = `${hero}, please save me!`;
console.log(cryForHelp);
}
inner();
}
- Function expression: Is a way of storing a function in a variable. JavaScript considers function just another value like any other.
//Function Expression
const square = function(num){
return num * num;
};
- Higher Order Functions: They are functions that operate on or with other functions. They can accept other functions as an argument and/or "return" a function.
//An example where ine function calls other functions by passing a function as an argument
function callTwice(func){
func();
func();
}
//Example using for loop with higher order function
function callTenTimes(f){
for(let i = 0; i < 10; i++){
f();
}
}
function rollDie(){
const roll = Math.floor(Math.random() * 6) + 1;
console.log(`Your dice roll is: ${roll}`);
}
callTwice(rollDie)
- Method: Is simply a function that has been placed as a property on an object. All Methods are function, but not all functions are methods. (Examples: .indexOf() and .toUppercase)
//An example of creating our own methods on an object, in this
//case the object is myMath and the methods are multiple,
//divide, square, and PI
const myMath = {
multiply: function(x, y){
return x * y;
},
divide: function (x, y){
return x / y;
},
square: function(x){
return X * x;
},
PI: 3.14159
};
- Keyword "This": You can use the keyword to access other properties on the same object. "This" can change based on how we call the function (from inside the object). If we call a function that refers to "this" that is being used inside an object, it will actually refer to the window object instead of the object that it exists in. A weird quirk, but something to be aware of.
//The default reference of "this" is the window object. But in
//the example below we are overriding it by using it inside
//the person object
const person = {
first: "Ethan",
last: "Goddard",
fullName(){
return `${this.first} ${this.last}`
}
}
//person.fullName() would return "Ethan Goddard"
- Try and Catch: Two statements in JavaScript that have to do with errors. They "catch" errors and prevent the stopping of the execution of our code.
//An example of code we know will have an error
try {
hello.toUpperCase()
} catch {
console.log("Opps! Looks like I ran into an error.");
}
console.log("If you see this message, the code still ran after an error was encountered!");
//Another example, using it in a function
function yell(message){
try {
console.log(message.toUpperCase().repeat(3));
} catch (e) {
//We'll print out the error message by "catch"ing it
//with e and using console.log(e)
console.log(e);
console.log("Please enter a string next time!");
}
}
Week In Review
There was a lot to absorb this week, functions are a key component of JavaScript and understanding the topic is crucial. I hope that you found my notes and examples helpful, I make them to hold myself accountable that I understand it well enough to explain. Looking forward to new topics this coming week!
Bootcamp lessons completed: 219/579
I hope you enjoyed the read!
Feel free to follow me on GitHub, LinkedIn and DEV for more!
Top comments (0)