ES6
What is ES6?
- ECMAScript 6 is called ES6.
What is ECMAScript?
- It is a standard syntax of Javascript.
- Many modern syntax as been added to Javascript After ECMAScript version 6.
Why do we have to use ES6?
- Modern syntax helps us with productivity improvement.
- Node.js is supporting recent ECMAScript.
- It is important to learn useful modern syntax and utilize the syntax in an appropriate way.
Node.js and ES6 Relationship
- Not all syntax of ES6 are not supported in Node.js.
let, const
ES5
var TITLE = "NODE.js";
var director = "elice";
director = "rabbit";
TITLE = "ES6";
ES6
const TITLE = "NODE.JS";
let director = "elice";
director = "rabbit";
TITLE = "ES6"
Templete String
ES5
var name = "elice";
var age = 5;
var hi = `My name is `
+ name
+ '.\n I\'m'
+ age
+ 'years old.';
ES6
const name = "elice";
const age = 5;
const hi =
`My name is ${name}.
I'm ${age} years old`;
Arrow Function
ES5
function doSomething(param) {
console.log("do something");
}
setTimeout(function(param) {
console.log("no name function");
}, 0)
function doSomething () {
console.log("do other");
}
ES6
const doSomething = (param) => {
console.log("do Something");
}
setTimeout((param)=> {
console.log("no name function");
},0);
doSomething = () => {
console.log("do other");
}
Class
ES5
function Model(name, age){
this.name = name;
this.age = age;
}
Model.prototype.getInfo = function() {
console.log(this.name, this.age);
}
var model = new Model("elice", 5);
model.getInfo();
ES6
class Model {
constructor (name, age){
this.name = name;
this.age = age;
}
getInfo() {
console.log(this.name, this.age)
}
}
const model = new Model("elice", 5);
model.getInfo();
Destructing
ES5
var obj = {name:"elice", age:5};
var name = obj.name;
var age = obj.age;
var arr = ["some","values"];
var first = arr[0];
var second = arr[1];
ES6
const obj = {name:"elice", age:5};
const {name, age} = obj;
const {name : n1, age : a1} = obj;
const arr = ["some", "values"];
const [first, second] = arr;
Asynchronous Coding
What is Asynchronous Coding?
- It is a way to implement asynchronous even driven operations.
- There are 3 ways to implement Asynchronous operations in Node.js
What is 3 ways for Asynchronous coding in Node.js?
Callback
db.getUsers((err, users)=>{
console.log(users);
});
db.getUsers((err, users) =>{
if(err) {...return;}
async1(users, (r1) =>{
async2(r1, (r2) =>{
async3(r2, (r3) =>{
...
});
});
});
})
- Traditional way for event driven implementation
Promise
db.getUsersPromise().then((users) =>{
returnpromise1(users);
})
.then(r1 =>promise2(r1))
.catch(...);
function getUsersPromise(params) {
return newPromise((resolve, reject)=>{
getUsers(params, (err, users) =>{
if (err) {
reject(err);return;
}
resolve(users)
;})
;})
;}
promise1().then(r1 => {
return promise2(r1)
.then(r2 =>promise3(r1, r2))
});
- Asynchronous coding that makes up for the callback's disadvantages.
- We can omit return when There is only one line inside of a brace.
- When error occurs, promise executes .catch.
- When promise3 function needs results from 2 other functions, promise hell might also be happened.
Aync-Await
async function doSomething() =>{
cosntr1 = awaitpromise1();
constr2 = awaitpromise2(r1);
constr3 = awaitpromise3(r1, r2);
...
returnr3;
});
doSomething().then(r3 =>{
console.log(r3)
});
- It is another syntax of promise
- We can get result from promise function by using await in async function.
- Until promise function using await is completed, interpreter doesn't go to next line.
- return of async function is promise function.
- Asynchronous coding that makes up for the promise's disadvantages.
Promise and Async function error handling
function doSomething(msg) {
return promise1()
.then(r => {
console.log(r)
})
.catch(e => {
console.log(e)
});
}
async function doSomething(msg){
try {
const r = await promise1();
console.log(r);
} catch(e) {
console.error(e);
}
}
Promise parellel execution
async function sync() {
constr1 = await promise1();
constr2 = await promise2();
console.log(r1, r2);
}
---
async function parallel() {
const[r1, r2] = await Promise.all([promise1(),promise2(),]);
console.log(r1, r2);
};
In Concolusion
- We prefer async-await. It's because this syntax has a good readability
- But legacy code could be in promise or callback. So we need to be able to implement all of them in an appropriate way.