2. Javascript ES2015 (2) - 템플릿 문자열, 객체 리터럴

 

 

 

 

 

 

○ 템플릿 문자열

 

ES2015 문법에 새로 생긴 문자열 표현에 대해서도 살펴보겠습니다. 요약하면, 이 새로운 문자열은 (큰 or 작은) 따옴표가 아닌 백틱(` , Tab 상단 키)을 사용한다는 점입니다. 이 새로운 문자열 사용 방식이 왜 필요한지에 대해서도 살펴보겠습니다. 

 

우선, 우리가 아래 변수들을 이용해서 결과적으로 1 더하기 2는 '3' 이라는 텍스트를 출력한다고 가정해 보겠습니다. 

 

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

// 1 더하기 2 는 '3'

 

 

잘 알고 있는 방식이지만, 생각보다 string1 변수를 선언하기가 복잡합니다. 특히 작은따옴표(' ') 사용을 위해서 작성하게 되는 이스케이프(escape) 문자열 때문에 더욱 지저분한 코드가 되었습니다. 

 

이제 백틱을 사용해서 동일한 내용을 출력해 보겠습니다. 

 

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
console.log(string2);

// 1 더하기 2는 '3'

 

훨씬 코드가 단순해졌습니다. 일단, 변수 사이의 [+]가 없어진 것만으로도 꽤 심플해졌고 ${ }를 사용해 간단하게 변수를 적용할 수 있습니다. 특히, 스트링 전체를 백틱으로 감싸기 때문에 따옴표 사용도 간단해졌습니다. 

 

 

 

---

 

 

 

○ 객체 리터럴

 

아래 코드와 같이, oldObject라는 객체에 동적으로 프로퍼티를 추가해 보겠습니다. 

 

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);

/* 출력
Node
JS
Fantastic
*/

 

 

 

 

 

위 코드는 신규 기능들을 적용해 아래와 같이 쓸 수 있습니다. 

 

const sayNode = function(){
    console.log('Node');
};

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

newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6);

/* 출력
Node
JS
Fantastic
*/

 

 

바뀐 부분을 짚어봅시다. sayJS는 모두 특정 개체의 메서드(객체 프로퍼티로서 선언된 함수)입니다. 이때 콜론(:)과 function을 사용하지 않아도 됩니다. 

 

또한, sayNode의 경우 프로퍼티 명과 변수명이 동일합니다. 이럴 때는 중복해서 사용하지 않아도 됩니다. 예를 들어 {name: name, age: age}와 같은 프로퍼티 값들이 있다면 이는 ES2015에서는 {name, age}로 써도 무관한 것입니다. 

 

마지막으로 객체의 프로퍼티 명은 동적으로도 생성이 가능합니다. oldObject[es+6]는 객체 리터럴의 블록 외부에서 선언하였습니다. 하지만 ES2015부터는 객체 리터럴 내부에서 동적 속성을 선언해도 됩니다.