Ten Tricks Of ES6 Beginner

1. Ten Tricks Of ES6 Beginner

1. What Is Var

var স্টেটমেন্টটি একটি ভেরিয়েবল ঘোষণা করে। এটি তথ্য সংরক্ষণের জন্য ধারক হয়। ভার স্টেটটি একটি ভেরিবলের অভিজ্ঞতা আতি তথ্য স্থানের জন্য চালক হয়।
sample:

var varname1 [= value1] [, varname2 [= value2] … [, varnameN [= valueN]]];

2. Block-Level Declarations

The block statement allows apnake to use multiple statements where JavaScript only expects one statement.

Block-level declarations are declarations that declare variables that are far block scope beyond a given block scope, also known as logical scope.
sample:

var x = 1;
let y = 1;

if (true) {
var x = 2;
let y = 2;
}

console.log(x);
// expected output: 2

console.log(y);
// expected output: 1

3. Arrow Functions

In ES6 we can write funtion in sorter way that is named arrow function . It is also more easier to read and write rather than normal function calling. For example:

//have no parameter
const give5 = () => 5;
//have single parameter
const doubleIt = num => num * 2;
// have multiple parameter
const add = (x, y) => x + y;
console.log(add(20, 10)); // 30

4. The Spread Operator

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

Here are some of the code example:

//In function
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(…args);
//In array
let parts = [‘shoulders’, ‘knees’];
let lyrics = [‘head’, …parts, ‘and’, ‘toes’];
// [“head”, “shoulders”, “knees”, “and”, “toes”]

5. Working with Unnamed Parameters

In JavaScript earlier version, there was no possibility to use unnamed parameter into the function, but ES6 introduces the rest parameter to make it easier to work with unnamed parameters.
The rest parameter allows any number of arguments as an array.

function add(…args) {
// args is the name for the array
return args.reduce((accumulator, current) => accumulator + current, 0);
}console.log(add(3)); // 3
console.log(add(3, 3)); // 6
console.log(add(5, 2, 3)); // 10

6. Default function parameters

In ES5 and earliar version, we have to set functions all parameter value formally. If we somehow forget to set any parameter value, the function immediately stopped and showing error. This problem solved in ES6 version. Here, we can set a default value in a parameter. In this case, if we not set on that parameter value, the function execute the default value as its parameter. Example:

function add(x, y = 5) {
//here, 0 is default parameter value
return x+ y;
}
console.log(add(10, 7)); // 17
console.log(add(20)); // 25

7. Global Block Bindings

We know, let and const are different from var. When var is used in the global scope, a new property is added to the global object (window in browsers). That means you can overwrite an existing global using var, such as:

// in a browser
var greeting = ‘Hello, Bangladesh’;
console.log(window.greeting); // Hello, Bangladeshvar person = ‘Hello there’;
console.log(window.person); // Hello there

If you use let or const in the global scope, a new binding is created in the global scope but no property is added to the global object. So, here also you can not overwrite a global variable using let or const. Example:

// in a browser
var greeting = ‘Hello, Bangladesh’;
console.log(window.greeting === greeting); // falsevar person = ‘Hello there’;
console.log(window.person); // Hello there
console.log(person in window); // false

8. Block Binding in Loops

In JavaScript, most often case developers want block level scoping of variables is within for loops. For for this we have to use let not var, cause var is being hoisted. Follow the two examples below:

for (var i=0; i < 10; i++) {
process(items[i]);
}

// i is still accessible here
console.log(i);

Here, outside the loop, i is accessible because we use var

for (let i=0; i < 10; i++) {
process(items[i]);
}

// i is not accessible here — throws an error
console.log(i);

Here, outside the loop, i is not accessible because we use let. So, it will throw an error.

9. Block Bindings

In JavaScript, variable declare is an important factor. In variable declaration, it depends on which methods you will declare variable and where it will be. ES6 provides a new way to declare, so that you can more easily control the scope of variables.

10. Var Declarations and Hoisting

Variable declaration will applicable if the variable is hoisted on the top of the function or it will be treated global scope if they are declared outside a function. Example-

function getCity(condition) {
var value;
if (condition) {
value = “Dhaka”;
return value;
} else {
// value doesn’t exist here
return null;
}
// value doesn’t exist here
}

We can see, the variable is declared to the top of the function. For this, the value in the variable can be access from else condition but the access is undefined value because its value is not initialized in the block in the else , its initialized only in If clause.

11. Const Declarations

When we declared a variable with const ,we can’t change this value that means this value is never been changed as it is constant value.

const maxItems = 5;
maxItems = 6; // throws error