[javascript] 구조 분해(Destructing) 할당

mdn 구조분해 할당을 참고하여 정리했습니다.

구조 분해 할당

구조 분해 할당은 spread문법을 써서 배열이나 객체의 속성을 해체해 개별 값을 변수에 할당하는 표현식이다.

구조 분해 할당은 할당문을 좌변두고, 원래 변수에서 어떤 값을 분해해 할당할지 정의한다.

기본 변수 할당

변수 x 배열에서 할당되는 배열의 길이만큼 분해되어 들어간다.

let x = [1, 2, 3, 4, 5]
let [one, two] = x;

console.log(one);	// 1
console.log(two);	// 2

기본값

변수에 기본 값을 할당하는데, 분해한 값이 undefined일 때는 값을 대신 사용한다.

let [a=5, b=10] = [2]

console.log(a);	 // 2
console.log(b);	 // 10

변수 값 교환

let a = 5;
let b = 8

[a,b] = [b, a]
console.log(a); // 8
console.log(b); // 5

spread 사용해 배열 분해

let arr = ['wonderful', 'weather', 'today']
let [start, ...rest] = arr

console.log(start)	//'wonderful'
console.log(rest) //['weather', 'today']

const [first, ...middle, last] = array처럼은 사용할 수 없다.
할당하기 전인 좌변에는 rest 문법 이후에 쉼표가 올 수 없다.

spread 사용해 객체 분해

예제 1)

let student = {name:'candy', major:'trade'}
let { name, ...args} = student

console.log(name)	//'candy'
console.log(args)  // {major:'trade'}

예제 2)

const user = {
  name: '김코딩',
  company: {
    name: 'Code States',
    department: 'Development',
    role: {
       name: 'Software Engineer'
    }
  },
  age: 35
}

const changedUser = {
  ...user,        
  name: '박해커',
  age: 20
}
changedUser;
//{   
//   name: '박해커',
//   company: {
//      name: 'Code States',
//      department: 'Development',
//      role: {
//         name: 'Software Engineer'
//      }
//   },    
//   age: 20
//}  

const overwriteChanges = {
  name: '박해커',
  age: 20,
  ...user
}

   
overwriteChanges;
//{   
//   name: '김코딩',
//   company: {
//      name: 'Code States',
//      department: 'Development',
//      role: {
//         name: 'Software Engineer'
//      }
//   },    
//   age: 35
//}