10 Most Tricky Concepts Of Javascript

10 Javascript Tricky Concepts

Javascript Most Tricky Parts

Closures In Javascript

Closures are the combination of a function that is bundled together with the references of its surrounding states. Closures give us access to an outer functions scope from an inner function. In javascript every time we create a function, we create closures.

Example:

var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add(); // The counter is 3.

Truthy Value VS Falsy Value

Truthy value means which is true. There are some values that are defined as true by JavaScript itself. Examples of truthy values are — true, strings(not empty),Array([]),Object({}),!0. On the other hand, JavaScript has defined some values that false by default. They are — 0, false, empty string, undefined(a variable which value is not assigned), Null (a variable which value is assigned as null), NaN.

The Truthy values are given below-

• ‘0’ (zero within a string)
• ‘false’
• [] (an empty array)
• {} (an empty object)
• And an empty function.

The Falsy values are given below-

• false
• 0
• ‘’ or “” (empty string)
• null
• undefined
• Nan

Null vs Undefined

In JavaScript, undefined is a type, whereas null is an object.

undefined

It means a variable declared, but no value has been assigned a value.

Example:

let demo;
console.log(demo); //shows undefined
alert(typeof demo); //shows undefined

null

Whereas, null in JavaScript is an assignment value. You can assign it to a variable.

Example:

let demo = null;
console.log(demo); //shows null
alert(typeof demo); //shows object

Double equals Vs Triple equals sign (== vs ===)

• In any programming language, we use a single equals sign to assign a value.
• Double equals compares/checks the value only.
• Tripel equals compares value and data type as well.

Example:

11 == '11' // returns true 
but,
11 === '11' // returns false

In the above example, we can clearly see that when we are checking the same thing with double and triple equals signs it shows different results.

Implicit conversion in Javascript

Implicit conversion means the conversion is done by itself by default. In JavaScript sometimes at the time of comparing using Double equal (==), it converts data (numerical string) into number itself by default, not only that if we compare (1 == true), it returns true but you can see that 1 is not equal to true. What actually happens here is that JavaScript counts “ true ” as a positive value and it implicitly converts “ true ” into 1 and that returns (1 == true) is true.

2 + '2' // returns 4
2 * [2] // returns 4

In the example, we can see that even we are adding a string ‘2’ with a number 2 it is returning the right answer.

Hoisting in Javascript

What is hoisting? It is a straightforward concept. That can be understood easily.when JavaScript compiles all of your code, all variable declarations using var are move to the top of their functional/local scope or the top of their global scope. Without seeing where the declaration has been made. That is what I meant by hoisting. Functions declarations are also hoisted. When the javascript code compiled variable moved to the top. However, the only thing that gets moved to the top is the variable declarations, not the actual value. That’s why when we use a variable before its declaration, it returns undefined. Because it just moves the variable declaration part, not the actual value. But we can use a function before its declaration.

Example:

console.log(myName); // The output is undefiend.
var myname = "Faizur"
sayHello() // Output is Hello.
function sayHello () {
return console.log("Hello")
}

Bind in Javascript

bind() method allows an object to borrow a method from another object without making a copy of that method. This is known as function borrowing in JavaScript. Suppose we have an object name person1. Which have name salary and byeSomething property. buySomething is the method the belongs to the person1 object. Now suppose we have another object name Person2 .But it has only two properties. Which are name and salary. But we want to use the same buySomething method in out person2 . How we can use it without making a new one or coping it. We can use bind () to borrow the doSomething method form person1 object.

const person1 = {
 name : "One",
 salary: 400,
 buySomething : function(amount){
 this.salary = this.salary - amount
 return this.salary
} 
}
console.log(person1.butSomething(55)) //the console.log is 345.
const person2 = {
 name: "Two",
 salary : 500
}
const person2SalaryDecrease = person1.buySomething.bind(person2);
console.log(person2SalaryDecrease(50)); //the console.log is 450.

This is how we can use bind () to borrow a method from another object.

This Keyword In Javascript

This is a special reserved keyword in javascript. What this is return by using it, that depends on the environment or were using this. If you used that in a method, this means his own object in this method. If you declare this alone or you do not use in anythings insides, this time this keyword returns a global object.If you use that in an event this time this is received the event doing the intersection what user want.

Example:

const obj = {
   firstName: 'faizur',
   lastName: 'rahman',
   salary: 500,
fullName: function () {
   return this.firstName + ' ' + this.lastName;
},
  getBill: function (amount) {
  return this.salary - amount;
},
};
  console.log(obj.getBill(100));

Async Await In Javascript

We know javascript is a synchronize language. Synchronize means, javascript working serially if javascript has found one error then javascript working stop and return an error. So that async-await effective for that. if we use that for fetching with API then he working like a promise. So if we can not get value or error its does not break synchronizing. Because the async-await system waiting for a response when he got a response he executes that again and again. If got an error or something we can catch it by the catch error handling method.

async function loadData(){
       const response = await  fetch('https://jsonplaceholder.typicode.com/users')
     const  getData = await response.json();
            console.log(getData,"store1"); // data
}
loadData()

Map vs Find vs Filter

Javascript has some functions for working with an array.

map using for return the all value of the array and find return first value with an object and conditionally from an array and filter give all value inside a object from an array with conditionally.

Example: Map

var persons = [
  {firstname : "Malcom", lastname: "Reynolds"},
  {firstname : "Kaylee", lastname: "Frye"},
  {firstname : "Jayne", lastname: "Cobb"}
];


function getFullName(item) {
  var fullname = [item.firstname,item.lastname].join(" ");
  return fullname;
}

function myFunction() {
  document.getElementById("demo").innerHTML = persons.map(getFullName);
}  // New array: Malcom Reynolds,Kaylee Frye,Jayne Cobb

Example: Find

<p>Minimum age: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">Try it</button>

<p>Any ages above: <span id="demo"></span></p>

var ages = [4, 12, 16, 20];

function checkAdult(age) {
  return age >= document.getElementById("ageToCheck").value;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

Example: Filter

var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.filter(checkAdult);
} // 32, 33, 40