DEV Community: Emran H Khan

Titbits of JavaScript

Emran H Khan — Sat, 08 May 2021 02:48:49 +0000

Truthy & Falsy: In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context.
A falsy value is a value that is considered false when encountered in a Boolean context.
All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN).

Type coercion vs Type conversion: Type coercion "implicitly" converts one data type to another. But in case of type conversion, it can either be implicit or explicit.

const value1 = '5';
const value2 = 9;
let sum = value1 + value2;

console.log(sum);

In the above example, 9 which is a number value has been coerced into string by JavaScript. And it's done implicitly. We have no hand in that. The result of this operation is 59, which not a number but a string. So, if wanted to get the result what we expected then we need to convert the "value1" into a number first and then do the operation. Like so, sum = Number(value1) + value2;

== vs ===: When we are using (==) in JS, we are actually testing for loose equality. Another interesting thing happens here, which is type coercion.

77 === '77'
// false (Number v. String)

false == 0
// true

0 == ""
// true

"" == false
// true 

null == null
// true

undefined == undefined
// true

null == undefined
// true

NaN == null
// false

NaN == undefined
// false

NaN == NaN
// false
//NaN is not equivalent to anything. Cool fact: it’s not even itself!

When using triple equals === in JavaScript, we are testing for strict equality. This means both the type and the value we are comparing have to be the same.

5 === 5
// true

5 === 5
// true

77 === '77'
// false (Number v. String)

'cat' === 'dog'
// false (Both are Strings, but have different values)

false === 0
// false (Different type and different value)

Scope: It determines the accessibility of the variables.
In JavaScript there are three kinds of scope:

Global Scope: Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program.

var carName = "Volvo";

// code here can use carName

function myFunction() {
  // code here can also use carName
}

Function/Local Scope: Variables declared Locally (inside a function) have Function Scope. Local variables can only be accessed from inside the function where they are declared.

// code here can NOT use carName

function myFunction() {
  var carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Block Scope: Variables declared with the let or const keyword can have Block Scope. Variables declared inside a block {} cannot be accessed from outside the block.

{
  let x = 2;
}
// x can NOT be used here

Closure: Closure means that an inner function always has access to the variables and parameters of its outer function, even after the outer function has returned.

function OuterFunction() {
  var outerVariable = 100;

  function InnerFunction() {
    alert(outerVariable);
    }
    return InnerFunction;
}

var innerFunc = OuterFunction();
innerFunc(); // 100

In the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

Window: The window object is supported by all browsers. It represents the browser's window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object: window.document.getElementById("header"); is same as document.getElementById("header");

this keyword: In a method, this refers to the owner object.

var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
person.fullName(); // John Doe

Alone, this refers to the global object. var x = this // [object Window]

In a function, this refers to the global object.

function myFunction() {
  return this;
}

myFuction() // [object Window]

In an event, this refers to the element that received the event.
<button onclick="this.style.display='none'">Click to Remove Me!</button>. Here this will refer to the button element.

setTimeOut: The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.
setTimeout(function(){ alert("Hello"); }, 3000);.
Display an alert box after 3 seconds (3000 milliseconds).

setInterval: The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
setInterval(function(){ alert("Hello"); }, 3000);.
Alert "Hello" every 3 seconds (3000 milliseconds).

call method: The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter).

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1);  // Will return "John Doe"

This example calls the fullName method of person, using it on person1.

REACT basics

Emran H Khan — Fri, 07 May 2021 14:46:29 +0000

What is React: React is JavaScript library created by Facebook. It is a tool for building UI components. React doesn't manipulate the browser's DOM directly, instead it creates copy of the DOM and save it in memory. This copied DOM is generally known as the 'VIRTUAL DOM'. React then finds out what changes have been made, and changes only that part in the DOM.

Skills to learn React:
1. HTML & CSS
2. JSX
3. Fundamental of JavaScript and ES6
4. Package manager (Node+Npm)
5. Git and CLI

The Render Function: React renders HTML to web page by using a function called ReactDOM.render(). This function takes two arguments, HTML code and HTML element. The purpose of this function is to display the specified HTML code inside the specified element.

Display a span inside the 'root' element:

ReactDOM.render(<span>Hello World!</span>, document.getElementById('root'));

The result is displayed in the <div id='root'> element:

<body>
  <div id='root'></div>
</body>

The HTML code here uses JSX which allows you to write HTML tags inside the JavaScript code.

JSX: JSX stands for JavaScript XML. It allows us to write HTML in React. JSX converts the HTML into react elemts.

With JSX:

const newElement: <h1>Learning JSX!</h1>
ReactDOM.render(newElement, document.getElementById('root'));

Without JSX:

const newElement = React.createElement('h1', {}, 'Not using JSX');
ReactDOM.render(newElement, document.getElementById('root'));

It is clearly seen from the above example, it is far more easier to write JSX which eventually transpile our HTML to JavaScript at runtime.

Expression can be written in JSX using the curly braces {}.
And to write multiple HTML lines you have to put parentheses around the HTML and wrap everything in a single Top level element.
For example,

const newElement = (
  <div>
    <h1>I am a header.</h1>
    <p> I am a paragraph.</p>
  </div>
);

Functional Component: A component is an independent, reusable code block which divides the UI into smaller pieces. A functional component is basically a JavaScript/ES6 function that returns a React element(JSX). It needs to exported to be used later in somewhere else.

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>
}

export default Welcome;

And to use it we need to import it.

import Welcome from './Welcome';

const App = () => {
  return(
    <div className="App">
      <Welcome />
    <div>
  )
}

Props: Props is short for properties ant they are used to pass data between React components. React's data flow between components is uni-directional (from parent to child only);
For example, if you want to pass something from app to component you have to pass it like an attribute with suitable name.
Here, I am passing 'name' from the App component to Welcome component. If you need to pass data dynamically just use the curly braces.

import Welcome from './Welcome';

const App = () => {
  return(
    <div className="App">
      <Welcome name="Justin" />
    <div>
  )
}

So, in the Welcome component we will get the data in the 'props'.
And we can use it like this.

const Welcome = (props) => {
  return <h1>Hello {props.name}!</h1>
}

State: React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.
React components are rendered (with state) based on the data in the state. State holds the initial information. So, when state changes, React gets informed and immediately re-renders the part of the DOM which actually needs to be changed. There is method called 'setState' which triggers the re-rendering process for the updated parts. React gets informed, knows which parts to change, and does it quickly without re-rendering the whole DOM.
In functional components, with the help of React Hooks we can use this 'state'.
We will implement a simple counter using React's useState hook.

import React, { useState } from "react";

function Counter() {
  // Set the initial count state to zero, 0
  const [count, setCount] = useState(0);

  // Create handleIncrement event handler
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  //Create handleDecrement event handler
  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };
  return (
    <div>
      <div>
        <button onClick={handleDecrement}>-</button>
        <h5>Count is {count}</h5>
        <button onClick={handleIncrement}>+</button>
      </div>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

And use this component is the App.js like so:

import React from "react";
import Counter from "../Counter";

export default function App() {
  return (
    <div className="App">
      <Counter/>
    </div>
  );
}

useEffect: A functional React component uses props and/or state to calculate the output. If the functional component makes calculations that don’t target the output value, then these calculations are named side-effects.

useEffect() hook accepts 2 arguments:

useEffect(callback[, dependencies]);

callback is the callback function containing side-effect logic. useEffect() executes the callback function after React has committed the changes to the screen.

dependencies is an optional array of dependencies. useEffect() executes callback only if the dependencies have changed between renderings.
Put your side-effect logic into the callback function, then use the dependencies argument to control when you want the side-effect to run. That’s the sole purpose of useEffect().

React Events: Just like HTML, React can perform actions based on user events. Reach has the same events as HTML: click, change, mouserover etc.
React events are written in camelCase sytax: onClick instead of onclick.

import React from 'react';
import ReactDOM from 'react-dom';

function shoot() {
  alert("Great Shot!");
}

const myelement = (
  <button onClick={shoot}>Take the shot!</button>
);

ReactDOM.render(myelement, document.getElementById('root'));

If you want to pass an argument in the event handler, then you have to wrap the handler into an anonymous arrow function.

import React from 'react';
import ReactDOM from 'react-dom';

function shoot(condition) {
  if (condition) {
    alert("Great Shot!");
  }
  alert("Keep going on");
}

const myelement = (
  <button onClick={() => shoot(true)}>Take the shot!</button>
);

ReactDOM.render(myelement, document.getElementById('root'));

React CSS: To style an element with the inline style attribute, the value must be a JavaScript object. Properties with two name, like background-color, must be written in camel case syntax.

const MyHeader = () => {
  return (
      <div>
      <h1 style={{color: "white", backgroundColor: 'black'}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
 }

You can also create an object with styling information, and refer it in the style attribute:

const myStyle = {
  color: "white", 
  backgroundColor: 'black'
}

const MyHeader = () => {
  return (
      <div>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
 }

ES6 Features

Emran H Khan — Thu, 06 May 2021 15:52:41 +0000

var: Before ES6, variables were declared using var. var declarations are globally scoped or function/locally scoped. When var is declared outside of a function, it is said to be globally scoped. If var is declared within a function, then it is function/locally scoped.

 var greetings = 'hey buddy';
 function myFunc() {
    var hello = 'hello';
 }

Here, greetings is globally scoped, because it is declared outside of a function. And hello is locally scoped since it is declared inside a function.
var variables can be re-declared and updated within the same scope and it won't throw an error.

var greetings = 'hey buddy';
var greetings = 'bye buddy';

And we can also do like this-

var greetings = 'hey buddy';
greetings = 'bye buddy';

Another important thing is that var variables are hoisted to the top of their scope and initialized with a value of undefined. The main problem with var declaration is that it is able to redefine a variable and if you have declared the same variable in other parts of your code you will get surprising output and this will likely causer bugs in the code.

Let: Let is block scoped. So, what is a block? You can think of any code that is bounded by the curly {} braces. So, variable declared using let is only available inside that block. Let me give an example:

if (100 > 10) {
    let greeting = 'hey buddy';
    console.log(greeting); // "hey buddy"
}
console.log(greeting) // greeting is undefined

So, we can see that greeting is undefined outside of the block. Another important thing about let is that it can be updated but not re-declared. And let is hoisted to the top of its scope but never initialized. So, if you try to access let variable before declaration, it will throw an error.

const: const and let are basically the same. The main difference between these two is that, const cannot be updated or re-declared.

const greetings = 'hey buddy';
greetings = 'hello buddy'; //error: Assignment to constant variable
const greetings = 'hey buddy';
cosnt greetings = 'hello buddy'; //error: Identifier 'greetings' has already been declared.

So, every const variable has to be initialized at the the time of its declaration.
var declarations and hoisting: var declarations are treated as if they were declared at the top of the function (enclosing block) or in the global scope if they were declared outside of a function. So, in a layman's term this is called hoisting. Let me give an example:

function getName(condition){
    if(condition) {
        var name = 'Jalil';
        console.log(name)
    }
    else {
        console.log(name)
    }
    console.log(name)
}

So, if you pass true as an argument in the function you get the output from if and the enclosing block blocks, otherwise, from else and enclosing blocks. But, notice that the name is only declared in the if block. So, what is going on here! What is happening is that variable name is hoisted at the top of the function but within the scope of the function. That's why everywhere inside the function it is available.

Binding: Variable is another word can be said as a binding. When we declare/initialize a variable, what we actually do is binding the value to a name. Well it happens inside a scope obviously. So, what is a scope? You can think scope as a specific part of the program.
So, binding happens when actually we declare or initialize a variable using var, let or const in JavaScript.

Block Level Declarations: If variable is declared in a block-level scope using let or const they cannot be accessed outside of the block scope. Block scope can be created in the following places:
1. Within a function (function block).
2. Within a block (bound with curly {} braces)

function getMoney(condition) {
    if(condition) {
       let amount = '100$';
       console.log(amount);
    }
    else {
       return null;
    }
}

In this function, amount is only accessible inside the if block. Because it was not hoisted at the top so the name is not accessible inside the else or enclosing blocks.

Arrow functions: These functions were introduce in ES6. These allow us to write shorter function syntax.

greeting = () {
    return 'hello world';
}

It gets even shorter if you it has only one statement. You need not to mention the return keyword and also don't need to put curly braces. greeting = () => 'hello world';

If the function has a single argument then the parentheses can also be omitted .

let name = 'Kudos';
greeting = name => 'hello' + name;

With arrow functions the 'this' keyword always represents the object that defined the arrow function.

Spread Operator: The spread operator '…' is used to expand an iterable or an array. For example,

const arrTxt = ['hello', 'Mars', 'goodbye', 'Earth'];
console.log(arrTxt); // ['hello', 'Mars', 'goodbye', 'Earth']
console.log(...arrTxt): // hello Mars goodbye Earth

Spread operator can be used to copy an array into another array.

const arr1 = ['hello', 'world'];
const arr2 = [...arr1, 'I', 'love', 'you'];
console.log(arr2) // ['hello', 'world', 'I', 'love', 'you']

Spread operator can also be used with object literals. For example,

const obj1 = {x:1, y:2};
const obj2 = {z:3};
const obj = {...obj1, ...obj2};
console.log(obj) // {x:1, y:2, z:3}

Default function parameters: It allows named parameter to be initialized with default values if no value or 'undefined' is passed. For example,

function add(a, b = 4) {
    return a + b;
}

add(5, 5) // 9
add (5) // 9
add (5, undefined) //9

Hoisting: It is a default behavior of JavaScript of moving all the declarations (not initializations) at the top of the scope before execution.

function hoisting() {
    a = 10;
    let b = 50;
}
hoisting();

console.log(a); // 10
console.log(b): // ReferenceError: b is not defined

In JavaScript, all undeclared variables are implicitly bound to global context. In other words, they are global variables. This is why when we logged the variable 'a' the output was correct although it is inside the function scope. And since the variable 'b' is block scoped we got a 'ReferenceError'.

hoisting of var - let's see an example,

console.log(name);
var name = 'Katherine Langford'; //undefined

But, we should have got a ReferenceError instead of undefined because, we tried to access the name before declaring it.
But actually the interpreter sees it like this:

var name;
console.log(name); // undefined
name = 'Katherine Langford'

If we would have used let instead of var it would show us ReferenceError instead. This happens because in ES6 we can't just have undeclared variables.
const behaves the same way as let when it comes to hoisting.