The intermediate concept in Javascript

We all love javascript, and we love to do things by using javascript. Today we will learn some intermediate concepts in javascript. Let's start.

Hoisting

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.

console.log(myName); // The output is undefiend.

var myname = "Shakib"

sayHello() // Output is Hello.

function sayHello () {
return console.log("Hello")
}

Truthy and Falsy value

Truthy values are expressions that decide to the boolean value of true, and falsy values are expressions that decide to the boolean value of false. Falsy values are 0, an empty string (“”), undefined, null, NaN, and false. Let’s check are those things are falsy values.

Boolean("") // return false.
Boolean(0) // return false.
Boolean(undefined) // return false.
Boolean(null) // return false.
Boolean(NaN) // return false.
Boolean(false) // return false.

Other than falsy value, everything is truthy value. Let’s see.

Boolean("Hi!") // return true.
Boolean("1") // return true.
Boolean(1) // return true.
Boolean(-1) // return true.
Boolean([]) // return true.
Boolean({}) // return true.

How we get Undefined and Null

Undefined is a primitive data type. If you declare a variable but not give any value, it will return undefined. Let’s see how to we will get undefined. To get null, you have to declare it explicitly.

let yourName;

console.log(yourName); //return undefined.

function add(a,b) {
console.log(a+b) 
}

add(3,4); // We will get the value. But it return undefined.

let myName = null;
console.log(myName) // it retuen null.

Double Equal Vs. Triple Equal

We sometimes check if the two values are equal or not. To check It, we use double equal and triple equal. But there is some difference between these two. Double equal didn’t check the data type. It just checks off two values of them. Sometimes it comes up with some errors. To avoid this error, we can use triple equal. Triple equals, not just check the value. It also checks the types of values.

const number = 2;
if (number == "2"){
console.log("true")
}else {
console.log("False")
}

It will console.log true. Because double equal check only the value, not the type.

const number = 2;
if (number === "2") {
console.log("true");
}else {
console.log("False");
}

In this example, we use triple equal. Now it will console.log False. Because 2 and “2” are not equal. Those 2 values are 2 kinds of data types. They are not equal at all.

Bind

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.

Scope

Scope sets the accessibility of variables. In JavaScript, there are two kinds of scope 1. Local scope, and 2. Global scope. In Local scope, variables only are accessible inside the local scope. On the other hand, Global scope variables can be accessed from anywhere in the script itself. Variables that are declared inside a function only be accessible inside the function scope/local scope.

//this is global scope
const mySalary = 100; //this is a global variable

function ShowYourSalary(){
const yourSalary = 200; //this is a local variable.
console.log(yourSalary);
console.log(mySalary);
}
ShowYourSalary(); // this will console.log yourSalary mySalary

console.log(yourSalary); //this will give a error yourSalary is not defiend.

ShowYourSalary() will console.log 2 salary very easily because 2 variables are accessible inside the showYourSalary() . But we try to console.log() yourSalary it gives us an error that yourSalary is not defined. Because it is only accessible inside the ShowYourSalary() function.

Array.map()

Map() method in javascript creates an array by calling a particular function on each element present in the array. It is a non-mutating method. That means we can’t be able to change the method explicitly. The map method accepted 3 parameters. Those are the current element, index, and array. The current element is the main parameter. The other two are optional. The current element holds the value of the current element. The index holds the position of the current element, and the array holds the array.

const names = [ayon,shakib,amy,mishu];

function showAllname(names){

names.map((name,index)=> console.log(name,index));

}

showAllname(names);

This showAllname() will console.log each name individually with their index number.

Array.filter()

Array filter method returns an array according to the condition. If the condition never meets, it will return an empty array.

const scores = [2,5,8,1,6,4,0];

const condition1 = scores.filter(score => score < 5);

console.log(condition1); // return [2,1,4,0];

const condition2 = scores.filter(score => score < 0);

console.log(condition2); // return [];

In condition1 variable, we filter all those numbers that are less than 5. And it returns [2,1,4,0] . But in condition2 variable, we filter all those numbers that are less than 0. It returns [] . Because there is not any number less than 0 in the scores variable.

Array.find

Array find is similar to the array filter. But it will return only the first value according to the condition. If the condition not meets, then it will return undefined.

const scores = [2,5,8,1,6,4,0];

const condition1 = scores.find(score => score < 5);

console.log(condition1); // return 2;

const condition2 = scores.find(score => score < 0);

console.log(condition2); // return undefined;

This

One of the confusing keywords in javascript is this. This keyword holds the reference of an object that it belongs to. It has different values depending on where it is used. If it is used in a method, then it refers to the owner object.OR if it is used in a function, then it refers to the global object.

This is all.

See you in another article. : )

The intermediate concept in Javascript. (opens in a new tab) was originally published in The Startup (opens in a new tab) on Medium, where people are continuing the conversation by highlighting and responding to this story.

Originally published on Medium (opens in a new tab).