배열 구조 분해 할당

- 배열 또는 객체의 값을 분해해 개별 변수에 즉시 할당하는 것. 주로 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용하며 배열은 ES6(ES2015), 객체는 ECMA2018에 등장.

• 배열 구조 분해 할당

/* Example1 */
const array = [0, 1, 2, 3, 4, 5]
const [zero, first, second, ...rest] = array
// zero 0 
// first 1
// second 2
// rest [3,4,5]

/* Example2 */
const array1 = [0, 1, 2, 3, 4]
const [zero, , , , four] = array1 // 1,2,3은 표현식이 없으므로 변수 할당 생략.
 zero //0
 fout //4

 - 배열의 구조 분해 할당은 이름을 자유롭게 선언할 수 있으며 ','의 위치에 따라 값이 결정된다. Example2에서 중간 인덱스에 대한 할당을 생략할 수 있으며, 이는 실수를 유발할 수 있으므로 배열의 길이가 작을 때 주로 사용하여야 한다. 기본 값을 선언 할 수도 있으며, 사용하고자 하는 배열의 길이가 짧거나 값이 없는 경우에는 undefined 기본값을 사용함. 

 

/* undefined 일 경우만 기본값 사용 */
const [a = 10, b = 10, c = 10, d = 10] = [0, 1, 2]
// a 0
// b 1
// c 2
// d 10

const [a1 = 1, b1 = 1, c1 = 1, d1 = 1, e1 = 1] = [undefined, null, 0, '']
// a1 1
// b1 null
// c1 0
// d1 ''
// e1 1

 - JS 에서 기본값을 사용할 수 있는 경우는 undefined일 때분이며 여기서 a는 명시적으로 undefined로 지정되어 있고, e의 경우는 배열의 길이를 넘어서 구조 분해 할당되었으므로 undefined로 기본값이 할당됨.

const array = [0, 1, 2, 3, 4]
const [zero, ...rest] = array

// zero 0
// rest [1, 2, 3, 4]

 - 특정값 이후의 값을 다시 배열로 선언하고 싶다면 전개 연산자를 사용할 수 있으며, '...' 을 사용하면 나머지 모든 값을 해당 변수에 배열로 넣게 되며, 어디서부터 어디까지 할당할지 예측할 수 있는 뒤쪽에서만 가능하며, 앞쪽이라면 이를 파악할 수 없기 때문에 앞에 전개 연산자를 사용은 불가능.

/* before transpile */
const array = [0, 1, 2, 3, 4]
const [zero, first, second, ...rest] = array

/* after transpile */
var array = [0, 1, 2, 3, 4]
var zero = array[0],
	first = array[1],
	second = array[2],
    rest = array.slice(3)

- 배열 구조 분해 할당의 transpile 전,후의 코드로 배열에서 꺼내오거나 slice해서 값을 할당함. 배열 구조 분해 할당 이전에는 선언을 4줄에 걸쳐서 하지만 해당 작업을 한 줄로 처리할 수 있음.

 

2024.09.25 - [Front-End/Javascript] - 배열의 전개 구문

2024.09.23 - [Front-End/Javascript] - 객체 구조 분해 할당