What is ES6 and Learn JavaScript 6 Concepts
Javascript Concepts for interviews
- Synonyms: ECMAScript 6, ECMAScript 2015, JavaScript 6.
- JavaScript is a subset of ECMAScript.
- Previously javascript. Netscape approach to ECMA and then after it is known as ECMAscript.
- ECMA does language standardization.
- However, ES6 tackles a lot of the limitations of the core language, making it easier for devs to code.
Now let’s understand ES6 concepts.
1.) Template strings
- Template literals :- string literals with support of multi lines and interpolation
- Tagged template literals :- function calls with template literals.
Template literals — Using backtick. Ex :- `…`. And Expression with $ sign and curly braces ${…}.
const name = 'kshitij';
console.log(`Hello ${name},
Good morning`);// outputHello kshitij,
Good morning
Tagged Template Literals
var a = 5;
var b = 10;
function tagFun(strings,...values){
console.log(strings[0]); // "Hello ""
console.log(strings[1]); // " world"
console.log(strings[2]); // ""
console.log(values[0]); // 15
console.log(values[1]); // 50
}
tagFun `Hello ${a+b} world ${a*b}`;2.) Let, Const, Var
Difference between Let, Const, Var
- Var
The scope is global when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window.
var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.
var tester = "hey hi";
function newFunction() {
var hello = "hello";
}
console.log(hello); // error: hello is not definedHoisting of var
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:
console.log (greeter);
var greeter = "say hello"it is interpreted as this:
var greeter;
console.log(greeter); // greeter is undefined
greeter = "say hello"- Let
A block is a chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block.
let greeting = "say Hi";
let times = 4;
if (times > 3) {
let hello = "say Hello instead";
console.log(hello);// "say Hello instead"
}
console.log(hello) // hello is not definedHoisting of let
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.
- Const
const declarations are block scoped
const cannot be updated or re-declared
const greeting = "say Hi";
const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared3.) For loop
New ES6 loop that replaces both for-in and forEach() with supporting new iteration protocol.//over array
let values = [10, 20, 30];
for(let value of values){
console.log(value);
}
//over string
let color = 'red';
for(let c of color){
console.log(c);
}
4.) Default Parameters
Same as PHP or other language. Default values to be use if no value is passed. It can be function as well.function getText(){
return "The answer is :- ";
}
function multiply(a, b = 1, c = getText()){
return c + (a * b);
}
console.log(multiply(4)); // The answer is :- 4
5.) Arrow Functions
Benefits:
- Shorter syntax => compared to function
- this picked from lexical scope.
- They are always anonymous.
- () => “Hey”; // no argument
- x => x * x; // one argument
- (x, y) => x + y; //multiple argument
6.)Rest Operator (Parameters)
Rest operator “…” in last parameter of function means it will receive all the remaining parameters.
function student(name, ...marks){
console.log(name); // mynameconsole.log(arguments); // ['myname', 10,20,30,40,50] and other properties
console.log(marks); // [10, 20, 30, 40, 50]var total = marks.reduce(function(a,b)){
return a+b;
} // Array.reduce()
console.log(total); // 150}
student('myname', 10,20,30,40,50);
7.) Spread Operator
Allows expression to be expanded where multiple argument (for functions), multiple elements (for array) or multiple variables (for destructing) are expected.
function myFunction(x, y, z){
console.log(x);
console.log(y);
console.log(z);
}
var arr = [0, 1, 2];
myfunction(arr); // [0, 1, 2] /n // undefined /n // undefined
myfunction(...arr);// 0 /n // 1 /n // 2Both operator looks same “…” but both are opposite to each other.
Spread element expands an array into its element where rest element collects multiple element and “condenses” into single element.
Spread operator is used for destructing arrays and objects.
8.) Destructing
Convenient way to extract data stored in array or objects.
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]Object Destructing
const obj = {total : 20, name : "kshitij"};
const {total, name} = obj;
console.log(total); // 20
console.log(name); // kshitij
//using different name then object property
const {total: tot, name: naam} = obj;
console.log(tot); // 20
console.log(naam); // kshitij9.)Promises
It is used for asynchronous computation. It represents value which may be available now, or in future or never. So it can be pending, fulfilled or rejected.
var promise1 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('foo');
}, 300);
});
promise1.then(function(value) {
console.log(value);
// expected output: "foo"
});
console.log(promise1);
// expected output: [object Promise]10.) Lexical Scope
function init() {
var name = 'Mozilla'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();11.) Closure
The closure has three scope chains:
- it has access to its own scope — variables defined between its curly brackets
- it has access to the outer function’s variables
- it has access to the global variables.
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
