[javascript] 배열의 구조 분해 할당

구조 분해 할당

구조분해 할당은 객체나 배열의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

구조 분해 할당은 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의합니다.

<script>
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
</script>

배열 구조 분해

기본 변수 할당

<script>
var foo = ["one", "two", "three"];

var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
</script>

선언에서 분리한 할당

변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다.

<script>
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
</script>

기본값

변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 사용한다.

<script>
var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
</script>

변수 값 교환하기

하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있다.

<script>
var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
</script>

함수가 반환한 배열 분석

구조 분해를 사용하면 함수가 반환된 배열에 대한 작업을 더 간결하게 수행할 수 있다.

<script>
function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
</script>

일부 반환 값 무시하기

필요하지 않은 반환 값은 무시할 수 있다.

<script>
function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
</script>

아래와 같이 반환 값을 모두 무시할 수 도 있다.

<script>
[,,] = f();
</script>

변수에 배열에 나머지를 할당하기

배열을 구조 분해할 경우, 나머지 구문(스프레드 연산자)을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있다.

<script>
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
</script>