JavaScript Tricky Basic Concepts

You need to know these concepts to become a pro of JS.

Truthy vs falsy value

Anything that is not falsy is truthy.

Falsy values are:

0
-0
null
undefined
""

Null vs undefined

Null is a primitive value that represents absence of value. You get undefined when you declare a variable but don’t assign any value.

typeof null shows object in JS is a mistake.

You can do math operations with null but not with undefined.

How do you get undefined

1. Declare a variable but not assign any value

2. A function doesn’t return a value

3. Don’t pass required parameters to a function

4. Try to access a property of an object that doesn’t exists

== vs ===

Both are used to compare. But a == compares only value whereas a === compares both the value and the type.

1 == ”1” // true

1 === “1” // false

Scope

A scope is a range of a variable.

A variable that is declared in a block (e.g. a for loop) cannot be accessed outside of that block, it is called block scope.

A variable declared in a function is only available inside that function, it is called function scope.

Closure

A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.

A closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

An example:

function adder (){
  let x = 0;
  return function add1 () {
    x++;
    return x;
  }
}
const adder1 = adder ();
adder1(); // 1
adder1(); // 2
const adder2 = adder ();
adder2(); // 1

Call vs Apply

The difference is that apply lets you invoke the function with arguments as an array; call requires the parameters be comma separated. A useful mnemonic is "A for array and C for comma."

Window

The window object represents the running environment. It is global scope. All the global variables of JS are properties and global functions are methods of the window object. The document object is also a property of window.

Properties and methods of window object can be accessed directly.

Window.console == console

Window.price = 500; price is now a global variable and can be accessed directly as price.

This

The this keyword represents the context from where it was called.

A general rule is look at the left of the (.), if there is nothing then this will represent global object. Else it will represent what is in the left.

myObj.sum(); Here, this keyword in the sum() function will represent myObj.

calculate(); Here, this keyword in the calculate() function will represent global object.

· In a method, this refers to the owner object.

· Alone, this refers to the global object.

· In a function, this refers to the global object.

· In a function, in strict mode, this is undefined.

· In an event, this refers to the element that received the event.

setTimeOut(), setInterval()

setTimeOut is used to make async call. The time given represents the minimum time to execute the function. After finishing all the sync actions the time out will start.

JavaScript runtime concept

Stack => data structure, LIFO

Heap => memory allocation

Queue => List of tasks to be processed

Event loop => Pushes tasks from queue to stack

Web/C++ APIs => For async tasks