JavaScript의 구조분해할당

구조분해 할당 ( Destructuring assignment )

배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것
JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함
즉, 객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용

 

배열의 구조 분해 할당

const arr5 = ['tomato', 'kiwi', 'banana'];
 const [tomato, kiwi, banana, orange = "orange"] = arr5;
 console.log(tomato);
 
 
 let x=1, y=3;
 [x, y] = [y, x]
 
 console.log(x,y); // x = 3, y = 1

 

1. arr[0], arr[1] 처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의 이름 으로 접근하기 위해서 사용
2. 변수를 선언한 순서대로 배열의 요소가 값으로 할당됨
3. 구조분해 시 변수의 값이 undefined 일 때 기본값 할당 가능
4. 구조분해 없이 두 변수의 값 교환도 가능

 

오브젝트(객체)의 구조 분해 할당

 

const obj = {
 title: '제목',
 content: '내용',
 num: 0,
 };
 const { title : newtitle, num, content, operation = 'three' } = obj
 //const title = obj.title;
 //const num = obj.num;
 //const content = obj.content;
 console.log(content); //'내용

• 객체의 속성값을 key로 접근하는 것이 아닌 변수로 접근하기 위해서 사용
• 변수 선언 순서에 따라서 값이 할당되는 것이 아닌 key의 이름에 따라서 변수에 값이 할당됨
• 객체 안의 속성을 변수명으로 사용gkau, 콜론을 이용해 원래 값을 다른 변수에 할당할 수도 있음