10 JavaScript concepts you should be familiar with.

Truthy and Falsy

In JavaScript, when considered to boolean context, a value can be either truthy or falsy. A truthy value is one which evaluates to true and a falsy value is one which evaluates to false. JavaScript has the following falsy values: 0 , -0 , 0n (BigInt), -0n , null , undefined , false , '' (Empty string), NaN , and false . All other values are considered truthy.

var a = '';
if(a) {
    console.log('Truthy');
} else{
    console.log('Falsy'); // Falsy
}

Undefined

You can get undefined in several ways. If you declare a variable and don’t assign a value to it, you will get undefined.

var a;
console.log(a); // undefined

When you write a function that doesn’t return any thing from it and you assign the function call to a variable, the value of the variable becomes undefined.

function foo(a){
    console.log(a)
}
var result = foo(5);
console.log(result); // undefined

If you try to access a property of an object which is not available in the object, you will get undefined.

var person = {name: 'Ashik', age:'25'};
console.log(person.profession); // undefined

Null

A variable is null when it doesn’t have any value. You have to implicitly assign the null to a variable if you want to use null. Null and undefined are not same. You assign the value null to a variable, whereas undefined is when a variable is not assigned a value.

null === undefined // false
null == undefined // true
null === null // true

Double equal(==) and triple equal (===)

== and === are both comparison operator, both are used to compare if two values are equal. But there is a difference between them. The == only checks for whether two values are equal, it has no concern about the types. If two values are equal it returns true . The === checks for both the value and the type. If the value is equal and type is different it will return false , if both the value and the type are equal then it will return true .

var a = 10;
var b ='10';
a == b? console.log('True'): console.log('False'); // True
a === b? console.log('True'): console.log('False'); // False

Scope

Scope means the availability of variables, functions or objects. The two types of scopes in JavaScript are: Global Scope and Local Scope.

function foo(){
    var a = 10; // a in local scope
    console.log(a); // 10
}
console.log(a); //error. a in local scope, hence not accessible here

Variables in local scope cannot be accessed from outside of that scope.

var a = 10; // a in globalscope
function foo(){    
    console.log(a); // can be accessed from here
}
console.log(a); // can also be accessed from here

Variables in global scope can be accessed from anywhere of the code.

Closure

If you call or return a function from another function, the execution of inner function creates a closed environment. The inner function scope is called closure because it is enclosed by outer function scope. Let’s have a look at the following example:

function increment(){     
    var i = 0;          
    return function(){        
        return i++;     
    } 
}

When we execute the function, closure will hold the state of the local variable in outer scope.

var increment1 = increment();
console.log(increment1())  // 0
console.log(increment1())  // 1
console.log(increment1())  // 2
var increment2 = increment();
console.log(increment2())  // 0
console.log(increment2())  // 1
console.log(increment2())  // 2
console.log(increment1())  // 3

Here we assigned the function call to the variable increment1 . Each time we excute the function increment1 the value of i gets increased. If we assign the function call to another variable increment2 and call it multiple times, we get the similar result. That means, each closure holds a separate state of the local variable in outer scope.

bind()

The bind method takes an argument as this which sets the value of this to the target function. Let’s say we have an object named person

const person = {
    firstName: 'Jason',
    lastName: 'Bourne',
    salary: 99000,
    getFullName: function () {
        console.log(this.firstName, this.lastName);
    },
    chargeBill: function (amount) {
        this.salary = this.salary - amount;
        return this.salary;
    },
};

Now we have another object named hero

const hero = {
    firstName: 'Bruce',
    lastName: 'Wayne',
    salary: 150000,
};

For this hero object we can write another object property getFullName or we can use the existing property from person .

To do this, we can use the bind() method. It takes the first parameter as this and returns a function.

const heroChargeBill = person.chargeBill.bind(hero);
heroChargeBill(5000);
console.log(hero); // 145000

Notice that the salary of the hero changed even though the hero object doesn’t have any method named chargeBill .

call()

The difference between bind() and call() is that the bind() method creates a copy of the function and sets the this keyword, while the call() method sets the this keyword and executes the function instantly.

const heroChargeBill = person.chargeBill.call(hero, 5000);
console.log(hero); // 145000

apply()

The call() and apply() works in the same way but the difference between them is that, call() expects all the arguments individually while apply() expects an array of arguments.

const heroChargeBill = person.chargeBill.apply(hero, [5000]);
console.log(hero.salary); // 145000

this

The this points to the object it belongs to.

const foo ={
    num: 50;
    getNum: function(){
        return this.num;
    },
}
console.log(foo.getNum()); // 50