[EcmaScript6] 템플릿 문자열, 객체 리터럴, 디스트럭쳐링

 

1. 템플릿 문자열(template string)

​

- 우리가 자바스크립트에서 문자열 여러 개를 합칠 때는 다음과 같은 방식을 사용한다.

var a = 2019;

var b = 8;

var c = { d : '8', };

var string = '오늘은'+a+'년'+b+'월'+c.d+'일'+'입니다.';

- 따옴표가 많고, + 도 많은데 띄워쓰기도 계속해서 신경써야 하기에 매우 불편하다.

- 템플릿 문자열은 다음과 같이 사용한다.

let a = 2019;

let b = 8;

let c = { d:'8', };

const string = `오늘은 ${a}년 ${b}월 ${c.d}일 입니다.`;

- `(백틱)으로 감싸주고 변수는 ${}에 넣어주는 형태로 사용한다.

- 이렇게 된다면 공백과 따옴표가 그대로 출력되어 간편하게 사용할 수 있다.

---

​

2. 객체 리터럴 (Enhanced Object Literal)

​

- ES5 에서는 객체와 프로퍼티를 표현할때 다음과 같이 표현해왔다.

var hello = 1;

var hello = { a:hello, b:ES5, };

- 프로퍼티 이름과 프로퍼티 값으로 구성되어 있었다. 프로퍼티 값은 변수에 할당된 값일 수도 있었다.

​

- ES6 에서 부터는 객체의 메서드에 함수를 연결할 때 다음과 같이 더는 콜론(:)과 function 키워드를 붙이지 않아도 된다.

const newObject = { Hello() { console.log('helloJS'); } }

- 또한, hello:hello 처럼 프로퍼티 명과 프로퍼티 값의 이름이 겹치는 경우(변수생성경우) 한 번만 쓸 수 있게 된다.

const hello = 'hi';

const newObject = { hello, //hello:hello };

- 마지막으로, 객체의 속성명을 동적으로 생성이 가능하다.

- 예전에는 객체 리터럴 바깥에서 선언해야 했었다.

- 이제는 안에서도 가능하다. 다음과 같이 사용한다.

​

const a = 'hello';

const newObject = { [a + friends] : 'hi', };

---

3. 디스트럭쳐링 (Destructuring)

​

- 비구조화 할당이란 말과 같은 말이다.

- 배열이나 객체의 속성을 추출하여 변수에 담을 수 있게 하는 JS 표현식이다.

객체와 배열로부터 속성이다 요소를 쉽게 꺼낼 수 있다.

​

- 배열 디스트럭쳐링은 다음과 같이 사용한다.

let sports = ['soccer', 'baseball', 'basketball'];

let [one,two] = sports;

console.log(one); //soccer

console.log(two); //baseball

- 이렇게 한 경우 결론적으로,

let one = soccer;

let two = baseball;

을 한 형태와 같게 되는 것이다.

​

- 객체 디스트럭쳐링은 다음과 같이 사용한다.

let obj ={ name : '민준', age : 21, country : 'korea', };

let { name, age, city } = obj;

console.log(name); // '민준'

console.log(age); // 21

console.log(city); // undefined. (obj안에 존재하지 않기 때문이다.)

let { name : dogname, country : dogcountry } = obj; console.log(dogname); //'민준'

console.log(dogcountry); //'korea'

- let { name, age, city } = obj; 부분은 객체 속성의 key를 변수명으로 선언하고, value를 값으로 할당하였다고 보면 된다.

- let { name : dogname, country : dogcountry } = obj; 부분은 객체 속성의 key 값에 새로운 변수명을 선언하고 value 값으로 할당하였다.