🧱

[JS] 구조 분해 할당


구조 분해 할당

객체와 배열을 사용할 때, 객체나 배열에 저장된 데이터 중 일부만 필요한 경우가 생긴다.

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

배열 분해하기

1let arr = ["하나", "둘"];
2
3// first에 arr[0], second에 arr[1]이 할당된다.
4let [first, second] = arr;
5
6console.log(first);
7// -> 하나
8console.log(second);
9// -> 둘

이 문법을 통해 인덱스를 사용하지 않고 변수로 원하는 값을 사용할 수 있다.

배열을 분해했다고 해서 분해 대상이 수정되거나 파괴되지 않는다.

할당 연산자 우측엔 모든 iterable이 올 수 있다.

1let [a, b, c] = "abc";
2let [one, two, three] = new Set([1, 2 ,3]);

swap

자바스크립트는 swap을 내장 라이브러리에서 지원하지 않는다. 하지만 구조 분해 할당을 통해 비슷하게 사용할 수 있다.

1let a = 1;
2let b = 3;
3[a, b] = [b, a];
4
5let arr = [1, 3];
6[arr[0], arr[1]] = [arr[1], arr[0]];

나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 나머지 값들은 한데 모아서 저장할 때, ...을 사용해서 나머지 요소를 가져올 수 있다.

1let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
2
3// `rest`는 배열이다.
4console.log(rest[0]); // -> Consul
5console.log(rest[1]); // -> of the Roman Republic
6console.log(rest.length); // -> 2

기본값

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크면, 할당할 값이 없는 변수들은 undefined가 할당된다.

=을 이용하면 할당할 값이 없을 때 기본값을 설정할 수 있다.

1let [name = "Guest", position = "Visitor"] = ["Woong"];
2console.log(name);
3// -> Woong
4console.log(position);
5// -> Visitor

복잡한 표현식이나 함수 호출도 기본값으로 올 수 있다.

객체 분해하기

1let {var1, var2} = {var1: "Hello", var2: "World"};

할당 연산자 우측에는 분해하고자 하는 객체, 좌측에는 원하는 키를 넣는다.

키와 다른 이름으로 변수를 저장할 수도 있다.

1let {var1: hello, var2: world} = {var1: "Hello", var2: "World"};

배열에서 했던 것처럼 기본값을 설정할 수도 있고, 나머지 프로퍼티를 ...를 통해 들고올 수 있다.

똑똑한 함수 매개변수

매뉴 생성에 관여하는 함수가 있다고 해보자. 매뉴엔 너비, 높이, 제목, 항목 리스트 등이 필요하기 때문에 이 정보들을 매개변수로 받는다.

1function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
2 // ...
3}

이렇게 함수를 작성하면 넘겨주는 인수의 순서가 틀려 문제가 발생할 수 있다. 또한 기본값이 설정되어 있어 굳이 인수를 넘겨주지 않아도 되는 매개변수도 넘겨줘야된다.

1showMenu("My Menu", undefined, undefined, ["Item1", "Item2"]);

이럴 때 구조 분해를 사용하면 가독성이 훨씬 좋아진다.

1let options = {
2 title: "My menu",
3 items: ["Item1", "Item2"]
4};
5
6function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
7 //
8}
9
10showMenu(options);

참조: ko.javascript.info