ES6부터 도입된 Destructuring은 자바스크립트에서 배열이나 객체의 값을 쉽게 분해하여 변수에 할당할 수 있는 기능입니다. 이 기능을 이용하면 다차원 배열의 값을 간단하게 추출할 수 있습니다.
1. 2차원 배열 분해하기
2차원 배열은 배열 안에 또 다른 배열이 포함되어 있습니다. 다음은 2x2 크기의 2차원 배열을 선언하는 예입니다.
const matrix = [[1, 2], [3, 4]];
이제 Destructuring을 사용하여 배열의 값을 분해하여 변수에 할당해보겠습니다.
const [[a, b], [c, d]] = matrix;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
위의 예제에서는 matrix 배열을 Destructuring을 통해 2개의 배열로 분해하고, 각 배열의 값을 a, b, c, d 변수에 할당했습니다. 이제 각 변수에 할당된 값들을 출력해보면, 배열의 각 요소 값을 정확하게 추출할 수 있는 것을 확인할 수 있습니다.
2. 3차원 배열 분해하기
3차원 배열도 마찬가지로 Destructuring을 사용하여 각 요소 값을 추출할 수 있습니다. 다음은 2x2x2 크기의 3차원 배열을 선언하는 예입니다.
const cube = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
이제 Destructuring을 사용하여 배열의 값을 분해하여 변수에 할당해보겠습니다.
const [[[a, b], [c, d]], [[e, f], [g, h]]] = cube;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
console.log(e); // 5
console.log(f); // 6
console.log(g); // 7
console.log(h); // 8
위의 예제에서는 cube 배열을 Destructuring을 통해 4개의 배열로 분해하고, 각 배열의 값을 변수에 할당했습니다. 이제 각 변수에 할당된 값들을 출력해보면, 다차원 배열의 모든 요소 값을 추출할 수 있는 것을 확인할 수 있습니다.
3. 결론
Destructuring은 다차원 배열을 분해하여 각 요소 값을 쉽게 추출할 수 있는 강력한 기능입니다. 위의 예제를 통해 간단한 사용법을 확인해보았습니다. 이를 응용하면 다양한 상황에서 유용하게 사용할 수 있으니, 자바스크립트 개발시 Destructuring을 적극 활용해보세요!