노드 공부 기록(3) - 자바스크립트 문법, 구조분해 할당, 프로미스, async / await

2015년에 자바스크립트 문법에 매우 큰 변화가 있었음. => ES2015(ES6)

 

🔍const, let

• 보통 var로 변수를 선언하는 방법부터 배우지만 이제부터 var은 const, let이 대체함.

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

if(true){
	const y = 3;
}
console.log(y);	//error

• x는 정상적으로 출력, y는 에러가 발생하는 이유는 var은 함수 스코프를 가지므로 if문의 블록에 영향을 받지 않는다.
• 하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다. (블록의 범위는 if, while, for 등에서 볼 수 있는 중괄호임.)
• const는 한 번 값을 할당하면 다른 값을 할당할 수 없고 다른 값을 할당 시 에러가 발생함. -> const로 선언한 변수를 상수라고 부르기도 한다.

 

🔍템플릿 문자열

• 큰 따옴표, 작은 따옴표로 감싸는 기존 문자열과 다르게 백틱(`)으로 감싸는 방식.
• ${변수} 형식으로 변수를 더하기 기호 없이 문자열에 넣을 수 있음.

//기존
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을 붙이지 않아도 객체의 메서드에 함수를 연결할 수 있음.
• 예전 문법에서는 ES6라는 속성명을 만들기 위해 객체 리터럴(oldObject)바깥에서 [es+6]을 해야 했지만 ES2015 문법에서는 객체 리터럴 안에 동적 속성 선언이 가능함.

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

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

 

🔍화살표 함수

• add 1~4, not1~2는 같은 기능을 하는 함수임.
• 화살표 함수에서는 function 선언 대신 => 기호로 함수를 선언함.

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

const add2 = (x,y)=>{
    return x+y;
};

const add3 = (x,y) => x+y;

const  add4 = (x,y) => (x+y);

function not1(x){
    return!x;
}

const not2 = x => !x;

 

🔍구조분해 할당

• 구조분해 할당을 사용 시 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

//기존
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;

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

 

🔍프로미스

• 프로미스를 쉽게 설명하자면 실행은 바로 하되 결과값은 나중에 받는 객체라고 할 수 있다.
• 결과값은 실행 완료 후 then이나 catch메서드를 통해 받음.

• 프로미스 여러 개를 한꺼번에 실행 시 Promise.all 활용.

 

🔍async / await

• 노드 7.6 버전부터, ES2017에서 추가됨.
• 노드처럼 비동기 위주로 프로그래밍이 필요한 경우 도움이 많이 되는 기능임.
• 일반 함수 대신 async funcion으로 교체 후 프로미스 앞에 await을 붙여줌.