Few notes about “ JavaScript”

1. Null vs Undefined:

Specially for novice, sometimes it’s confusing between null and undefined. Let’s be clear about the confusion. Suppose when a variable is declared but value isn’t assigned yet and if we access the variable then it will give a output ‘undefined’. So, undefined is, which isn’t defined yet. On the other hand, when we intentionally want to keep a variables value empty we use ‘null’.

such as:

const _undefined;
console.log(_undefined); //undefined
const _null = null;
console.log(_null); //null (means the variable has no value)

In the below picture, null vs undefined illustrate clearly. Where, null is illustrate as, there has a banner ‘cookies’ but inside there has no cookies. On the other hand, undefined has no banner which defined cookies.

figure1: Null vs Undefined(picture collected)

2. == vs ===:

In JavaScript, it’s very confusing what the triple equal exactly do. Let’s clear with it an example:

const number1 = 2;
const number2 = '2';
console.log(number1 == number2); //true
console.log(number1 === number2); //false

In the above example, when ‘==’ is used, the expression gives “true” though there ‘number1’ is a number types and number2 is string type. So, how they can be equal? In this scenario, JavaScript forcefully done the typecasting and makes the variable equal. That’s why, the output is true though the types of variable isn’t same.

Contrary, ‘===’ done the actual job by comparing the values and also their types. For that, the second output is false.

3. Map, Filter, Find:

Map is used for iterate over an array. Such as,

const smartphones = [
 {model: 'Iphone 12', Brand: 'Apple'},
 {model: 'Galaxy S20', Brand: 'Samsung'},
 {model: 'MI M10T', Brand: 'Xiaomi'},
 {model: 'Oneplus 8T', Brand: 'Oneplus'},
 {model: 'Oneplus 8', Brand: 'Oneplus'},
];
smartphones.map(smartphone => console.log(smartphone.model)); 
output:
//Iphone 12 
//Galaxy S20 
//MI M10T 
//Oneplus 8T
//Oneplus 8

Filter is used for filter an array with condition. Such as if we want to get only the the model of Oneplus smartphone:

const filteredSmartPhone = smartphones.filter(smartphone => smartphone.Brand === 'Oneplus');
filteredSmartPhone.map(smartphone => console.log(smartphone.model));
output:
//Oneplus 8T
//Oneplus 8

Find is used for find any specific element from an array. It returns a single value:

const firstSmartPhone = smartphones.find(smartphone => smartphone.Brand === 'Oneplus');
console.log(firstSmartPhone.model);
output:
//Oneplus 8T

In the above example, find pick the first value which match the condition and return it.

4. block scope:

Scope is a important term in JavaScript. Scope means the range of influence. Let’s illustrate the block scope:

function scope(permission){
  if(permission){
   let _scope = 'This if is a scope';
    console.log(scope);
  }
  console.log(_scope); //error
}
scope(true);

In the above example, scope function is a block scope. Inside the function, if is a block function. See how ‘_scope’ isn’t available outside of it’s scope.

Shortly, ‘{}’ is a scope and anything inside of it is the property of this scope which isn’t accessible outside of that scope.

5. Asynchronous:

Asynchronous described as, when a process don’t depend(don’t need to wait) on I/O process. Whereas, Synchronous need to wait for I/O process means is’t work synchronously with I/O process. Because of, Asynchronous hasn’t dependency that’s why it can handle more work at a time. Let’s illustrate an example for make it explicit:

async function reverse(){
 const _fetch =  await fetch('https://jsonplaceholder.typicode.com    /users');
  console.log(_fetch);
  const res =  _fetch.json();
  return res;
}
console.log(reverse().then(res => console.log(res)));
console.log('hello');
console.log(reverse());
output:
Promise { <state>: "pending" }
hello
Promise { <state>: "pending" }
//Responce 
//Responce
//resulting array
//resulting array

In the above example, the console statement is printed before fetching the url. Because of ‘Asynchronous’ the process isn’t wait for the fetching whereas all the below process being executed and when url is fetched it just put the output in event loop. That’s why the resulting output take the place in the last though it is called in first.

6. Reverse a String:

const message = '.yas ot teg t'ndid ew sgniht ynam eht fo gnikniht elihW .yadot did uoy yaw eht yrc t'ndluow uoy hcum os hsiw I em rof sraet htiw dellif lla seye ruoy dnif dna esir dluohs nus eht fI .ees ot ereht ton m'I dna ,em tuohtiw strats worromot fI';
let newMessage = '';
for(let i = 0; i < message.length; i++){
  newMessage = message[i] + newMessage;
}
console.log(newMessage);

See the output in your console.

7. Remove duplicate from an array:

There has plenty of ways to remove duplicates from an array. But I think it is the shortest within all of them:

const arrayOfDuplicates = [0, 1, 1, 3, 4, 7, 11];
console.log(Array.from(new Set(arrayOfDuplicates))); 
output:
//[0, 1, 3, 4, 7, 11]

8. Sum of array elements:

I know it is a easy task to do. Since there is no harm to do it again let’s do it again:

const _array = [1, 2, 3, 4, 5];
console.log(
        _array.reduce((total, currentValue) => total + 
         currentValue,0)
);
output:
//15

9. Recursive Fibonacci Series:

Best practice for understand recursion.

const recursiveFactorial = bound => {
 
  if(bound === 0){
   return 1;
  }else{
   return bound * recursiveFactorial(bound - 1);
  }
}
console.log(recursiveFactorial(5));
output:
//120

10. Recursive Fibonacci Series:

Simple but one of the complex job for to do:

const recursiveFibonacci = bound => {
 
  if(bound === 0){
   return [0];
  }else if(bound === 1){
    return [0, 1];
  }else{
   const fibonacciSeries = recursiveFibonacci(bound - 1);
    const nextElement = fibonacciSeries[bound - 1] + fibonacciSeries[bound - 2];
    fibonacciSeries.push(nextElement);
    return fibonacciSeries;
  }
}
console.log(recursiveFibonacci(5));
output:
//Array(6) [ 0, 1, 1, 2, 3, 5 ]

Happy Coding. Let me know my mistakes.Thank you.