Software Dev Weekly Update #10: Functions, functions, and more functions...

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!

Blog

Software Dev Weekly Update #10: Functions, functions, and more functions...

Ethan Goddard

Topics

Week In Review

Join Our Newsletter. No Spam, Only the good stuff.

Related