<React 파헤치기-03> ES6주요문법 - 1.템플릿 문자열과 전개 연산자

1. 템플릿 문자열

기존 자바스크립트 문자열 사용 방법

// <1>
var string1 = "감자";
var string2 = "고구마";
var winterSnack = string1 + ' ' + string2;

// <2>
var dessert = { cake : '얼그레이', price : '6000원'};
var totalPrice = '디저트' + dessert.name '의 가격은' + dessert.price + '입니다.';

// <3>
var multiLine = '문자열1\n문자열2';

// <4>
var value1 = 10;
var value2 = 5;
var boolValue = false;
var operator1 = '곱셈값은 ' + (value1*value2) + '입니다';
var operator2 = 'boolean값은 ' + (boolValue? '참' : '거짓') + '입니다';

1 - 병합 연산자(+)를 사용하여 두 문자열을 연결하고 있다.

2 - 문자열과 변수를 연결할 때도 병합 연산자를 사용한다.

3 - 줄바꿈을 할 때는 escape sequence(\n)를 문자열에 포함시킨다.

4 - 연산 결과를 괄호로 묶어 연산 구문이 먼저 실행되도록 한다.

 

 

ES6에서의 문자열 사용 방법

병합 연산자 '+'를 사용했을 때 코드가 복잡해 보인다. ES6는 이를 보완하기위해 템플릿 문자열을 도입했다.

 

템플릿 문자열

템플릿 문자열은 작은따옴표' ' 대신 백틱` `을 사용한다(백틱은 키보드 중 물결'~' 아래에 위치한다).

또한 템플릿 문자열에 특수기호 '$'를 사용하여 변수 또는 식을 포함할 수도 있다.

아래 코드는 위 예시에 대하여 템플릿 문자열을 사용한 것이다.

// <1>
var string1 = "감자";
var string2 = "고구마";
var winterSnack = `{$string1} {$string2}`;

// <2>
var dessert = { cake : '얼그레이', price : '6000원'};
var totalPrice = `디저트 {$dessert.name}의 가격은 {$dessert.price}입니다.`;

// <3>
var multiLine = '문자열1
문자열2';

// <4>
var value1 = 10;
var value2 = 5;
var boolValue = false; 
var operator1 = `곱셈값은 ${value1*value2}입니다.`;
var operator2 = `boolean값은 ${boolValue? '참' : '거짓'}입니다.`;

 

1, 2 - $ 기호를 사용하여 템플릿 문자열에 변수를 포함시켰다.

3 - 템플릿 문자열에서는 enter를 통한 줄바꿈을 허용하여 escape sequence를 사용하지 않아도 된다.

4 - $ 기호를 사용하여 템플릿 문자열에 연산을 포함시켰다.

 

 

2. 전개 연산자

전개 연산자

전개 연산자는 나열형 자료를 추출하거나 연결할 때 사용한다.

사용 방법은 배열이나 객체, 변수명 앞에 마침표 3개 '...'를 연결한다. 

다만, 배열, 객체, 함수 인자 표현식( [], {}, ()) 안에서만 사용해야 한다.

 

ES6의 배열 전개 연산자 사용 방법

ES6 이전 문법에서 배열의 일부 요소만 잘라내거나 연결하려면 배열의 인덱스와 함께 배열 내장함수(concat, slice..etc)를 사용해야 했다. 그러나 이는 배열의 내장함수를 일일이 기억해야하고 코드가 길어 번거롭다.

 

// <1>
var array1 = ['one', 'two'];
var array2 = ['three', 'four'];
const combinedArray = [...array1, ...array2];

// <2>
const [first, second, thrird = 'empty', ...others] = array1;
// first = 'one', second = 'two', thrird - 'empty', others = []

// <3>
function func(...args) { var [first ... others] = args; }

1 - 전개 연산자를 사용하여 두 배열을 하나로 합쳤다.

2 - first와 second :  array1의 각 위치에 있는 요소를 추출하였다.

      third : 기본값과 함께 배열 요소를 추출했다.

      others : first, second, third에서 추출하고 array1에 남은 요소를 추출했다.

3 - 함수 매개변수 배열을 args 변수에 할당했다.

 

 

ES6의 객체의 전개 연산자 사용 방법

객체 또한 배열과 마찬가지로 전개 연산자를 사용할 수 있다.

var objectA = { one : 1, two : 2, other : 0 };
var objectB = { three : 3, four : 4, other : -1 };

// <1>
var combinedObject = {
	...objectA,
    ...objectB,
}; 
// combinedObject = { one : 1, two : 2, three : 3, four : 4, other : -1}

// <2>
var combinedObject = {
	...objectB,
    ...objectA,
};
// combinedObject = { one : 1, two : 2, three : 3, four : 4, other : 0}

// <3>
var { other, ...others } = combinedObject;
// other = 0
// others = { one : 1, two : 2, three : 3, four : 4 }

1, 2 - 두 객체를 병합할 때 중복된 키값(other)들은 마지막에 사용한 객체의 값으로 덮어쓴다.

3 - 객체에서 특정값을 추출할 때는 추출하려는 키 이름(other)를 작성하고, 해당값을 제외한 나머지 값들은 전개 연산자로 선언된 변수(others)에 할당한다.