The more about JavaScript

Today we will discuss 10 various thing about JavaScript..

1. Arrow Functions
2. Destructuring Assignment
3. Spread Operator
4. Template Literals
5. Default Parameters
6. Block-Binding: Var, Let, and Const
7. Try … Catch
8. Try…catch…finally
9. Cross-Browser

Those 10 topic will discuss in the below..

Arrow Functions

01| x => x * x;
02| (x,y) => {
return x * y
}

• Arrow function is a most useful thing which comin ES6 to make programmer life easier.
• The first array function x is a parameter and return x * x.
• And The second function x and y is a parameter and return x * y
• If you using one parameter you can’t use the second bracket.(Ex: 01)
• But if you using two-parameter you using the second bracket for return (Ex: 02)
• You can call it like a smaller version of normal function.

Destructuring Assignment

Destructuring assignment mean that is a JavaScript expression that unpack values from arrays, or properties from objects, into a different variables. In other words, destructuring is the pulling out of the values from an array or properties from an object. Thats it.

Spread Operator

const number1 = [1,2,3,4];
const number2 = [6,7,8,9];
const totalNumber = [...number1, ...number2]
console.log(totalNumber)
//output is [1,2,3,4,6,7,8,9]

• This is similar to concatmethod.
• But using triple-dot that is coming ECMAScript 6 Model
• It made easier programmer life.
• You can easily concatenation one array to another array or any value.
• It also works in Object.

Template Literals

console.log('I am a programmer 1\n' +
      'Javascript is the best programming language')
console.log(`I am a programmer 
      Javascript is the best programming language`)

• Template strings are the new feature of ES6 and made easier for programmers.
• Inside template strings, you can write any things. An example is the second console.log(). The symbol of template string is ``
• Before coming, ES6 programmers can write text inside this ‘ ’ symbol and use 1\n for going the second line.
• But using template string you can write an easily first, second, third, etc line.

Default Parameters

function add(num1, num2){
num2 = num2 || 5;
return num1 * num2;
}
const total = add(4)
//output is 20function add(num1, num2 = 5){
return num1 * num2;
}
const total = add(4)
//output is 20

• add function has two parameters. But users give one parameter.
• Then it inter the function and see the other default parameter (num2= num2 || 5).
• At last, the output is (4*5) 20.
• The second function is similar to the first function. Now I am using the default value as using with parameter.

Block-Binding: Var, Let, and Const

Variable declarations havingvar are considered as if they are at the top of the function or it is treated as a global scope if it is declared outside of a function.

For making a clear idea about that, consider the following function definition:

function getName(name) {
    if (name) {
        var result = `Hello ${name}`;
        return result;
    } else {
        // result exists here with a value of undefined
        return null;
    }
        // result exists here with a value of undefined
}

Here we can see that varis declared in if block scope that is not a global scope but in JavaScript engine, behind the scene the getName function itself has been changed to like this;

function getName(name) {
    var result;
    if (name) {
        result= `Hello ${name}`;
        return result;
    } else {
        return null;
    }
}

That is why we can access it in elseblock scope as well as getName function scope. But it is not a global variable that is accessible globally.

Now if we use let instead of var, the situation is changed dramatically. Let’s see an example,

function getName(name) {
    if (name) {
        let result = `Hello ${name}`;
        return result;
    } else {
        // result does not exist here
        return null;
    }
    // result does not exist here
}

It is because of ES6 let behavior as JavaScript engine does not permit let to be hoisted at the top level of the current block scope. Another difference var andletis that let can not be redeclared like var

For example,

var num = 1;let num = 2;
// Throw an error if (condition) {
    let num = 3;
    // Does not throw any error 
}

Here first let is not accessible because of num redeclaration but second let is valid because it is inif block scope.

Try … Catch

• Try catch blogs is a very important thing for a developer.
• All developers use this try …catch method.
• If any error on your code that catch by try…catch method.
• If the code has no error then the code goes to the try method and an error occurred in the code then it goes catch method.

Try…catch…finally

try {
 alert( 'try' );   
 if (get a error){
      excuted in catch block
  } 
} 
catch (e) {
   alert( 'catch' ); 
} 
finally {
   alert( 'finally' ); 
}

• This is similar to try…catch.
• But it is an extra thing that is finally.
• “if” condition gets an error then it takes catch blog. Then finally blog executed.
• If there is no error then execute try and finally block

Cross-Browser

• Cross-browser testing is a very important thing that the web sites and web apps you create work across an acceptable number of web browsers.
• Cross Browser check is a very important thing for a developer.
• When you planned to make a web app, you noticed the cross-browser.
• After making the app you must be checked some default browser and some small-screened mobile or tablet that the apps running good.
• At least you do three things for making an application that is planning, developing, texting with cross-browser.

Enhanced Object Literals

A JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly braces. Object literals encapsulate data, enclosing it in a tidy package. This minimizes the use of global variables which can cause problems when combining code.