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) )(10);

(function () )();

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() 

createButtons();

// Solution 2:

function createButtons() 

function addClickFunctionality(button, num) 

createButtons();

// Solution 3:

function createButtons() 
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) 

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 = ;

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() 

getTotal();

Output:

undefined

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

7. Scope and self

// this.color='red'

var myCar = ;

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() 

logNumber();
// Output: undefined

// case 2
let num1 = 50;

function logNumber1() 

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) 

function getProduct(num1) 
getProduct(10)(20);

// tab 2

// function getTravelTime(distance, speed) 

function getTravelTime(distance) 

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

12. Counter Function

function myFunc() 

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() )();

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 = ;

const car2 = ;

const car3 = ;

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