Things you need to know about JavaScript

MD. Ehsanul Haque
7 min readMay 8, 2021

Truthy and Falsy values

True and false values for different variable depending on condition,

Number:

1. number = other number(positive, negative) then true

2. number = 0 then false

String:

1. string = “name” then true

2. string = “0” then true

4. string = “ ” then true

3. string = “’’ then false

Array:

1. let name = [] ;

I. console.log() then []

II. condition check then true

object:

1. let name = {} ;

I. console.log() then {}

II. condition check then true

Undefined:

  • if a variable value is undefined then JS will consider the variable as false.

1. let name; (if no value is set for ‘name’)

I. console.log() then undefine

II. condition check then false

null:

  • if a variable value is set to null then JS will consider the variable as false.

1. let name = null ;

I. console.log() then null

II. condition check then false

NaN:

  • not a number

1. let name = NaN ;

I. console.log() then NaN

II. condition check then false

Null Vs Undefined different ways we will get undefined

Undefined:

7/8 way to we can get undefined.

  • declare a variable by assign value undefined.
  • declare a variable without assign value.
  • try to access an object property without declaring the property value.
  • try to access object property without a proper object key.
  • try to access an array 11th element where array length = 3.
  • declare function without return the value.
  • declare function without passing parameter value.

null:

null is used to explicitly set as the value for a variable. null helps the developer to make sure that taking a value from somewhere(like, array) is performed successfully.

  • set an array value as null(empty) after all the values pop() from the array.

double equal (==) vs triple equal (===), implicit conversion

  • double equal (==): only check the value. It will convert the type of both checking values into one type, according to the programming rule so that type of both values can match with each other.

2 == 2 (true)

2 == “2” (true)

1 == true(1) (true)

1 == false(0) (false)

0 == false(0) (true)

  • triple equal (===): check the value as well as the type of the value. If type not matched return false.

2 === “2” (false)

1 === true(1) (false)

0 === false(0) (false)

Scope, block scope, acc

“let, const” too much organized where “var” is flexible.

  • Using let or const If a variable is declared or calculation is done under a function then the useability of these variables or result will be under the area or scope of that function. Can not use outside of the function. this process is known as block scope.
  • Using let or const scope Any variable(global variable) that declares outside of the function can use or call from inside of the function. That variable is Also useable by outside elements of function.

What do you understand by westing/ block scope/ global scope?

Ans: if we declare any variable using ‘var’ then the preocess of taking that variable declaration in the upper level(its parents level) from the variable own-scope is say westing . then the value of that variable will accessable from anywhere. Other hand, Declare variable using ‘let’ and ‘const’ will keep the declared variable under the that scope(block scope/ global scope) .

westing: only the declaration of that variable goes upper not the value. so right writing process -

wrong:

console.log(day)

var day = “Friday”

right:

var day = “Friday”

console.log(day)

Closure, encapsulation, private variable

What is the closure?

Ans: if I call a function_2 inside from function_1 or return function_2 from function_1 then the function_1 creates a closed environment around it, then if function_2 tries to access any variable that outside of function_2 but inside of function_1. then function_2 returns that variable after calculation when function_1 being called from outside using varibale_1 then the varibale_1 insert its own value from function_1, similarly if varibale_2, varibale_3….. is there, then they all will individually insert their own value from function_1. This system is known as closure.

function function_1{
let count = 0;
return function function_2(){
count++;
return count;
}
}

Variable_1 = 1, 2, 3, 4, 5….

Variable_2 = 1, 2, 3, 4, 5….

Variable_3 = 1, 2, 3, 4, 5….

So, when

console.log(variable_1), output will be 1

console.log(variable_1), output will be 2

console.log(variable_1), output will be 3

console.log(variable_1), output will be 4

console.log(variable_2), output will be 1

console.log(variable_2), output will be 2

console.log(variable_1), output will be 5

console.log(variable_1), output will be 6

console.log(variable_2), output will be 3

difference between bind, call, and apply

How many ways do we have to apply a method in an object to another object? Ans: 3 (bind, call, apply)

Syntax of bind, call, apply:

bind:

  • oldObjectName. oldObjectFuctionKey.bind(newObjectName)

Let, an object has a method(function), no matter what we can use the method in that object but if we want to apply that method on another object in that case we use bind.

  • bind(functionName)
  • less efficient
  • return us a function

This, bind() functionality forcibly sets newObject values as the oldObject value by replacing the oldObject value without losing oldObject previous value.Ex.(bangla): work like onner basha thake kodal ane nejer basai gorto khora.

call:

  • call(functionName, parameter_1, parameter_2, parameter_3, ……)
  • no need to use/build another function like bind()
  • direct action by calling

apply:

  • need to pass parameter’s as array “[ ]”
  • apply(functionName, [parameter_1, parameter_2, parameter_3, ……])

Difference between bind, call, and apply?

Ans: if I have a method(function) under an object, and I want to apply that method on another object(new object) in that case I can apply call, apply and bind method.

  • call() method: call() method can be used by applying on oldObject method and bypassing the new object as 1st argument(on that I want to apply the method) and other parameters using comma separation.
  • apply() method also works the same as call() method.
  • apply() method: apply() method can be used by applying on oldObject method and bypassing the new object as 1st argument(on that I want to apply the method) and other parameters as an array.
  • bind() method: To use a method(oldObject method) again and again, have to bind that method with the new Object using the bind() method.

window, global variable, global scope

window

  • the environment/place where the overall execution of javaScript occurs.
  • The JavaScript variable window is an object.
  • representing a window containing a DOM document.

global scope

  • anyone can access it

global variable

  • declare out of function
  • declare in the function but forget to declare data-type(var)

local scope covert into global scope

  • when a variable declares in a local scope but forgets to define the dataType of that variable then when the compiler starts to compile code and find the variable withOut dataType then it defines that variable as a global scope.

How to understand “this” keyword

  • If ‘‘this’’ is used in an object or method of a class then it will represent that object.
  • when calling a method then “this” value will be the left_side value of the “dot”.
  • if anything in the left_side of the ‘this’ keyword, the value will run on that context.
  • if nothing in the left_side of ‘this’ keyword, the value will run on ‘ window ’ (chrome browser)

Asynchronous Javascript setTimeout, setInterval

  • Javascript work in synchronous-way.
  • But we can break the synchronous-way using setTimeout, setInterval, and make the working process of JS asynchronous.
  • setTimeout(): setTimeout() will execute the given task after execution/completing of all other tasks in the queue. work for once a time.
  • setTimeout():: also can add time in setTimeout(), which indicates the given task will execute by setTimeout() after the specific time that is set. The time must be in milliseconds. also can use as an arrow function.

question ***

setTimeout(() => {

console.log(“xx”)

}, 5000)

What do you mean by 5 sec or 5000 milisecond ?

Ans: it means that When all the code executes, setTimeout() code will execute after 5 sec or 5000-millisecond of all the code execution, not before that, or If other codes need more time to execute than 5 sec or 5000 millisecond then the setTimeout() code will execute after that time.

  • setInterval(): repeated the same work after the given interval.

How Javascript works event loop stack and queue

  • event loop has two-part — stack(main part ) and queue(waiting list)
  • when we call a method or do anything, at that time there will occur an event-loop where all the function calls each other and make a stack like a bundle of books. then Javascript will start reading and execution from the top of the stack then the second one and this process will continue. After that, if get more time Javascript reads the waiting list or the queue elements.
  • conclusion: In the beginning, JavaScript finishes the synchronous(stack) task, then javascript starts the asynchronous(waiting list or the queue) task.

Event bubble with example

propagating an event from the lowest to the upward.

--

--