Some Tricky Concept of JavaScript

Photo by Tracy Adams on Unsplash

double equals(==) vs triple equals(===)

The triple equal(===) operator will compare both the value and type of the operands. If the value is the same but the type is not, the equality will evaluate to false. On the other hand the double equal(==) checks the value only.

for example:

console.log(2 === "2") // will evaluate to 'false' as the left operand is of type 'number' while right operand is of type 'string'
console.log(2 == "2") // will evaluate to 'true'

Truthy and Falsy values

In JavaScript, there are some reserved values which are always true or false. Truthy are expressions which evaluates to boolean true value and falsy evaluates to boolean false value.

The following values are always falsy:

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

The following values are always truthy:

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

truthy example:

let number = "0";
if(number){
    console.log("true");
}
else{
    console.log("false");
}
// output >>
true

falsy example

let number = 0;
if(number){
    console.log("true");
}
else{
    console.log("false");
}
// output >>
false

null and undefined

• Null is an empty or non-existent value that must be assigned. It means When variable is declared but there has no value it gives you null.

let number = null;
console.log(number);
// output >>
// null

• Undefined means lack of value or unknown value. A variable has been declared, but not defined is known as undefined

let number ;
console.log(number);
// output >>
// undefined

.map()

map() is a smart way to run for loop. The method creates a new array populated with the results of calling a provided function on every element in the calling array.

Here we write a program to find the squire of every element of an array. Firstly we used for loop. But after that we see the map() method which is more smarter and shorter than using loop

const numbers = [3, 4, 5, 6, 7];
// using for() loop
for(let i = 0; i < numbers.length; i++){
    const element = numbers[i];
    const result = element * element;
    squire.push(result);
}
// using .map() method
const result = numbers.map(element => element * element)

.filter()

What if we have an array, but only want some of the elements in it? That’s where .filter() comes in!

var pilots = [
  {
    id: 2,
    name: "Wedge Antilles",
    faction: "Rebels",
  },
  {
    id: 8,
    name: "Ciena Ree",
    faction: "Empire",
  },
  {
    id: 40,
    name: "Iden Versio",
    faction: "Empire",
  },
  {
    id: 66,
    name: "Thane Kyrell",
    faction: "Rebels",
  }
];
// if we want two arrays now: one for rebel pilots, the other one for imperials, we will use .filter() on the array
const rebels = pilots.filter(pilot => pilot.faction === "Rebels");
const empire = pilots.filter(pilot => pilot.faction === "Empire");

.find()

Sometimes we need to look for a specific item in the array, and return it. The find() method returns the value of the first matching element in the provided array that satisfies the condition of function.

const numbers = [3, 4, 5, 6, 7];
const result = numbers.find(x => x>=4);
console.log(result);
// output
5

Global Variable

A global variable is declared outside a function or declared with window object. Global variable is accessible any where of a program. We can use it inside a function, array, object and so on

const number = 5;
function result(){
    console.log(number);
}
// output
5

The Window Object

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.

bind()

The bind method creates a new function and sets the this keyword. “this” always refers to an object.

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.

var car = {      
    registrationNumber: "COROLLA123",     
    brand: "Toyota",      
    displayDetails: function(ownerName){      
        console.log(ownerName + ", this is your car: " +
        this.registrationNumber + " " + this.brand);     
    } 
}
var myCarDetails = car.displayDetails.bind(car, "Zami"); 
// output
Zami, this is your car: COROLLA123 Toyota

apply()

Similar but slightly different usage provide the 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: "COROLLA123",     
    brand: "Toyota" 
}  
function displayDetails(ownerName) {     
    console.log(ownerName + ", this is your car: " +
    this.registrationNumber + " " + this.brand); 
}
displayDetails.apply(car, ["Zami"]);
// output
Zami, this is your car: COROLLA123 Toyota