ES6

const, let

• 보통 자바스크립트를 배울 때 var 변수를 선언하는 방법을 배운다. 하지만 var는 이제 const와 let으로 대체된다.

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

if(true){
    const y = 1;
}
console.log(y) //Refference error: y is not defined

• var는 함수 스코프를 가지므로 if문의 블록과 관계없이 접근이 가능하다.

• const와 let은 블록 스코프를 가지므로 블록 밖에서는 접근할 수 없다.

  • 함수 스코프 대신 블록 스코프를 사용하면서 호이스팅 같은 문제도 해결되고 코드 관리도 수월해진다
  • 호이스팅? 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이는 변수 범위가 전역 범위 인지 함수 범위인지에 따라 다르게 수행될 수 있다 -> 혼란을 가져올 수 있다.

• const는 한 번 값을 할당하면 다른 값 할당이 불가능하다. 또한 초기화할 때 할당을 같이 해주어야 한다.

  • const로 선언한 변수는 상수이다.

• 변수 선언 시에는 기본적으로 const를 사용하고, 다른 값을 할당해야 하는 상황이 생겼을 때 let을 사용하자

 

템플릿 문자열

• ES2015 문법에 새로 생겼다.
• 기존 문자열과 다르게 백틱(`)으로 감싼다. 새로운 점은 문자열 안에 변수를 넣을 수 있는 것이다.

var num1 = 1;
var num2 = 2;
var string1 = '숫자 두 개는' + num1 + '과' + num2 + '이다.'

// 가독성이 좋지 않다. escape 구문이 들어간다면 더 지저분해진다.

const num1 = 1;
const num2 = 2;
const string1 = `숫자 두 개는 ${num1}과 ${num2}이다.`;

//위 코드보다 훨씬 깔끔해진다. ${변수} 형식으로 문자열에 넣을 수 있다.

 

객체 리터럴

<기존>

var sayNode = function(){
    console.log("Node");
};
var es = 'ES';
var oldObject = {
    sayJs : function(){
        console.log("JS");
    },
    sayNode : sayNode,
};

oldObject[es + 6] = 'Good';
oldObject.sayNode(); // Node
oldObject.sayJS(); // JS
console.log(oldObject.ES6) // Good

<변경>

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

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

• oldObject와 newObject를 비교해보면, 콜론과 function을 더는 붙이지 않아도 된다.
• 또한 속성명과 변수명이 동일한 경우 한 번만 써도 된다.
  • {name : name, age: age} >> {name, age}

 

 

본 내용은 Node.js 교과서 (길벗 출판사) 개정 2판의 내용을 기반으로 작성되었습니다.