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

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

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

3. 디스트럭쳐링 (Destructuring)

---

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

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

let a = 'yellow';

let b = 'green';

let ab = a+b;

console.log(ab); // yellowgreen

console.log(a+'와 '+b+'을 섞으면 '+ab+'이 됩니다.'); // yellow와 green을 섞으면 yellowgreen이 됩니다.

따옴표와 + 기호를 여러 번 적어야 하기 때문에 번거로운데, 이를 간단하게 해주는 것이 템플릿 문자열이다.

 

let a = 'yellow';

let b = 'green';

let ab = a+b;

console.log(ab); // yellowgreen

console.log(`${a}와 ${b}을 섞으면 ${ab}이 됩니다.`); // yellow와 green을 섞으면 yellowgreen이 됩니다.

위와 같이 백틱(`) 사이에 ${변수}를 넣어주면 + 기호를 쓰거나 따옴표를 여러 번 열고 닫아야 하는 불편함이 해소된다. 이것이 템플릿 문자열이다.

 

 

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

일반적으로 객체를 선언할 때에는 아래와 같이 {} 안에 속성: 속성값 을 써준다.

let x = 10;

let y = 20;

let z = 30;

let object = {
    x:10,
    y:20,
    z:30,
}

console.log(object); // { x:10, y:20, z:30 }

이 경우 속성값 하나를 바꿔주려면 object 안을 직접 수정해야 한다. 하지만 객체 리터럴을 사용하면 속성과 속성값을 더욱 편리하게 수정할 수 있다.

 

let x = 10;

let y = 20;

let z = 30;

let object = {
    x,
    y,
    z,
}

console.log(object); // { x:10, y:20, z:30 }

위와 같이 {} 안에 속성만 적어주어도 그 속성이 변수로 선언되어 있다면 변수에 할당된 값이 알아서 속성값으로 들어가게 된다.

 

 

3. 디스트럭쳐링 (Destructuring)

디스트럭쳐링은 비구조화 할당이라고도 하며, 배열이나 객체의 속성을 추출하여 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 

배열 디스트럭쳐링부터 살펴보겠다.

let fruits = ['apple', 'orange', 'banana'];

let [one, two] = fruits;

console.log(one); // apple

console.log(two); // orange

let [one, two] = fruits; 에서 one과 two는 각각 index가 0과 1에 해당하므로, fruits 라는 배열의 첫 번째, 두 번째 인덱스에 해당하는 apple과 orange가 각각 출력되는 것이다.

 

이는 결론적으로 아래와 동일한 내용이다.

let one = apple;

let two = orange;

 

이제 객체 디스트럭쳐링을 다루겠다.

let obj = {

    name:jenny,
    
    age:28,
    
    height:165,
    
    country:Mexico,
    
};

let { name, age, weight } = obj;

console.log(name); // jenny

console.log(age); // 28

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

let { name:myname, country:mycountry } = obj;

console.log(myname); // jenny

console.log(mycountry); // Mexico

let { name, age, weight } = obj; 는 객체 속성(key)을 변수명으로 선언하고, 속성값(value)을 값으로 할당한 것이다.

 

let { name:myname, country:mycountry } = obj; 는 객체 속성(key)에 새로운 변수명을 선언하고 value 값을 할당했다.