자바스크립트 배열의 구조분해(destructuring)

저번 포스팅에서는 객체의 구조분해를 다뤘습니다. 마지막 부분에는 객체와 배열을 혼합한 구조에서 구조분해는 어떻게 할 것인지도 다루니 혹시 객체 구조분해를 모르신다면 보고 오시는 것을 추천드립니다.

자바스크립트 객체의 구조분해

배열 구조분해 하기

---

let arr = ["first", "second", "third"];
let [first, second, third] = arr;

first와 second, third의 값을 확인하시면 각각 "first"와 "second", "third"의 값이 담겨 있는 것을 볼 수 있습니다. 객체를 구조분해 할 땐 객체 리터럴을 사용했지만 배열을 구조분해 할 땐 배열 리터럴을 사용합니다. 할당 연산자 왼쪽에 배열 리터럴이 오고, 할당연산자 오른쪽에 오는 값은 null이나 undefined여서는 안됩니다. 또 반드시 초기자(initializer)가 필요하다는 것도 잊지말아주세요.

구조분해문에 기본값 넣기

let arr = ["first", "second"];
let [first, second, third = "third"] = arr;

arr이라는 배열엔 2개의 값이 있고, 구조분해 시엔 변수에 third를 추가해줬습니다. 그리고 third엔 할당연산자를 통해 "third"라는 기본값을 주었습니다. 만약 기본값을 주지 않았다면 third엔 undefined라는 값이 들어가게 됩니다.

변수명을 배열의 값과 다른 것을 사용해도 될까요?

객체엔 기본적으로는 같은 이름을 사용해야 했습니다만 배열에서는 순서를 기반으로 하기 때문에 인덱스에 맞게 그냥 다른 이름을 사용하시면 됩니다. 

let arr = ["first", "second", "third"];
let [one, two, three] = arr;

one과 two, three의 값을 확인해보시면 각각 "first", "second", "third"가 담겨 있는 것을 확인할 수 있습니다. 그리고 순서를 기반으로 값을 받아오기 때문에 특정 인덱스의 값만 받아오기 위해서 다른 부분은 그냥 비워두시면 됩니다.

let arr = ["first", "second", "third"];
let [ , , three] = arr;

third라는 값만 가지고 오기 위해서 구조분해 시에 첫번째와 두번째 변수자리는 그냥 공백으로 두었습니다. 쉼표가 없이 그냥 let [three] = arr; 이라고 썼다면 three에는 "first"라는 값이 담기게 됩니다. 주의해주세요.

중첩 배열에서 구조분해 사용하기

이번에는 배열들이 중첩되어 있을 때 구조분해를 사용해 보겠습니다.

let arr = ["foo", "bar", ["foo1", "bar1"]];
let [, , [foo1, bar1]] = arr;

arr라는 배열 안에 foo와 bar라는 값이 있고, 세번째 값에는 foo1과 bar1이라는 값이 들어있는 배열이 들어있습니다. 구조분해를 통해 foo1과 bar1이라는 변수에 각각 "foo1"과 "bar1"이라는 값을 할당하려면 순서에 맞게 공백을 주고, 다시 중첩된 만큼 배열리터럴을 사용하고 그 안에 변수를 넣으면 됩니다. 위의 소스코드를 확인해보시면 foo1과 bar1의 값이 각각 "foo1"과 "bar1"이신 것을 볼 수 있습니다. 

객체와 배열이 혼합되어 있을 때 구조분해 사용하기

let obj = {
  obj1:"obj1",
  obj2:["foo", "bar"]
};

obj라는 객체안에 obj1, obj2라는 프로퍼티가 있고, obj2는 "foo"와 "bar"가 들어있는 배열을 값으로 가지고 있습니다. 여기서 구조분해를 통해서 "bar"만 bar라는 변수에 할당하려면 어떻게 해야할까요?

let {obj2:[, bar]} = obj;

일단은 obj2라는 변수로 obj2 프로퍼티의 값을 받고, 그 안에서 배열 bar의 값을 받으면 됩니다. 그럼 반대로 배열 배열 안에 객체가 있을 때는 어떻게 받아올까요?

let arr = ["arr1", "arr2", {foo:"foo", bar: "bar"}, "arr4"];

배열의 3번째 값으로 객체를 주었습니다. 객체에는 foo, bar라는 프로퍼티 안에 각각 "foo"와 "bar"의 값이 담겨 있습니다. 이 배열에서 bar라는 값만 가져와보도록 하겠습니다.

let [, , {bar}] = arr;

변수 bar의 값을 확인해보세요. "bar"라는 값이 담겨있나요?

객체와 배열이 혼합되어 있을 때 마니 헷갈리실 수도 있습니다. 혹시 이해가 되지 않는 부분이 있다면 댓글에 남겨주세요.

공감은 제작자에게 큰 힘이 됩니다.