JavaScript Concepts

Truthy and Falsy values:

As well as a type, each value also has an inherent boolean value, generally known as either truthy or falsy. Some of the rules are a little bizarre so understanding the concepts and effect on comparison helps when debugging JavaScript applications.

The following values are always falsy:

• false
• 0 (zero)
• '' or "" (empty string)
• null
• undefined
• NaN

Everything else is truthy. That includes:

• '0' (a string containing a single zero)
• 'false' (a string containing the text “false”)
• [] (an empty array)
• {} (an empty object)
• function(){} (an “empty” function)

Null vs Undefined:

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as:

null is an assignment value. It can be assigned to a variable as a representation of no value:

From the preceding examples, it is clear that undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

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

map, filter, find:

• map returns an array with the same length,
• filter as the name implies, it returns an array with less items than the original array
• reduce returns a single value (or object)
• find returns the first items in an array that satisfies a condition

map, filter and reduce were introduced in ES5, so you can safely use them as implemented in every browser since years.

find was introduced in ES6/ES2015.

They offer a more declarative approach, rather than an imperative approach (describe what should happen, not write every tiny bit of processing that should happen).

Remove duplicate item from an array:

We can use the indexOf() method in conjugation with the push() remove the duplicate values from an array or get all unique values from an array in JavaScript.

function getUnique(array){

var uniqueArray = [];

// Loop through array values

for(var value of array){

if(uniqueArray.indexOf(value) === -1){

uniqueArray.push(value); }

}

return uniqueArray;

}

var names = [“John”, “Peter”, “Clark”, “Harry”, “John”, “Alice”];

var uniqueNames = getUnique(names);

console.log(uniqueNames);

// Prints: [“John”, “Peter”, “Clark”, “Harry”, “Alice”]

Reverse a string:

Reversing a string is one of the most frequently asked JavaScript question in the technical round of interview. Interviewers may ask you to write different ways to reverse a string, or they may ask you to reverse a string without using in-built methods, or they may even ask you to reverse a string using recursion.

There are different methods, one of them is Recursion. For this solution, we can use two methods: the String.prototype.substr() method and the String.prototype.charAt() method.

• The substr() method returns the characters in a string beginning at the specified location through the specified number of characters.

"hello".substr(1); // "ello"

• The charAt() method returns the specified character from a string.

"hello".charAt(0); // "h"

The depth of the recursion is equal to the length of the String. This solution is not the best one and will be really slow if the String is very long and the stack size is of major concern.

The bind() Method:

For such cases we can use the ECMAScript 5 bind() method of the Function.prototype property. This means bind() can be used by every single function.

var myCarDetails = car.displayDetails.bind(car); 
myCarDetails(); // GA12345 Toyota

The bind() method creates a new function where “this” refers to the parameter in the parenthesis in the above case “car”. This way the bind() method enables calling a function with a specified “this” value.

What if we would like to pass a parameter to the displayDetails function? We can use the bind method again. The following argument of the bind() method will provide an argument to the function bind() is called on.

Let me rewrite the car object:

var car = { 
    registrationNumber: "GA12345",
    brand: "Toyota",
    displayDetails: function(ownerName){
        console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
    }
}

Example of passing arguments with bind():

var myCarDetails = car.displayDetails.bind(car, "Vivian"); // Vivian, this is your car: GA12345 Toyota

call() and apply() methods:

Similar but slightly different usage provide the call() and apply() methods which also belong to the Function.prototype property.

This time there is a car object without the displayDetails function, which is located in the global context.

var car = { 
    registrationNumber: "GA12345",
    brand: "Toyota"
}
function displayDetails(ownerName) {
    console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
}

Global variable:

A variable declared outside a function, becomes GLOBAL.

A global variable has global scope: All scripts and functions on a web page can access it.

var carName = “Volvo”;

// code here can use carName

function myFunction() {

// code here can also use carName

}

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 the same as:

document.getElementById(“header”);

Asynchronous:

React Async is a promised-based library that makes it possible for you to fetch data in your React application. Asynchronous code doesn’t have to wait — your program can continue to run. You do this to keep your site or app responsive, reducing waiting time for the user.