Part 2

1. Triple Add Function

2. Working With IIFEs

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.

(function doubleNumber(num) {
    return num * 2;
})(10);

(function () {
    function getTotal(a, b) {
        return a + b;
    }
    var $ = 'currency';
    if (true) console.log('hello world');
})();

3. Button 5

Create 5 buttons (1,2,3,4,5), click each button show its button number.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
// Solution 1:

function createButtons() {
    for (var i = 1; i <= 5; i++) {
        var body = document.getElementsByTagName("BODY")[0];
        var button = document.createElement("BUTTON");
        button.innerHTML = 'Button ' + i;
        (function (num) {
            button.onclick = function () {
                alert('This is button ' + num);
            }
        })(i);
        body.appendChild(button);
    }
}

createButtons();

// Solution 2:

function createButtons() {
    for (var i = 1; i <= 5; i++) {
        var body = document.getElementsByTagName("BODY")[0];
        var button = document.createElement("BUTTON");
        button.innerHTML = 'Button ' + i;
        addClickFunctionality(button, i);
        body.appendChild(button);
    }
}

function addClickFunctionality(button, num) {
    button.onclick = function () {
        alert('This is button ' + num);
    }
}

createButtons();

// Solution 3:

function createButtons() {
    for (let i = 1; i <= 5; i++) {
        var body = document.getElementsByTagName("BODY")[0];
        var button = document.createElement("BUTTON");
        button.innerHTML = 'Button ' + i;
        button.onclick = function () {
            alert('This is button ' + i);
        }
        body.appendChild(button);
    }
}
createButtons();

4. Closures

Closures


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
const globalVariable = 'global var';

function outterFunc(param1) {
    const variable1 = 'var one';

    function innerFunc(param2) {
        const variable2 = 'var two';

        console.log('globalVariable: ', globalVariable);
        console.log('variable1: ', variable1);
        console.log('variable2: ', variable2);
        console.log('param1: ', param1);
        console.log('param2: ', param2);
    }

    innerFunc('param one');
}

outterFunc('param two');

Output:

globalVariable:  global var
variable1:  var one
variable2:  var two
param1:  param two
param2:  param one

Process finished with exit code 0

5. this Keyword

This

A property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.

var house = {
    price: 100000,
    squareFeet: 2000,
    owner: 'Taylor',
    getPricePerSquareFoot: function() {
        return this.price / this.squareFeet;
    }
};

console.log(house.price);
console.log(house.getPricePerSquareFoot());

Output:

100000
50

Process finished with exit code 0

6. Hoisting in JavaScript

Hoisting

Variables are hoisted to the top of our get total function, variables declared with the var keyword are initialized to undefined, keywords with let or const are not initialized until their actual declaration.

function getTotal() {
    console.log(multiplier);
    console.log(total);

    let total = 0;
    for (var i = 0; i < 10; i++) {

        //hoisted in for loop level
        let valueToAdd = i;
        //hoisted in function level
        var multiplier = 2;
        total += valueToAdd * multiplier;
    }

    return total;
}

getTotal();

Output:

undefined

console.log(total);
                ^
ReferenceError: Cannot access 'total' before initialization

7. Scope and self

// this.color='red'

var myCar = {
    color: "Blue",
    logColor: function() {
        var self = this;
        console.log("In logColor - this.color: " + this.color);
        console.log("In logColor - self.color: " + self.color);
        (function() {
            //this.color refers to a global object.
            console.log("In IIFE - this.color: " + this.color);
            console.log("In IIFE - self.color: " + self.color);
        })();
    }
};

myCar.logColor();

Output:

In logColor - this.color: Blue
In logColor - self.color: Blue
In IIFE - this.color: undefined
In IIFE - self.color: Blue

Process finished with exit code 0

8. Equals vs Strict Equals

Double equals
== in JavaScript we are testing for loose equality. Double equals also performs type coercion.
Type coercion means that two values are compared only after attempting to convert them into a common type.

Triple Equals
=== in JavaScript, we are testing for strict equality. This means both the type and the value we are comparing have to be the same.

9. Log Number Function

// case 1
var num = 50;

function logNumber() {
    console.log(num);
    var num = 100;
}

logNumber();
// Output: undefined

// case 2
let num1 = 50;

function logNumber1() {
    console.log(num1);
    let num1 = 100;
}

logNumber1();
// Output:     console.log(num1);
//                 ^
// ReferenceError: Cannot access 'num1' before initialization

10. Use Strict

use strict

Strict mode changes some previously-accepted mistakes into errors. JavaScript was designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. Strict mode treats these mistakes as errors so that they’re discovered and promptly fixed. Can be used in function scope.

11. Curry Function

Similar to Triple Add Function

// tab 1

// function getProduct(num1, num2) {
//   return num1 * num2;
// }

function getProduct(num1) {
    return function (num2) {
        return num1 * num2;
    };
}
getProduct(10)(20);

// tab 2

// function getTravelTime(distance, speed) {
//   return distance / speed;
// }

function getTravelTime(distance) {
    return function (speed) {
        return distance / speed;
    };
}

// equal to inner function
const travelTimeBosNyc = getTravelTime(400);
console.log(travelTimeBosNyc(100));
// Output: 4

12. Counter Function

function myFunc() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

console.log(myFunc());

const instanceOne = myFunc();
const instanceTwo = myFunc();

console.log('instanceOne: ', instanceOne());
console.log('instanceOne: ', instanceOne());
console.log('instanceOne: ', instanceOne());
console.log('instanceTwo: ', instanceTwo());
console.log('instanceTwo: ', instanceTwo());
console.log('instanceOne: ', instanceOne());

Output:

[Function]
instanceOne:  1
instanceOne:  2
instanceOne:  3
instanceTwo:  1
instanceTwo:  2
instanceOne:  4

Process finished with exit code 0

13. Logging X and Y

// 'use strict';

(function() {
    var x = y = 200;
})();

console.log('y: ', y);
console.log('x: ', x);

Output:

y:  200
console.log('x: ', x);
                   ^
ReferenceError: x is not defined

use strict:

var x = y = 200;
              ^
ReferenceError: y is not defined

14. call and apply Methods

Function.prototype.call()

call() method gives us a different way of passing arguments into our function or changing  the context in function

const car1 = {
    brand: 'Porsche',
    getCarDescription: function (cost, year, color) {
        console.log(`This car is a ${this.brand}. The price is $${cost}. The year is ${year}. The color is ${color}.n`);
    }
};

const car2 = {
    brand: 'Lamborghini'
};

const car3 = {
    brand: 'Ford'
};

car1.getCarDescription(80000, 2010, 'blue');
// call() method : passing arguments individually
car1.getCarDescription.call(car2, 200000, 2013, 'yellow');
//apply() : passing arguments as an array
car1.getCarDescription.apply(car3, [35000, 2012, 'black']);

15. Determine list2

passing data by value: slice() and concat([])

const list1 = [1, 2, 3, 4, 5];

//passing data by reference, two lists refer to same address of that array
const list2 = list1;
//passing data by value
const list3 = list1.slice();
const list4 = list1.concat([]);

list1.push(6, 7, 8);

console.log('List 1: ', list1);
console.log('List 2: ', list2);
console.log('List 3: ', list3);
console.log('List 4: ', list4);

Output:

List 1:  [
  1, 2, 3, 4,
  5, 6, 7, 8
]
List 2:  [
  1, 2, 3, 4,
  5, 6, 7, 8
]
List 3:  [ 1, 2, 3, 4, 5 ]
List 4:  [ 1, 2, 3, 4, 5 ]

Process finished with exit code 0