구조 분해 할당(Destructuring Assignment) - 배열편

 

우리는 Javascript로 개발하면서 객체와 배열이라는 자료구조를 가장 많이 사용한다.

키를 가진 데이터 여러개를 하나의 Entity에 저장할 때에는 객체를, Collection에 데이터를 순서대로 저장할 땐 배열을 사용한다.

개발을 하다 보면 객체나 배열을 파라미터로 전달해야 하는 경우가 생기곤 하는데, 때로는 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.

이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법이 구조 분해 할당(Destructuring Assignment)이다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본 값이 필요한 경우 등에서 구조 분해 문법은 유용하게 활용된다.

 

구조 분해 할당 (Destructuring Assignment)

구조 분해 할당이란 위에서 언급한 바와 같이 배열 또는 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript의 표현식이다.

 

배열 분해하기

아래의 코드를 통해 배열이 어떻게 변수로 분해되는지 알아보자

let sampleArr = ['one', 'two']

// 구조 분해 할당
// 인덱스를 이용해 배열에 접근 없이 변수로 숫자 사용 가능
// one엔 sampleArr[0]을, two엔 sampleArr[2] 할당
let [one, two] = sampleArr

// split과 같은 반환 값이 배열인 메스드를 활용 가능
let [first, second] = 'one,two'.split(',')

console.log(one)    // one
console.log(two)    // two
console.log(first)  // one
console.log(second) // two

 

분해? 파괴?

구조 분해 할당 과정에서 분해 대상은 파괴되지 않는다. 단지 배열 요소를 직접 변수에 할당하는 것보다 코드의 양이 줄어든다는 차이점만 존재한다.

let sampleArr = ['one', 'two']

// let [one, two] = sampleArr
let one = sampleArr[0]
let two = sampleArr[1]

 

쉼표로 요소 무시하기

let [first, , third] = [1,2,3,4,5]

console.log(third) // 3

쉼표 사이에 빈 공간을 두어, 두번째 요소를 생략하고 세번째 요소를 third라는 변수에 할당할 수 있다.

 

할당 연산자 우측엔 모든 iterable이 가능하다

배열뿐 아니라, 모든 iterable (반복가능객체)에 구조 분해 할당을 할 수 있다.

let [one, two, three] = '123' // ["1", "2", "3"]
let [first, second, third] = new Set([1,2,3]) // [1, 2, 3]

 

할당 연산자 좌측엔 뭐든지 올 수 있다.

assignables 한 것이라면 어떤 것이든 올 수 있다. 아래 코드처럼 객체 프로퍼티도 가능하다.

let actor = {};
[actor.firstName, actor.lastName] = 'GangHo Song'.split(" ")

console.log(actor.firstName) // GangHo

 

.entries(), map으로 반복하기

아래의 코드처럼 Obejct.entries(obj)나 맵에서도 구조 분해를 조합하면 객체의 키와 값을 순회해 변수로 분해 할당할 수 있다.

let soopiri = {
    name: 'soopiri',
    age: 99
}

for (let [key, value] of Object.entries(soopiri)) {
	// name: soopiri, age:99가 순차적으로 출력
    console.log(`${key}:${value}`) 
}

let soopiriMap = new Map()
soopiriMap.set('name': 'soopiri')
soopiriMap.set('age': '99')

for (let [key, value] of soopiriMap) {
  // name: soopiri, age:99가 순차적으로 출력
  alert(`${key}:${value}`);
}

 

변수 교환 트릭

두 변수에 저장된 값을 교환할 때 구조 분해 할당을 사용할 수 있습니다. 예시에선 두개를 지정했지만, 그 이상의 변수에 담긴 값도 교환할 수 있다.

let soopiri1 = 'soopiri';
let soopiri2 = 'piri';

[soopiri1, soopiri2] = [soopiri2, soopiri1]

console.log(`${soopiri1} ${soopiri2}`)

 

'...'로 나머지 요소 가저오기

배열 앞쪽에 위치한 값 몇 개만 필요하고, 그 뒤의 값은 한 곳에 모아서 저장하고 싶을때 사용한다. 이럴 땐 점 3개를 붙인 매개변수 하나를 추가하면 나머지 요소를 가저올 수 있다. rest는 나머지 배열 요소들이 저장된 새로운 배열이 된다. 꼭 변수의 이름이 rest일 필요는 없지만 앞의 점 세개와 변수가 마지막에 위치해야 함은 기억하도록 하자.

let [soopiri1, soopiri2, ...rest] = [1,2,3,4,5,6,7];

console.log(soopiri1) // 1
console.log(soopiri2) // 2
console.log(rest) // [3,4,5,6,7]

 

기본값

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당 값이 없을 경우, undefined로 취급되기 때문이다.

let [first, second] = [];

console.log(first) // undefined
console.log(second) // undefined

= 을 사용하면, 할당할 값이 없을 경우 기본 값을 지정해 줄 수 있다.

let [name="soopiri", age = 99] = ["HAHA"];

console.log(name) // HAHA
console.log(age) // 99

함수 호출이나 표현식도 기본값이 될 수 있다. 기본값을 표현식이나 함수를 설정할 경우 할당할 값이 없을 때 표현식이 평가되거나 함수가 호출된다.

// name의 prompt만 실행됨
// name의 prompt만 실행됨
let [first = console.log('first default'), second = prompt('second default')] = ["value"];

console.log(first); // value
console.log(second); // prompt에서 받아온 값

 

이번 포스팅에서는 구조 분해 할당 기법을 통해 배열을 분해하는 방법에 대해서 알아보았다. 다음 포스팅에서는 객체와 중첩 구조를 분해하는 방법에 대해서 알아보도록 하자.

 

참고링크

JAVASCRIPT.INFO