[Javascript] 비구조화 할당(구조분해)

 

 

 

 

비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 자바스크립트의 표현식이다. 쉽게 말하면 배열 혹은 객체 안의 값을 편하게 꺼내 쓸 수 있도록 해 주는 문법이라는 것이다.

 

 

 

 

객체의 비구조화 할당

 

우선 아래의 예시에서부터 시작해 보자.

const ironMan = {
  name: '토니 스타크',
  actor: '로버트 다우니 주니어',
  alias: '아이언맨'
};

const captainAmerica = {
  name: '스티븐 로저스',
  actor: '크리스 에반스',
  alias: '캡틴 아메리카'
};

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${hero.actor}입니다.`;
  console.log(text);
}

print(ironMan); // 아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어입니다.
print(captainAmerica); // 캡틴 아메리카(스티븐 로저스) 역할을 맡은 배우는 크리스 에반스입니다.

 

위 코드에서 print 함수를 보면 파라미터로 받아 온 hero 내부의 값을 조회할 때마다 hero. 과 같이 입력하고 있는데 객체의 비구조화 할당(객체 구조 분해)을 사용하면 코드를 더욱 간결하고 보기 좋게 작성할 수 있다.

function print(hero) {
  const { alias, name, actor } = hero; // hero라는 객체에서 값들(alias, name, actor)을 추출해 새로운 상수로 선언해 줌
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다.`;
  console.log(text);
}

 

그리고 여기서 한 단계 더 나아가면 print 함수의 파라미터에서 객체 비구조화 할당을 할 수도 있다.

function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor}입니다.`;
  console.log(text);
}

 

 

이제 예시를 조금 단순화하여 새로운 상황을 가정해 보자.

const object = { a: 1, b: 2 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

 

여기서 b의 값이 주어지지 않았다면 출력 결과는 어떻게 될까?

const object = { a: 1 };

function print({ a, b }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// undefined

 

위 결과와 같이 두 번째 출력에서 undefined가 나타날 것이다.

 

---

 

기본 값 할당

 

이러한 상황에서 b에 기본 값을 주고 싶다면 아래와 같이 해줄 수 있다.

const object = { a: 1 };

function print({ a, b = 2 }) {
  console.log(a);
  console.log(b);
}

print(object);
// 1
// 2

 

그리고 이는 꼭 함수의 파라미터에서만 할 수 있는 일은 아니다.

const object = { a: 1 };

const { a, b = 2 } = object;

console.log(a); // 1
console.log(b); // 2

 

 

---

 

key 대신 다른 변수명 사용하기

 

이번에는 비구조화 할당을 하는 과정에서 선언할 값의 이름을 바꾸는 방법을 알아보자.

const animal = {
  name: '멍멍이',
  type: '개'
};

const nickname = animal.name;

console.log(nickname); // 멍멍이

 

위 코드에서는 anmial.name 값을 nickname이라는 변수에 담고 있는데 변수명이 같다면 위에서와 같이 비구조화 할당을 하면 될 것 같은데 지금은 변수명이 서로 다르다. 이러한 상황에서는 콜론(:)을 사용해서 이름을 바꿔줄 수 있다.

const animal = {
  name: '멍멍이',
  type: '개'
};

const { name: nickname } = animal
console.log(nickname);

 

위 코드는 animal 객체 안에 있는 name을 nickname이라고 선언하겠다는 의미이다.

 

 

---

 

배열의 비구조화 할당

비구조화 할당은 객체뿐 아니라 배열에서도 사용할 수 있다.

const array = [1, 2];
const [one, two] = array;

console.log(one);
console.log(two);

 

이 문법은 배열 안에 있는 원소를 다른 이름으로 새롭게 선언해 주고 싶을 때 사용하면 아주 유용하다. 객체의 비구조화 할당과 마찬가지로 기본 값 지정이 가능하다.

const array = [1];
const [one, two = 2] = array;

console.log(one); // 1
console.log(two); // 2

 

 

---

 

중첩된 객체의 비구조화 할당

 

이번에는 객체의 깊숙한 곳에 들어 있는 값을 꺼내는 방법에 대해 알아보자. 예를 들어 다음과 같은 객체가 있다고 가정해 보자.

const deepObject = {
  state: {
    information: {
      name: 'John',
      languages: ['korean', 'english', 'French']
    }
  },
  value: 5
};

 

여기서 name, languages, value 값들을 밖으로 꺼내주고 싶다면 어떻게 해야 할까? 두 가지 방법이 있는데 첫째는 비구조화 할당을 두 번 사용하는 것이다.

const deepObject = {
  state: {
    information: {
      name: 'John',
      languages: ['korean', 'english', 'French']
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted); // {name: "John", languages: Array[3], value: 5}

 

 

그리고 둘째는 한꺼번에 모두 추출하는 방법이다.

const deepObject = {
  state: {
    information: {
      name: 'John',
      languages: ['korean', 'english', 'French']
    }
  },
  value: 5
};

const {
  state: {
    information: { name, languages }
  },
  value
} = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

 

위 코드에서 name, languages 값들은 추출되지만 state, information은 추출되지 않는다는 점에 유의하자.

 

 

---

 

구조 분해 시 유의사항

 

1) this가 있는 객체 메서드를 구조분해로 꺼내면 문제가 발생한다.

 

구조분해는 객체 값을 복사해서 넣는 것이기 때문이다. 그래서 아래 예시에서는 getCandy 메서드의 내용이 복사되어 구조분해되니 그 안의 this는 windows를 가리키게 된다.

var candyMachine = {
	status : {
    	name : 'node',
        count : 5,
    },
    getCandy() {
    	this.status.count--;
    	return this.status.count;
    }
}

candyMachine.getCandy();
var count = candyMachine.status.count;
console.log(count); // 5-- 되서 4가 된다.


var { getCandy, status: { count } } = candyMachine;
getCandy();
console.log(count); // 여전히 4가 된다.

 

 

 

2) 변수 선언에 대한 명시(let, const, var)가 없을 경우 괄호를 사용하여 감싸줘야 한다.

({ a, b } = { a : 10, b : 20});
console.log(a); // 10
console.log(b); // 20

{ c, d } = { c : 30, d : 40}; // error