Praveen

notes.mdx

Primitive and Non-Primitive Data Types

Primitives Data types

1. int
2. boolean
3. string
4. Symbol
5. undefined
6. null

Non-primitive Data types

1. Object {}
2. Array []

Equality

Double equality(==)

• compares value
• if are of different types, the values get converted to a common type for conversion (Cohersion)

Triple equal (===)

• compares value, but NO cohersion
• compares memory location/origin

1 == 1;
1 === 1;

true === true;
null == null;
null === null;

undefined === undefined;

[] === []  // false
{} === {} // false
NaN === NaN // false

Loops

Something that repeats itself

• iterator value(loop variable) is initialised
• exit condition: If condition is true, then it goes to the next iteration. If false, exit the loop immediately
• an updator: Before next iteration the iterator value is udpdated

Types of Loop

1. for
2. forEach
3. for of
4. for in
5. while
6. do while (NOT IMPORTANT)

function fn(){
  // do something
}

fn()
fn()

Instead of calling a function/piece of code like this we can use loops.

Loops are used to:

• iterate over arrays and Objects
• repeat the code based on an iterator condition

for loop

• only for array like data

const name=['Shihab','Shifa','Althaf']

for(let i=0;i<names.length;i++){
  console.log(`name@${i} ${name[i]}`)
  console.log(`@${i} ${i}`)
}

forEach

• used to iterate over arrays
• no need of loop variable and exit condition
• simplified version of for-loop

const name=['Shihab','Shifa','Althaf']

names.forEach(name=>console.log(`Name is ${name}`))

for of (give access to VALUE)

const name=['Shihab','Shifa','Althaf']

for(let value of names){
  console.log(value)
}

for in (give access to KEY/INDEX)

const name=['Shihab','Shifa','Althaf']

for(let key in names){
 console.log(names[key])
}

let person = {
  name: "Deepak",
  age: 25,
  country: "India",
  job: "engineer",
  state: "KL",
};

for (const key in person) {
  console.log(key);
}

While loop

let i=0
while(i<3){
console.log('i',i)
i++
}

Object

A collection of key value pair

Iterating over values

const person = {
  name: "Praveen",
  age: 25,
  country: "India",
};

for (const key in person) {
  console.log(person[key]);
}

Accessing Object Values

DOT operator

_Syntax: *** objectName.key *** _

let deepak = {
  name: "Deepak",
  age: 25,
  country: "India",
};

deepak.age

Computed property

• we can pass the key as a string variable inside a pair of square brackets after the object name

_Syntax: ** objectName['key']** _

let deepak = {
  name: "Deepak",
  age: 25,
  country: "India",
};

deepak["name"];

Example usage:

response-1

let keys = ["name", "age"];

response-2

let person = {
  name: "Deepak",
  age: 25,
  country: "India",
  job: "engineer",
  state: "KL",
};

access respons-2 values using keys from response-1

for (let key of keys) {
  console.log(key, "||", person[key]);
}

functions

A piece of code that can be invoked n-number of times

• Each function invocation creates a new Scope and Execution Context
• a function w/o a name is called an anonymus function
• a function we pass to another function as a callback(to be invoked later) is called a callback function
• calling a function like functionName() is called function invocation

var name = "Praveen";
name.toUpperCase();
name = "Shihab";
name.toUpperCase();

If we take the above piece of code to convert a name to uppercase it is not reusable. Each time we need to uppercase a new name, we need to re-type the entire logic. In programming we always try to avoid repeation(DRY: Dont Repeat Yourself). If we find a piece of code reusable, then we wrap it inside a function.

function definition/declaration

function toUpper(str) {
  return str.toUpperCase();
}

const upperCasedName = toUpper("shihab");

function expression

const toUpper = function (str) {
  return str.toUpperCase();
};

const upperCasedName = toUpper("shihab");

arrow function

• arrow function is the simplified form of normal function

const toUpper = (str) => {
  return str.toUpperCase();
};

• compared to normal function, there are few advantages for arrow function, they are:
  • shorter syntax
  • default this binding
  • implicit return

implicit return

• if we want to return a single line/expression we can do that by removing the {} and return keyword

const toUpper = (str) => str.toUpperCase();

declaration

• we just name the variable, but we haven't assigned any value to it
• all the declared variables are assigned a default value of undefined

var name;

console.log("name is", name);   // name is undefined

initialization/assignment

name='Kiya'

console.log('name is',name) // name is Kiya

We can combine both declaration and initialization into a single line as

var name='Kiya'

Rest and Spread Operator

• rest operator is used to capture the arguments that we pass to a function. It accept them as an Array
• spread operator is used to spread/merge objects and arrays

// rest operator
function print(arg1, arg2, ...args) {
  const friends = ["Praveen", "Deepak"];
  const friends1 = ["Azad", "Rameez"];

  // SPREAD Operator
  const newArr = [...args, ...friends, ...friends1];
  console.log("arg1", arg1);
  console.log("arg2", arg2);
  console.log("arguments", args);
}

print("Shihab", "Shifa", "Althaf");

short hand object notation

const praveen = { personalInfo, empInfo };

SPREAD Operator in Object

const personalInfo = {
  name: "Praveen",
  country: "India",
};

const empInfo = {
  companyName: "Manappuram",
  yoe: 2,
};

const praveen = { ...personalInfo, ...empInfo };

console.log("Praveen", praveen);

default parameter

function add(x, y = 0) {
  const sum = x + y;
  console.log("Sum is ", sum);
}

add(1);  // 1

ARRAY Methods

• return new array

1. map // no.of entries same as input array length
2. filter // no.of entries is less than or equal to the input array length

• return boolean

3. every
4. some

• return a single element/undefined

5. find

• return what ever type we want (IMPORTANT)

6. reduce

without reduce

let sum = 0;
const input = [1, 2, 3, 4];

for (let value of input) {
  // sum = sum + value;
  sum += value;
}

console.log("sum", sum);

with reduce

const sum = [1, 2, 3, 4].reduce(function (acc, value) {
  //   acc=acc+value
  return (acc += value);
}, 0);

console.log("Sum", sum);

Advanced | Asynchronous JavaScript

return keyword

• used to return from a function
• we can return with or w/o a value

function add(x, y) {
  return x + y;
}

const sum = add(1, 2);

console.log(sum);

function returning a function

function add(x, y) {
  return x + y;
}

function add10(a) {
  return add(10, a);
}

• when a function returns another function, the inner function can still refer the scope of parent. This is called closure

function outter(x) {
  // closure over variable x
  return function inner(y) {
    return x + y;
  };
}

const sum = outter(10)(3);

console.log("SUM IS", sum);

Timing function

1. setTimeout(callback,time to wait in ms)
2. setInterval(callback, repeat interval in ms)

Order of execution

1. synchronous code
2. asynchronous async code

console.log("First");

setTimeout(() => {
  console.log("Second");
}, 0);

console.log("Third");

Output

// First
// Third
// Second

Promise

• Promise is an Object
• it has three states
  • pending: being executed
  • resolved: execution was success
  • rejected: execution failed
• promise help us to perform some action depending on the success and failure of a time taking or asynchronous operator
• if promise is resolved it will invoke the callback passed to .then()
• on failure it invokes .catch() callback

const samplePromise = new Promise(function callback(resolve, reject) {
  // success
  if (true) {
    resolve("completed!");
  }
  // failure
  else {
    reject("failed!");
  }
});

samplePromise.then(function onSuccess(successMsg) {
  console.log("on success:", successMsg);
}).catch(function onError(errorMsg) {
  console.log("on reject: ", errorMsg);
});

API call using axios

const axios = require("axios");

axios
  .get("https://jsonplaceholder.typicode.com/todos/1")
  .then(function onSuccess(json) {
    console.log("data", json.data);
  })
  .catch(function onFailure(error) {
    console.log("error", error.response.status);
  });

async await

• modern way of handling promises
• async keyword should be added infront of the function to mark it async
• await keyword is used to handle the resolved value of promise
• wrap the entire operator in a try-catch block for better error handling

async function callAPI() {
  try {
    const resp = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    console.log("res", resp.data);
  } catch (error) {
    console.log("error", error.response.status);
  }
}

callAPI();

Scope

• where I can access a variable

	const	var	let
re-declare	⛔	✅	⛔
re-assign	⛔	✅	✅
scope	block scope	function-scope	block scope

const name = "Shihab";
console.log("name", name);

name = "Shihab";
console.log("name", name);

function printName2() {
  // var name = "Shihab";
  // ReferenceError
  console.log("name is ", name);
}

printName2();

// function scope
function printName() {

  // block scope
  if (true) {
    let name = "Shihab";
  }

  console.log("name is", name);
}

printName();

let index = 10;

for (let index = 0; index < 4; index++) {
  console.log("INSIDE | index", index);
}

console.log("OUTSIDE | index", index);

function outter() {
  // ✅ scope
  // ✅ execution context
  let index = 10;

  if (true) {
    // ✅ scope
    // ⛔ execution context
    console.log("Hello world");
  }

  function inner() {
    // ✅ scope
    // ✅ execution context
    let index = 1;
    console.log("index", index);
  }

  inner();
  console.log("index", index);
}

outter();