[JavaScript] 해체 할당(구조 분해 할당)으로 객체 속성에 접근하는 방법

해체 할당(구조 분해 할당)이란? 아래는 MDN Web Docs에서 정의되어 있는 내용이다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법이 해체 할당(destructuring assignment)을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 진가를 발휘하게 된다.

 

 

 

예를 들어보자. 여러 장의 사진을 전달해 값을 HTML 문자열로 변환하려면 어떻게 해야할까? 

좀 더 명확히 말하면 이미지, 제목, 촬영한 사람, 위치를 순서대로 보여주고 싶고, 또 추가 정보도 있다. 사진에 따라 촬영 장비, 이미지 형식, 렌즈 정보 등 개별적인 정보가 담길 수 있다. 어떤 정보가 담길지 전부 알 수 없지만, 어쨋든 입력된 정보를 모두 노출해야 한다.

 

사진에 관련된 정보는 엄청나게 많기 때문에 이런 정보를 개별 매개변수로 전달하는 것은 갖은 실수를 유발할 가능성이 높다. 사진에 대한 정보를 담은 예제 코드를 봐보자.

 

const landscape = {
    title: 'Landscape',
    photographer: 'Nathan',
    equipment: 'Canon',
    format: 'digital',
    src: '/nadscape-nm.jpg',
    location: [32.712222, -103.1405556],
}

const landscape = {
    title: 'Landscape',
    photographer: 'Nathan',
    equipment: 'Canon',
    format: 'digital',
    src: '/nadscape-nm.jpg',
    location: [32.712222, -103.1405556],
}
 
function displayPhoto(photo) {
    const title = photo.title;
    const photographer = photo.photographer || 'Anonymous'
    const location = photo.location
    const url = photo.src
    const copy = { ...photo }
    
    // delete 연산자는 객체의 속성을 제거
    delete copy.title;
    delete copy.photographer;
    delete copy.location;
    delete copy.src;
    
    const additional = Object.keys(copy).map(key => `${key}:${copy[key]}`)
    
    return (`
        <img alt="${title} 사진 ${photographer} 촬영" src="${url}" />
        <div>${title}</div>
        <div>${photographer}</div>
        <div>위도: ${location[0]}</div>
        <div>경도: ${location[1]}</div>
        <div>${additional.join(' <br/> ')}</div>
    `)
}
 
console.log('displayPhoto(landscape) : ', displayPhoto(landscape))
// <img alt="Landscape 사진 Nathan 촬영" src="/nadscape-nm.jpg" />
// <div>Landscape</div>
// <div>Nathan</div>
// <div>위도: 32.712222</div>
// <div>경도: -103.1405556</div>
// <div>equipment:Canon <br/> format:digital</div>
 

위의 코드를 보면, 객체의 정보를 가져오는데 대부분을 할애하게 된다.

 

- 해체 할당 방법

하지만,  자바스크립트에서는 해체 할당이라는 과정을 통하면 객체에 있는 정보를 곧바로 할당할 수 있다.

작동 원리는 먼저 객체에 있는 키와 같은 이름의 변수를 생성하고, 객체에 있는 키에 연결된 값을 생성한 변수의 값으로 할당한다. 

 

예제로 직접 확인해보자. 코드에서는 photographer를 키로 갖는 객체가 있고, 이 객체를 이용해서 이름이 photographer인 변수를 생성했다.

const landscape = {
    photographer: 'Nathan',
 
}
 
const { photographer } = landscape;
 
console.log('photographer : ', photographer)
// Nathan

 

주의할점은 값을 할당하는 변수의 이름은 객체에 있는 키와 반드시 일치해야 한다. 중괄호는 변수에 할당되는 값이 객체에 있다는 것을 나타낸다.

 

객체에 키가 없는 경우에는 undefined가 할당되지만, 기본값을 설정을 할 수 있다.

const landscape = {};
const { photographer = 'Anonymous', title } = landscape;
 
console.log('photographer : ', photographer)
// Anonymous
 
console.log('title : ', title)
// undefined

 

 

 

- 키이름을 예측할 수 없는 경우

키이름을 예측할 수 없어서 모를경우에는 ... 을 사용해서 사용하면 좋다. 새개의 마침표와 변수 이름을 작성하면, 이 새로운 변수에 어떠한 추가 정보라도 담기게 된다. 정보를 수집하기 위해 마침표 세 개를 사용하는 경우에는 펼침 연산자(spread operator)라고 부르지 않는다. 이때는 나머지 매개변수(rest parameter)라고 부른다.

 

변수의 이름은 원하는 대로 지어도 된다. 변수에 할당되는 값은 객체에 남아있는 키-값 쌍을 모은 객체이다.

const landscape = {
    photographer: 'Nathan',
    equiment: 'Canon',
    format: 'digital',
}
 
const {
    photographer,
    ...additional
} = landscape
 
console.log('photographer : ', photographer)
// Nathan
 
console.log('additional : ', additional)
// { equiment: 'Canon', format: 'digital' }

 

객체에서 꺼낸 photographer를 제외한 나머지 키-값 쌍이 새로운 객체(additional)에 담긴걸 확인할 수 있다. 사진 객체를 복사한 후 photographer 키를 삭제한 것과 같다. 

 

 

 

- 변수 이름으로 원래의 키와 다른 이름을 지정하는 방법

const landscape = {
    src: '/landscape-nm.jpg',
}
 
const { src } = landscape
console.log('src  : ', src)
/// landscape-nm.jpg
 
const { src: url } = landscape
console.log('url : ', url)
// ReferenceError: src is not defined
 
// console.log('src : ', src)
// ReferenceError: src is not defined

 

객체에서 어떤 값을 사용할 것인지 나타내려면 여전히 키 이름을 사용해야 한다. 하지만, 원래의 키 이름을 바꿀 수 있다. 위의 코드를 보면 해체할당으로 처리하는 방식에서는, 클론에 키이름을 먼저 쓰고 그 값을 할당할 변수 이름을 입력하면 된다.

 

 

- 배열 할당

배열 또한 해체 할당을 사용할 수 있지만, 한가지 예외 사항이 존재한다. 배열에는 키가 없기 때문에 변수 이름을 마음대로 정할 수 있지만, 대신 배열에 담긴 순서대로 할당해야 한다는 점이다. 가령 세 번째 항목을 변수에 지정하려면 먼저 이전의 두 값을 변수에 할당해야 한다. 

 

 

해체 할당은 배열에 값이 쌍으로 담겨 있어서 담긴 값의 순서가 정보의 일부인 경우에도 매우 유용하다. 예를 들어 다음같이 값이 담겨 있다면, 항상 배열의 첫 번째 값은 위도이고 두 번째 값은 경도이므로 순서대로 할당할 수 있다.

const landscape = {
    location: [32.712222, -103.1405556],
}
 
const { location } = landscape
const [latitude, longitude] = location
 
console.log('latitude : ', latitude)
// 32.712222
console.log('longitude : ', longitude)
// -103.1405556

 

위의 경우에는 객체에서 location 배열을 꺼내고, latitude와 longitude를 할당했다. 하지만, 한번으로 줄일 수 도 있다.

const landscape = {
    location: [32.712222, -103.1405556],
}
 
const { location: [latitude, longitude] } = landscape
 
console.log('latitude : ', latitude)
// 32.712222
console.log('longitude : ', longitude)
// -103.1405556

 

 

-종합 코드

const landscape = {
    title: 'Landscape',
    photographer: 'Nathan',
    equipment: 'Canon',
    format: 'digital',
    src: '/nadscape-nm.jpg',
    location: [32.712222, -103.1405556],
}
 
function displayPhoto(photo) {
    const {
        title,
        photographer = 'Anoymous',
        location: [latitude, longitude],
        src: url,
        ...other
    } = photo;
    const additional = Object.keys(other).map(key => `${key}:${other[key]}`);
    
    return (`
        <img alt="${title} 사진 ${photographer} 촬영" src="${url}" />
        <div>${title}</div>
        <div>${photographer}</div>
        <div>위도: ${latitude} </div>
        <div>경도: ${longitude} </div>
        <div>${additional.join(' <br /> ')}</div>
    `)
}
 
console.log('displayPhoto(landscape) : ', displayPhoto(landscape))
//    <img alt="Landscape 사진 Nathan 촬영" src="/nadscape-nm.jpg" />
//    <div>Landscape</div>
//  <div>Nathan</div>
//  <div>위도: 32.712222 </div>
//    <div>경도: -103.1405556 </div>
//    <div>equipment:Canon <br /> format:digital</div>

 

해체 할당의 가장 큰 장점은 해체 할당을 함수의 매개변수에 적용할 수 있다는 점이다. 해체 할당을 매개변수에 사용하면, 변수를 선언하지 않아도 마치 정보를 함수 몸체에서 할당한 것처럼 작동한다. 주의할점은 해체 할당은 let으로 변수를 할당하기 때문에 해당 변수를 재할당 할 수 없다. 

 

 

 

 

-간단한 해체할당 코드

 

배열 해체 할당

let colors = ['red', 'white', 'orange']
let [ , second ] = colors
let [ , , third ] = colors 
console.log(second)
// white
console.log(third)
// orange
 
// 우측에서 좌측 방향으로 펼쳐서 할당하는데 오른쪽에 있는 것들을 
//그대로 매칭해서 하나하나 할당하는 것이 destructuring assingment 이다. 
// 매칭할대상이 없다면 undefined가 할당된다.
 
let colors2 = ['black', 'pink', 'green']
let [ , , first ] = colors2
console.log(first)
// green
 
let [ fruit ] = ['apple', 'banana', 'mellon']
console.log(fruit)
// apple

 

 

배열 해체할당 활용

// rest parameter 와의 연동
const arr = [1,2,3,4,5];
const [a, ...b] = arr;
const [, , ...c] = arr;
 
console.log(a, b, c)
// 1 [ 2, 3, 4, 5 ] [ 3, 4, 5 ]
 
 
// default parameter 와의 연동
const [d = 10, e = 20] = [undefined, 5]
console.log(d, e)
// 10 5
 
const [f, g = f * 2] = [5];
console.log(f, g)
// 10 5
 
// const [h = i, i] = [undefined, 10]
const [i, h = i] = [10, undefined]
console.log(h, i)
// i is not defined 

 

 

다차원 배열에서의 동작

const arr = [1, [2, [3, 4], 5], 6]
 
const [a, [b, [ , c], ], d] = arr;
console.log(a, b, c, d)
// 1, 2, 4, 6 
 
const [e, [f], g] = [1, [2, [3, 4], 5], 6];
console.log(e, f, g)
///1, 2 ,6
 

 

 

값교환 방식

// 기존의 값 교환 방법
let a = 1;
let b = 2;
let temp = a;
 
a = b;
b = temp;
console.log(a, b);
// 2 1
 
// ES6 해체할당 사용 값 교환방법
let c = 3;
let d = 4;
[c, d] = [d, c];
console.log(c, d);
// 4 3
 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어