[Node.js] ES2015(ES6) 이상의 자바스크립트 문법

• 변수를 선언하는 var를 const와 let으로 대체
• 변수 선언 시에는 const를 사용하고 다른 값을 대입해야 하는 상황이 생겼을 때 let을 사용

var	const	let
함수 스코프 : 0if문의 블록과 관계 없이 접근 가능	블록 스코프 : 블록 밖에서 변수에 접근 불가
	초기화 시 값을 대입해야 한다(필수)	초기화 시 값을 대입하지 않아도 된다(선택)
	한 번 값을 대입하면 다른 값을 대입할 수 없다	다른 값을 대입할 수 있다

if(true){
    var x = 1;
}
console.log(x);

if(true){
    const y = 2;
}
console.log(y); //Uncaught ReferenceError: y is not defined

 

• 문자열을 만들 때 백틱(`)으로 감쌀 수 있고 문자열 안에 변수를 넣을 수 있다.

//기존 ES5 문법
var num1 = 1;
var num2 = 2;
var result = 3;
var string1 = num1 + ' 더하기 ' + num2 + '는 \'' + result + '\'';
console.log(string1); //1 더하기 2는 '3'

//ES2015 이상 문법
const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 ${result2}`;
console.log(string2) //1 더하기 2는 3

 

• 객체의 메소드에 함수를 연결할 때 콜롬(:)과 function을 붙이지 않아도 된다.
• 속성명과 변수명이 겹치는 경우에는 한 번만 쓸 수 있다.
• 객체 리터럴 안에서 객체를 선언할 수 있다.

var sayNode = function(){
    console.log('Node');
};
var es = 'ES';
var oldObject = {
	sayJS: function(){
    	console.log('JS');
    },
    sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';

oldObject.sayNode(); //Node
oldObject.sayJS(); //JS
console.log(oldObject.ES6); //Fantastic

//ES2015
const newObject = {
	sayJS(){
    	console.log('JS');
    },
    sayNode,
    [es + 6]: 'Fantastic',
};

newObject.sayNode(); //Node
newObject.sayJS(); //JS
console.log(newObject.ES6); //Fantastic

 

• 화살표 함수가 추가되었다.
• 화살표 함수는 function 선언 대신 => 기호로 함수를 선언하기 때문에 변수에 대입하면 재사용할 수 있다.
• return 문을 줄일 수 있다.

function add1(x, y){
    return x + y;
}

function not1(x) {
    return !x;
}

//추가된 화살표 함수
const add2 = (x, y) => {
    return x + y;
}
const add3 = (x, y) => x + y;
const add4 = (x, y) => (x + y);
const not2 = x => !x;

 

• 화살표 함수를 사용하여 상위 스코프의 this를 그대로 물려받는다.

var relationship1 = {
    name: 'zero',
    friends: ['nero', 'hero', 'xero'],
    logFriends: function(){
    	var that = this; //relationship1을 가리키는 this
        this.friends.forEach(function(friend){
            console.log(that.name, friend);
        });
    },
};
relationship1.logFriends();
/*
zero nero
zero hero
zero xero
*/

const relationship2 = {
    name: 'zero',
    friends: ['nero', 'hero', 'xero'],
    logFriends(){
    	this.friends.forEach(friend => {
            console.log(this.name, friend);
        });
    },
};

relationship2.logFriends();
/*
zero nero
zero hero
zero xero
*/

 

• 비구조화 할당 문법 : 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

var candyMachine = {
    status: {
    	name: 'node',
        count: 5
    },
    getCandy: function(){
    	this.status.count--;
        return this.status.count;
    }
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;

const candyMachine2 = {
    status2: {
    	name: 'node',
        count2: 5
    },
    getCandy2(){
    	this.status.count--;
        return this.status.count;
    }
};
const { getCandy2, status2: { count2 } } = candyMachine2;

var array = ['node.js', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

const array2 = ['node.js', {}, 10, true];
const [node2, obj2, , bool2] = array2;

 

• 자바스크립트와 노드의 API들이 콜백 대신 프로미스 기반으로 재구성된다.
• 프로미스의 규칙은 아래와 같다.

const condition = true;
//프로미스 객체 생성, resolve, reject를 파라미터로 갖는 콜백 함수 추가
const promise = new Promise((resolve, reject) => {
    if(condition){
    	resolve('성공');
    } else {
    	reject('실패');
    }
});

//만든 promise 변수에 then과 catch 메서드를 붙인다
//프로미스 내부에서 resolve가 호출되면 then이 실행, reject가 호출되면 catch가 실행된다
promise
    .then((message) => {
    	console.log(message); //성공한 경우
    })
    .catch((error) => {
    	console.error(error); //실패한 경우
    });

//then이나 catch에서 다시 다른 then이나 catch를 붙일 수 있다
promise
    .then((message) => {
    	return new Promise((resolve, reject) => {
        	resolve(message);
        });
    })
    .then((message2) => {
    	console.log(message2);
        return new Promise((resolve, reject) => {
        	resolve(message2);
        });
    })
    .then((message3) => {
    	console.log(message3);
    })
    .catch((error) => {
    	console.error(error);
    });

• 프로미스 방식을 지원하는 메서드가 있다면 콜백 패턴을 프로미스 방식으로 바꿀 수 있다.

//콜백 함수가 세 번 중첩
//콜백 함수가 나올 때마다 코드의 깊이가 깊어지고, 각 콜백마다 에러도 따로 처리해야함
function findAndSaveUser(Users){
    Users.findOne({}, (err, user) => { //첫 번째 콜백
    	if(err){
        	return console.error(err);
        }
        user.name = 'zero';
        user.save((err) => { //두 번째 콜백
        	if(err){
            	return console.error(err);
            }
            Users.findOne({ gender: 'm' }, (err, user) => {
            	//생략
            })
        });
    });
}

//프로미스 방식으로 바꿈
function findAndSaveUser(Users){
    Users.findOne({})
    	.then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender: 'm' });
        })
        .then((user) => {
        	//생략
        })
        .catch(err => {
            console.error(err);
        });
}

• 콜백을 여러 번 중첩해서 사용해야했던 기존의 방식에 비해 프로미스 방식은 Promise.all를 사용해 여러 개를 한 번에 실행할 수 있다.

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
    .then((result) => {
    	console.log(result); //['성공', '성공2']
    })
    .catch((error) => {
    	console.error(error);
    })

 

• 노드 7.6 버전 이상, 자바스크립트 ES2017 이상에서 사용할 수 있는 async/await 문법
• 노드와 같은 비동기 프로그래밍에 도움이 된다.
• 코드의 깊이가 깊진 않지만 여전히 긴 프로미스 방식의 코드를 더 줄여준다.

function findAndSaveUser(Users){
    Users.findOne({})
    	.then((user) => {
            user.name = 'zero';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({ gender: 'm' });
        })
        .then((user) => {
            //생략
        })
        .catch(err => {
            console.error(err);
        });
}

//위의 프로미스 방식에 async/await 문법을 적용
const findAndSaveIser = async(Users) => {
    try {
    	let user = await Users.findOne({});
    	user.name = 'zero';
    	user = await user.save();
    	user = await Users.findOne({ gender: 'm' });
    	//생략
    } catch (error) {
    	console.error(error);
    }
};

• for문과 async/await을 같이 써서 Promise.all을 대체할 수 있다. (노드 10 버전 이상, 자바스크립트 ES2018 이상)

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async() => {
    for await(promise of [promise1, promise2]){ //Promise.all 대신 for await of 문 사용
    	console.log(promise);
    }
})();