[자바스크립트 js] 구조 분해 Destructuring / 배열 구조 분해

  구조 분해

• '배열과 객체를 분해하다.'
• 배열과 객체에 각각 적용하는 방식에 차이가 있다.
• 배열의 요소나 객체의 프로퍼티 값들을 개별적인 변수에 각각 할당해서 다룰 수 있다.

 

  배열 구조 분해

• 배열을 분해해서 하나씩 할당한다.
• 할당 연산자 오른쪽이 배열의 형식이 아니거나, 아예 아무것도 할당하지 않으면 오류가 발생한다.

const name = ['뚝딱', '도깨비', '두올다', '개자이너']

// const color = name[0]; // 뚝딱
// const grid = name[1]; // 도깨비
// const icon = name[2]; // 두올다
// const click = name[3]; // 개자이너

const [color, grid, icon, click] = name;

console.log(color);
console.log(grid);
console.log(icon);
console.log(click);

// 결과
// 뚝딱
// 도깨비
// 두올다
// 개자이너

 

• 꼭 선언된 변수와 배열의 갯수가 같을 필요는 없다.
• 길이가 넘치는 배열은 어느 곳에도 할당 되지 않는다.
• 그러나 가장 마지막 변수에 ...를 붙여주면 함수의 rest 파라미터처럼 사용 가능하다.
  배열을 분해해서 할당할 때 앞쪽에 있는 변수의 순서대로 요소를 할당하고,
  남은 나머지 요소를 마지막 변수에 배열로 할당하는 것이 가능하다.

const name = ['뚝딱', '도깨비', '두올다', '개자이너', '할뚜이따']

// const color = name[0]; // 뚝딱
// const grid = name[1]; // 도깨비
// const icon = name[2]; // 두올다
// const click = name[3]; // 개자이너

const [color, grid, icon, ...click] = name;

console.log(color);
console.log(grid);
console.log(icon);
console.log(click);

// 결과
// 뚝딱
// 도깨비
// 두올다
// 개자이너, 할뚜이따

 

 

• 할당하는 배열의 길이가 선언된 변수보다 짧으면 undefined가 나온다.
• 기본값을 설정해두면 기본값이 결과로 출력된다.

const name = ['뚝딱', '도깨비', '두올다']

// const color = name[0]; // 뚝딱
// const grid = name[1]; // 도깨비
// const icon = name[2]; // 두올다
// const click = name[3]; // 개자이너

const [color, grid, icon, click = '없음'] = name;

console.log(color);
console.log(grid);
console.log(icon);
console.log(click);

// 결과
// 뚝딱
// 도깨비
// 두올다
// undifined / 기본값이 있으면 '없음'이 나옴.

 

 

• 배열의 Destructuring 문법은 변수에 할당된 값을 서로 교환할 때도 활용할 수 있다.

let tooktak = '뚝딱';
let doordie = '두올다'

[tooktak, doordie] = [doordie, tooktak]

console.log(tooktak);
console.log(doordie);

//결과
//두올다
//뚝딱

 

 

+) Destructuring을 할 때 변수에 할당될 값이 없거나 혹은 undefined값이 할당되면, 그 변수에는 undefined 대신 기본값이 할당 된다.(기본값이 있을 경우)

+) 기본값은 할당될 값이 없거나 undefined 값이 할당될 때 사용된다. null과 혼동하지 말자.