JavaScript ES6 - 템플릿 리터럴 , 객체 리터럴 , 구조분해 할당

 

이번 포스팅에서는 JavaScript의 ES6 문법 중 템플릿 리터럴과 객체 리터럴에 대해 알아보고 더 나아가 구조분해 할당에 대해서도 조금 알아보도록 하겠다.

 

 

< 목차 >

1. 템플릿 리터럴
2. 객체 리터럴
3. 구조분해 할당

 

 

 

< 템플릿 리터럴 (Template Literals) >

템플릿 리터럴은 ES6로 넘어오면서 도입된 새로운 문자열 표기법이다. ES6 이전에는 문자열 안에 변수를 사용해 값을 집어 넣고 싶은 경우 +연산자를 이용해 문자열과 변수를 연결해주었다.

let name = "bitkunst"
let aa = "안녕하세요 "+name+"입니다"

console.log(aa)
// output : 안녕하세요 bitkunst입니다.

하지만 ES6에서는 템플릿 리터럴을 사용하여 문자열 안에서 변수 호출이 가능해졌다. 사용 방법은 문자열을 작성할 때 백틱( ` )을 이용해서 작성한 뒤 변수를 삽입하고 싶은 부분에 ${ }를 사용해 변수를 넣어주면 된다. 아래의 예제 코드를 보면 보다 쉽게 이해할 수 있다.

let name = "bitkunst"
console.log(`안녕하세요 ${name}입니다`)

// output : 안녕하세요 bitkunst입니다

이렇게 템플릿 리터럴을 사용하면 +연산자 없이도 간단한 방법으로 문자열 안에서 변수를 호출할 수 있다.

 

 

 

< 객체 리터럴 (Object Literals) >

JavaScript에서 객체를 생성할 때, 생성자 함수가 아닌 중괄호 { }를 이용해서 객체를 생성할 수도 있다. 이 때 우리는 객체 리터럴로 객체를 생성하였다고 표현한다. 아래의 코드에서처럼 중괄호 { }를 이용해서 표현하는 객체를 객체 리터럴이라고 한다.

const obj = {
    name: 'bitkunst',
    age: 20,
    height: 180
}

객체 리터럴을 사용할 때는 아래와 같이 변수를 이용할 수도 있다.

let name = "bitkunst"
let age = 20
let height = 180

const obj2 = {
    name: name,
    age: age,
    height: height
}

console.log(obj2)
// output : { name: 'bitkunst', age: 20, height: 180 }

뿐만 아니라 ES6에서는 객체의 속성과 속성값을 따로 입력해 줄 필요 없이 변수 자체만을 사용해서 객체의 속성을 표현할 수도 있다.

let name = "bitkunst"
let age = 20
let height = 180

const obj3 = {
    name,
    age,
    height
}

console.log(obj3)
// output : { name: 'bitkunst', age: 20, height: 180 }

 

+) 여기서 obj2와 obj3은 같은 의미이다.

 

 

 

 

< 구조분해 할당 >

객체 안에 존재하는 속성값들을 변수에 할당하고 싶을 때 사용 가능한 것이 바로 구조분해 할당이다. 다음과 같은 객체가 존재한다고 하자.

const obj = {
    a: 10,
    b: 20,
    c: {
        d: 30
    }
}

obj 객체 안에있는 a, b, d의 속성값을 각각 변수 a1, b1, d1 에 할당하고 싶은 경우 아래와 같이 하나하나 직접 할당하는 방법을 사용해 볼 수 있다.

let a1 = obj.a
let b1 = obj.b
let d1 = obj.c.d

// a1값은 10
// b1값은 20
// d1값은 30

하지만 이렇게 하나하나 변수에 할당할 경우 변수 선언에 너무 많은 코드를 소비하게 된다. 구조분해 할당을 사용하면 이와 같은 문제를 해결할 수 있다. 다음과 같이 코드를 작성해 보자.

const {b, a} = obj;

console.log(a)  // output : 10
console.log(b)  // output : 20

 

객체에서 가지고 오고 싶은 속성값이 있을 경우 위와 같은 방법으로 해당 속성을 변수에 할당해 줄 수 있다. 이러한 방법을 구조분해 할당이라 하고 이는 obj 객체 안의 속성을 찾아서 변수와 매칭을 시켜준 것이라고 볼 수 있다. 이 때 변수의 순서는 상관이 없다.

 

구조분해 할당을 할 때 주의할 점이 있는데 속성값을 할당할 때 변수명을 해당 객체의 속성명과 같게 해서 할당해야 한다는 점이다. 아래와 같은 방식으로 할당할 경우 undefined 가 출력되는 것을 확인할 수 있다.

const {a1, b1} = obj;

console.log(a1)  // output : undefined
console.log(b1)  // output : undefined

obj 객체의 속성이 a, b이기 때문에 속성값을 할당하고자 할 때 변수명 역시 a, b이여야만 구조분해 할당이 가능하다. 만약 변수명을 다르게 해서 값을 할당하고 싶은 경우 아래처럼 사용하면 된다.

const {b:b1, a} = obj;

console.log(a, b1)  // output : 10 20

 

obj 객체 안에 있는 c 객체의 d 속성값을 할당하고 싶을 때는 아래와 같이 작성하면 된다.

const { b, a, c:{d} } = obj;

console.log(a, b, d)  // output : 10 20 30

 

이러한 구조분해 할당 문법은 배열에서도 존재한다. 

const array = ["nodejs", {}, 10, true]
let node = array[0]
let obj = array[1]
let bool = array[3]

array란 배열의 첫번째, 두번째 , 네번째 요소의 값을 각각 node, obj, bool 변수에 대입하는 위의 코드를 구조분해 할당을 이용하여 아래와 같이 바꿔 쓸 수 있다.

const array = ["nodejs", {}, 10, true];
const [node, obj, , bool] = array;

여기서도 나름대로의 규칙이 존재하는데 node, obj, bool의 위치를 보면 node는 배열의 첫번째 요소, obj는 배열의 두번째 요소, bool은 배열의 네번째 요소라는 사실을 확인할 수 있다. obj와 bool 사이의 요소인 10에는 변수명을 지어주지 않았으므로 빈칸으로 처리해줘야 한다.

 

구조분해 할당문을 이용하면 코드 줄 수를 많이 줄일 수 있어 보다 간결하게 코드를 짤 수 있으니 알아두도록 하자.