JavaScript에서 배열 비구조화

이번 강의에서는 배열의 비구조화(Destructuring) 연산을 다룰 것입니다. 이 연산은 배열의 요소들을 한 줄의 코드로 변수에 대량 할당하기 위한 것입니다.

이 연산의 구문은 다음과 같습니다:

javascriptlet [변수1, 변수2, 변수3] = 배열;

보시다시피, = 기호 왼쪽의 대괄호 안에 변수 이름들이 나열되어 있습니다. 이 변수들은 여는 괄호 앞에 위치한 let을 통해 대량으로 선언됩니다.

연산 결과, 첫 번째 변수에는 배열의 첫 번째 요소(즉, 키가 0인 요소)가 할당되고, 두 번째 변수에는 두 번째, 세 번째 변수에는 세 번째 요소가 할당됩니다.

실제 예를 통해 살펴봅시다. 연도, 월, 일을 저장하는 배열이 있다고 가정합시다:

javascriptlet arr = [2025, 12, 31];

비구조화를 사용하여 연도, 월, 일을 해당 변수에 할당해 봅시다:

javascriptlet arr = [2025, 12, 31];
let [year, month, day] = arr;

변수들의 내용을 확인해 봅시다:

javascriptconsole.log(year);  // 2025 출력
console.log(month); // 12 출력
console.log(day);   // 31 출력

비교를 위해, 비구조화 없이 코드가 얼마나 불편하고 길어지는지 확인해 보세요:

javascriptlet arr = [2025, 12, 31];

let year  = arr[0];
let month = arr[1];
let day   = arr[2];

console.log(year);  // 2025 출력
console.log(month); // 12 출력
console.log(day);   // 31 출력

javascriptlet arr = ['John', 'Smit', 'development', 'programmer', 2000];

let name       = arr[0];
let surname    = arr[1];
let department = arr[2];
let position   = arr[3];
let salary     = arr[4];