JavaScript ES6: 10 new abstractions to improve your code

1. Default parameters

Function is mostly used in any language. How ever sometimes we need to set default value of a parameter. But earlier version of ES6 we cannot do the task .

2. Spread operator

Three dots … are called spread operator. Its a very interesting operator of ES6 . Its make coding very simple. Hare are little bit example hope that's help you to understood spread operator.

You can add two or more array or object by spread operator. Have a look on below example

3. Rest Parameter

The rest parameter is also denoted by three dots (…). However, it packs remaining arguments of a function into an array.

Syntax :

function f(a, b, ...rest) {
  // ...
}

Example:

function myFun(a,  b, ...rest) {
  console.log("a", a)
  console.log("b", b)
  console.log("rest", rest)
}

myFun("apple", "apple", "cat", "dog", "egg", "fox")

// Console Output:
// a, apple
// b, apple
// rest, ["cat", "dog", "egg", "fox"]

4. Arrow functions

Arrow function is the substitute of traditional function. But is is very useful for code simplicity.

// REGULAR FUNCTION
const funcName= function() {
  return +new Date;
}

// ARROW FUNCTION
const funcName= () => {
  return +new Date;
}

For very simple arrow functions like this that just return the value of a JavaScript expression, the return keyword and the pair of curly braces({}) surrounding the function body can be omitted. Hence, the arrow function can be rewritten like this:

const funcName= () => +new Date;

5. Block Scope:

Block scope is a specific area between a curly bracket {}. Its may function or conditional area.

if (true) {
  var x = 2;      // its a block
  let y = 2;
}
-------------------------
const funcName= function() {
  return +new Date; // its another block 
}

In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

function city(){
    if(true){
        let city1= 'Cumilla';   
        const city2 = 'Dhaka'; 
        console.log(city1); // output : Cumilla
        console.log(city2); // output : Dhaka
    }

console.log(city1); // Get error
console.log(city2); // hare you get an error because it is outside of the if block.
city();

6. Template String:

Template string is a useful invention of ES6. Before ES6 to add a siring and number uses plus (+) sign. In ES6 template we use ` ` template sign . Hare is an example:

Expected output : HI I am syum,phone 016000000 Thanks .

7. Multiline String:

The more interesting subject is in template string you need not to use br tag for line break. Just place an enter where you need line break .

8. MAP

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

9. Immediately invoked function expressions (IIFEs)

Another useful application of functions in Es6 is IIFEs, It runs as soon as the function defined.

(function(a, b) {
  // ...function body here
})(arg1, arg2);

10. Destructuring:

Destructuring allows binding using pattern matching, with support for matching arrays and objects.

Lets Discuss more about javascript

Var Declarations and Hoisting

In JavaScript, a variable can be declared after it has been used or a variable can be used before it has been declared.

x = 5; // Assign 5 to x
var x;
 or 
var x; // Declare x then
x = 5; // Assign 5 to x

To understand this, you have to understand the term “hoisting”. Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

var x = 5; // Initialize x
var y = 7; // Initialize y
console.log(x,y) //output 5, 7
var p= 5; // Initialize p
console.log(x,y) //output 5 , q is undefined
var q= 7; // Initialize q

Because of hoisting, q has been declared before it is used, but because initializations are not hoisted, the value of q is undefined. To avoid this bugs, we can declare all variables at the beginning of every scope.