React hooks and Some JavaScript topics

Hooks

React hook is the addition in React 16.8 which lets React features without writing a class. Lets have a look:

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  
const [click, setClick] = useState(0);
  return (
    <div>
      <p>You clicked {click} times</p>
      <button onClick={() => setClick(click + 1)}>
        Click me
      </button>
    </div>
  );
} 

Here, useState is a Hook. To add some local state to it, we call it inside a function component. React will preserve this state between re-renders. useState hook returns a pair: the current state value and a function that can be updated.

bind()

The bind() method in JavaScript which creates a new function where this keyword set to the provided value when called.

const module = {
  x: 36,
  getX: function() {
    return this.x;
  }
};
const unboundX = module.getX;
console.log(unboundX()); 
// The function gets invoked at the global scope
// output: undefined
const boundX = unboundX.bind(module);
console.log(boundX());
// output: 36

call()

In JavaScript, the call() method is used to call a function with a given this value and arguments provided. this is used when calling the function.

function Product(name, address) {
  this.name = name;
  this.address = address;
}
function Food(name, address) {
  Product.call(this, name, address);
  this.category = 'food';
}
console.log(new Food('momos', 'rajshahi').name);
// expected output: "momos"

apply()

The apply() method also calls a function with a given this value.Here arguments are provided as an array or different objects.

const numbers = [4,8,6,3,10,12];
const max = Math.max.apply(null, numbers);
console.log(max);
// output: 12
const min = Math.min.apply(null, numbers);
console.log(min);
// output: 3

filter()

The filter() method does filtering and creates a new array with all elements that pass the filtering test implemented by the provided function.

var ages = [32, 33, 16, 40];
const result = ages.filter(age => age> 18);
console.log(result);
// expected output: Array [32, 33, 40]

Null vs Undefined

In JavaScript, there are few differences between null and undefined. undefined is a type, whereas null an object.

• null is an assigned value. It means nothing. But undefined means a variable has been declared but not defined yet.
• undefined is a type, whereas null an object.

var Test;
alert(Test); // output: undefined
alert(typeof Test); // output: undefined
var Test = null;
alert(Test); // output: null
alert(typeof Test); // output: object

‘==’ vs ‘===’

‘==’ refers to Abstract Equality Comparison where ‘===’ refers to Strict Equality. ‘‘==’’ compares whether two values(a and b) are same or not . But “===” compares whether two values and data type (a and b) are same or not.

var a = 20;
var b = '20';
console.log(a == b); // true
console.log(a === b); // false

Implicit Conversion

The conversion applied by the compiler is called an implicit conversion. JavaScript attempting to coerce an unexpected value type to the expected type refers to JavaScript’s implicit coercion. If you pass a string where it expects a number it will try to convert it to string or if one pass an object where it expects a string, it will try to convert it to the right type.

9 * "9" // 81
2 + "1" + 2//212

true + true //2
4 * [4] // 16
4 + [4] // "44"

Block scope

The area within if, switch conditions or for and while loops is block scope. In ES6, const and let keywords arrived. const and let allow developers to declare variables in the block scope. It means those variables exist only within the corresponding block and will not be applicable outside the block.

function friut(){
    if(true){
        var fruit1 = 'mango';        //exist in function scope
        const fruit2 = 'orange';     //exist in block scope
        let fruit3 = 'banana';   //exist in block scope

    }
    console.log(fruit1); // mango
    console.log(fruit2); //error: fruit2 is not defined
    console.log(fruit3); //error: fruit3 is not defined
}

fruit();

Asynchronous

Asynchronous is the opposite of asynchronous,. It means happening at the same time. “synchronous” can be thought as “in synch” and asynchronous as “out of synch.” Suppose we’re chatting with someone, our communication is “synchronous.” One can perform long network requests without blocking the main thread using asynchronous JavaScript (such as callbacks, promises, and async/await).

function resolved() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 5000);
  });
}
async function asyncCall() {
  console.log('calling');
  const result = await resolved();
  console.log(result);
  // expected output: "resolved"
}
asyncCall();
// output will be "calling" and after 5 second "resolved" will be printed.