Concepts of Javascript — Part 2

📄 Table of Contents

◉ Functional Programming

Concepts of functional programming:

◉ First-Class Functions

function greeting() {
console.log('Hello World');
}
// Invoking the function
greeting(); // prints 'Hello World'
// We can add properties to functions like we do with objectsgreeting.lang = 'English';
console.log(greeting.lang); // Prints 'English'

◉ Higher-Order Functions

◉ IIFE (Immediately Invoked Function Expression)

(function () {
var message = "Hello there !!!";
})();

Why do we need an IIFE?

let reference = (function() {   
let secret = "I cannot be changed by simple assignment";
return { //ES5 new method syntax
change(value) {
secret = value;
},
get secret() {
return secret;
}
};
})(); console.log(reference.secret); // "I cannot be changed by simple assignment"
reference.change("I am changed");
console.log(reference.secret); // "I am changed"

◉ Pure Functions

Math.max(2, 8, 5);        # 8const double = x => x * 2;Math.random();  # is NOT a pure function, WHY ? Even though we didn’t pass any arguments into any of the function calls, they all produced different output, meaning that `Math.random()` is not pure.
const greeting = "Hello";
const greet = person => `${greeting} ${person}!`;
console.log(greet("Ashmit")); // "Hello Ashmit!"
const greeting = "Howdy";
const greet = person => `${greeting} ${person}!`;
console.log(greet("Ashmit")); // "Howdy Ashmit!"

Side Effect

const greeting = "Hello";
const greet = (greeting, person) => `${greeting} ${person}!`;
console.log(greet(greeting, "Ashmit"));// "Hello Ashmit!"

Benefits of Pure functions

Pure Functions have a huge performance impact during execution on the Browser. How ?

function Impure(person) {
person.age = 25;
return person;
};
var foo = {
name: 'Anil',
age: 30
};
var fooUpdated = Impure(foo);console.log(foo);
// -> { name: 'Anil', age: 25 }
console.log(fooUpdated);
// -> { name: 'Anil', age: 25 }
function Pure(person) {
var newPersonObj = JSON.parse(JSON.stringify(person));
newPersonObj.age = 25;
return newPersonObj;
};
var foo = {
name: 'Anil',
age: 30
};
var fooUpdated = Pure(foo);console.log(foo);
// -> { name: 'Anil', age: 30 }
console.log(fooUpdated); // -> { name: 'Anil', age: 25 }

◉ Arrow functions vs Regular functions

arguments & new NOT allowed in Arrow functions.

◉ Currying

🔹 Usages

🔘 Partial Application

🔘 Difference

◉ Memoization

◉ Memory Leak in JS

◉ Garbage Collector in JS

var info = {name: "anil", age: 25, status: "coder"};
info.name = undefined / null;
console.log(info);

◉ for() vs forEach() vs map()

◉ for vs forEach() vs for/in vs for/of in for looping

const arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; ++i) {
console.log(arr[i]);
}
for (let i in arr) {
console.log(arr[i]);
}
const arr = ['a', 'b', 'c'];arr.forEach((key, index) => console.log(key));

for (const element of arr) {
console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"

Conclusions

for (const [i, v] of arr.entries()) {
console.log(i, v); // Prints "0 a", "1 b", "2 c"
}

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.