Concepts of JavaScript — Part 1

📄 Table of Contents

◉ so, Javascript What are you ?

◉ Data types

Data Types in JavaScript
let one = 1;
Call Stack
#000 one -> | 1 |
#001 | |
#002 | |
#003 | |
let one = 1
one = 3
let arr = {
one: 1
}
let arr = new Object()
arr.one = 1
Call Stack       Heap
#000 arr -> | #101 | #101 | one: 1 |
#001 | | #102 | |
#002 | | #103 | |
#003 | | #104 | |

◉ == and ===

var arr1str = JSON.stringify(arr1);
var arr2str = JSON.stringify(arr2);
console.log(arr1str === arr2str); // true

◉ Variable Shadowing

◉ Scoping

var, let, const

block level scope in JS (ES5) vs C

Block level Scope in “C” vs JS

➪ exception with `const`

const arr = [];

Primitive Values

Example

const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error

However, ‘const’ Objects can Change

// You can create a const object:
const car = {type:”Fiat”, model:”500", color:”white”};
// You can change a property:
car.color = “red”;
// You can add a property:
car.owner = “Johnson”;
const car = {type:”Fiat”, model:”500", color:”white”};car = {type:”Volvo”, model:”EX60", color:”red”}; // ERROR

Constant Arrays can Change

Example

// You can create a constant array:
const cars = [“Saab”, “Volvo”, “BMW”];
// You can change an element:
cars[0] = “Toyota”;
// You can add an element:
cars.push(“Audi”);

Example

const cars = [“Saab”, “Volvo”, “BMW”];
cars = [“Toyota”, “Volvo”, “Audi”]; // ERROR

◉ Hoisting

var vs let vs const

◉ typeof (BS²NU-OF)

typeof present in Javascript

Errors while checking typeof

typeof letVariable; 
typeof constant;
typeof c;
let letVariable;
const constant = 'constant';
class c{};

◉ Different types of Error(s):-

◉ Immutable (Primitives) vs Mutables (Objects)

let a = [10]
let b = a
console.log(a === b) // true
a.push(10)
console.log(a) // [10, 10]
console.log(a === b) // true
let a = [];
let b = a;
let c = b;
a.push(1)
console.log(a) // [1]
console.log(b) // [1]
console.log(c) // [1]
b.push(2)
console.log(a) // [1, 2]
console.log(b) // [1, 2]
console.log(c) // [1, 2]
console.log([10] === [10]) // false
var y = {};
var x = y;

◉ JSArray Methods: Mutating vs. Non-Mutating

source: https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/
let mutatingRemove = ['a', 'b', 'c', 'd', 'e'];const returnedValue1 = mutatingRemove.pop();  
console.log(mutatingRemove); // ['a', 'b', 'c', 'd']
console.log(returnedValue1); // 'e'
const returnedValue2 = mutatingRemove.shift();
console.log(mutatingRemove); // ['b', 'c', 'd']
console.log(returnedValue2); // 'a'

◉ call, apply & bind

call, apply and bind with example
call, apply vs Bind

◉ Currying

// Normal function
function addition(x, y) {
return x + y;
}
addition(3,4);
// Curried function
function addition(x) {
return function(y) {
return x + y;
}
}
addition(3)(4);
//ORvar sum = addition(3);
sum(4);
// Partial Application
function addition(x, y) {
return x + y;
}
const plus5 = addition.bind(null, 5)
plus5(10) // output -> 15
const one = document.getElementById('one');
const t = a => b => c => a.addEventListener(b, (event) => {
event.target.style.color = c;
});
t(one)(‘click’)(‘red');

◉ JS Function Chaining (as in JQuery Chaining)

understanding jQuery chaining first of all

var mainDiv = $("#selectedDiv");var returnedDiv = mainDiv.css('color: red');// Here the Object returned from JQuery Function is same as "mainDiv"// Following would return true...
console(mainDiv == returnedDiv)

Achieving Chaining with JavaScript

How to perform chaining in JS (as in happens in jQuery)
# try another example
calculator.one().three().five().value() => 1+3+5 => 9

◉ How can we return multiple (more than 1) values from JS?

function getValues() {
return [getFirstValue(), getSecondValue()];
}
var values = getValues();
var first = values[0];
var second = values[1];
const [first, second] = getValues();
function getValues() {
return {
first: getFirstValue(),
second: getSecondValue(),
};
}
var values = getValues();
var first = values.first;
var second = values.second;
const {first, second} = getValues();

◉ create a dynamic html element and style it the JS way

var para = document.createElement("P");   // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.body.appendChild(para); // Append <p> to <body>

# Attach a click event to a <button>
element.document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = “white";
div.setAttribute('class', 'myclass');
div.innerHTML = "my <b>new</b> <large>DOM maniuplation!</large>";
document.getElementById("main").appendChild(div);

◉ Pass by Value vs. Reference Variable Assignment

let name1 = "John";
let name2 = name1;
name2 = "Peter";
console.log(name1, name2);
// "John", "Peter"
let obj1 = { name: "Lucy" }
let obj2 = obj1;
obj2.name = "Mary";console.log(obj1);  // { name: "Mary" }
console.log(obj2); // { name: "Mary" }
let object1 = { name: "Lucy" };
let object3 = {...object1}
object3.name = "Anne";
console.log(object1); // { name: "Lucy" }
console.log(object3); // { name: "Anne" }

Guess the output:

function passByReference(person) {
person.age = 25;
person = {
name: 'James',
age: 50
};

return person;
}
var foo = {
name: 'Anil',
age: 30
};
var fooUpdated = passByReference(foo);console.log(foo); // -> ?
console.log(fooUpdated); // -> ?
console.log(foo); // -> { name: 'Anil', age: 25 }
console.log(fooUpdated); // -> { name: 'James', age: 50 }
var foo = {
name: 'Anil',
age: 30
};
var person = foo;person.age = 25;person = {
name: 'James',
age: 50
};
var fooUpdated = person;console.log(foo); // -> { name: 'Anil', age: 25 }
console.log(fooUpdated); // -> { name: 'James', age: '50' }

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