The 10 Things Every Javascript Developer Should Know

1. Hoisting: Hoisting is a Javascript by default behavior. It moves all the declaration at the top of the current scope (top of the function or script). This is called hoisting. Don’t understand? See the code below-

function getStudentName(info) {
    if(info) {
        var name = 'Rakib';
        return name;  
 } else {
    return null;
}

If you are new to javascript, you would think that the var name will be created if the condition is true. But it’s not true.

Behind the scenes, the Javascript engine changes the function like this-

function getStudentName(info) {
    var name;
    if(info) {
      var name = 'Rakib';
      return name;
   }else {
      return null;
   }
} 

So, you can see that the declaration of name variable is hoisted to the top. But its initialization is in the same place. But we can access the name variable from the else block also but its value will be undefined because it is not initialized.

2. Block Level Declaration:

What is a block-level declaration?

Block Level Declaration is those, which can accessible inside the scope but not accessible outside the scope. The block-level scope is created inside a function and inside a block(that means curly braces ‘{}’). And this block-level scope brings more flexibility in Javascript.

let declaration: It’s similar to the var keyword. We can replace var with let. But let variable has a limited scope. It follows block scope but var follows the function scope. Since let is hoisted on the top of the block. So, we can’t get access outside the scope.

function getStudentName(info) {
if(info) {
        let name = 'Rakib';
        return name;  
 } else {
    return null;
}

If we declare two variables as the same name using the let keyword, the browser will through an error.

var name = 'Rakib';
let name = 'Rahim';
//syntax error

const declaration:

If we declare a variable using the const keyword, we can’t change the value. If we want, this will throw an error.

const name = 'Rakib';
const name = 'Rahim';
//it will throw an error.

If we declare a variable using const, we must initialize it. Otherwise, it will throw an error.

const name;
// throw an error

3. Block Binding In Loops:

Before talking about block binding in loops, see the example below-

for(var i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i) // 5 (i is accessible here)

i is accessible outside the function because of hoisting. Hoisting hoisted var declaration to the top and that’s why we can access it out the for loop.

If we do the example with the let keyword, we will see the different output-

for(let i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i) // 5 (i is not accessible here. it will throw an error)

Because it is not hoisted to the top. That’s why we can’t access it outside the for a loop. It will available inside the for a loop.

If we try to do the same example with the const variable, let’s see whats happened-

for(const i = 0; i < 5; i++) {
    console.log(i)
}
//it will throw an error after one iteration.

Because, if we declare a variable using a const variable we can’t change its value. Here const i = 0, when the i++ will try to increase the const i = 0 value to const i = 1, browser will throw an error.

4. Function With Default Parameter Value :

In ES5 or earlier we need to declare default parameter like this:

function getInfo(name, roll) {
    name = name || 'Rakib';
    roll = roll || '01';
    
    return name + roll
}
console.log(getInfo()); // output- 'Rakib01'

When we call the function if we don’t give any value the function will use these two default values. This ‘||’ logical or defines if the first one is false, then the second one will be executed.

In ES6 we can write a default parameter function like this-

function getInfo(name = "Rakib", roll = "01") {
    return name + info
}
console.log(getInfo('Karim', '12')); //output- 'Karim12'

Here you can see, how easily we can write this. If we don’t give any value when we call the function, this default value will be executed. If we give value when we call the function the given value will be executed.

5. The Rest Parameter: The rest parameter allows you to specify an array that should be split or items that need to be passed as an argument to a function.

Suppose we have an array of some numbers. Now we want to find the max value of all elements in the array. Now we can solve this problem using the rest parameter. See the code below-

const numbers = [3, 6, 8, 5, 7 ,11, 4];
const maxNumber = Math.max(...numbers);
console.log(maxNumbers); // output- 11

6. Block-Level Functions:

In ES3 or earlier, if we declare a function inside a function was technically considered a syntax error.

"use srtict"
if(true) {
    // throws an error..
    function trySomething() {
         // code goes here
    }
}

In ES5, this code throws a syntax error. But in ES6, the trySomething() will consider a block-level declaration and can be accessed and can be called within the same block in which it was defined.

"use srtict"
if(true) {
    function trySomething() {
         // code goes here
    }
    trySomething();
}

7. Temporal Dead Zone(TDZ):

Temporal Dead Zone or TDZ is not named in the ECMAScript 6 specification. But this is usually used to describe why let and const bindings are not accessible before their declarations.

if (true) {      
    console.log(name)      
    let name = 'Nicholas'
}

Here the console.log(name) statement raises a reference error. Because we access the name variable before its declaration. The place where we try to access the name variable here is called the temporal dead zone. That reminds us we can not access variables before their declarations for let and const bindings.

8. Arrow Function:

Arrow functions were introduced in ES6. It allows you to write shorter function syntax.

All variations begin with function arguments, followed by the arrow, followed by the body of the function. Both the arguments and the body can take different forms depending on usage.

For Example, this function takes two arguments as a parameter and simply returns them.

const sum = (num1, num2) => {
    return num * 2
};

When we use one argument as a parameter, we don’t need to use parentheses.

Example:

const double = num => {
    return num * 2
}

We can do this in one line. Example:

const double = num => num * 2;

If we use one line arrow function we don’t need to use curly braces and return keywords.

9. Emerging Best Practices for Block Bindings:

While ECMAScript 6 was in development, there was widespread belief you should use let by default instead of var for variable declarations. For many JavaScript developers, let behaves exactly the way they thought var should have behaved, and so the direct replacement makes logical sense. In this case, you would use const for variables that needed modification protection.

However, as more developers migrated to ECMAScript 6, an alternate approach gained popularity: use const by default and only use let when you know a variable's value needs to change. The rationale is that most variables should not change their value after initialization because unexpected value changes are a source of bugs. This idea has a significant amount of traction and is worth exploring in your code as you adopt ECMAScript 6.

10. Working With Unnamed parameter:

Javascript parameters don’t limit the number of parameters that can be passed to the number of named parameters named. Default parameter values make it clear when a function can accept fewer parameters. But sometimes, we need need to work with unnamed parameters.

Rest Parameter:

Rest parameter is used to collect elements into an array, while, Spread operator is used to spreading the items of an array into single elements.

Let’s not waste much time in definitions, let’s code and see how these actually work.

Suppose we have a function like this.

function sum(num1, ...theArgs) {  
    return theArgs.map(function(element) {    
        return num1 + element;  
    }
  );
}

A function that can take any no. of arguments, the first arguments will always be a multiplier, and the rest will be numbers that will get multiplied by a multiplier.

As we can see above three dots before ‘theArgs’, Here these three dots represent the rest operator, and this means that all the remaining arguments apart from the multiplier will get collected in the array named ‘theArgs’.