JavaScript 구조 분해 할당

 

 

 

 

구조 분해 할당

   - 배열데이터와 객체 데이터를 각자의 데이터로 분해하여 할당시키는 방법입니다.

   - 데이터의 순서를 변경하거나, 일부만 추출할 때 사용합니다.

 

 

 

 

배열구조 분해할당

const numbers = [1,2,3]

let a = numbers[0]
let b = numbers[1]
let c = numbers[2]

console.log(a,b,c)	// 1,2,3

let d,e,f

[d,e,f] = numbers
console.log(d,e,f)	// 1,2,3

let g,h,i
[h,i,g] = numbers
console.log(g,h,i)	// 3,1,2

const numbers2 = [,,5]
let [x=2,y,z] = numbers2
console.log(x,y,z)	// 2,undefined,5

let [,d1,] = numbers
console.log(d1)		// 2

const numbers3 = [1,2,3,4,5,6,7,8,9,10]
let[d2,...rest] = numbers3
console.log(d2)	1
console.log(rest)	// [2,3,4,5,6,7,8,9,10]

   - array 데이터를 각각의 변수에 나눠 담을 수 있습니다.

   - 데이터의 길이만 맞는다면, [d,e,f] 와 같이 한번에 담을 수도 있습니다.

   - 배열의 일부만 추출하여 변수에 할당할 수도 있습니다.

   - 전개연산자를 활용하여 지정된 위치를 제외한 모든 변수만 따로 할당받을 수 있습니다.

실행 결과

 

 

 

 

객체 구조 분해 할당

const user = {
    name: 'Neo',
    age: 22,
    isValid: true,
}

let name = user.name
let age = user.age
let isValid = user.isValid

console.log(name,age,isValid)

const user2 = {
    name2: 'Smith',
    age2: 54,
    isValid2: true,
    email: 'Smith123@456.com',
    phone_number: '000-000-000-00',
}

const {isValid2, name2, age2} = user2
console.log(name2,age2,isValid2) // 정상 출력

const {isValid3, email,phone_number} = user2
console.log(email,phone_number,isValid3) // isValid3 만 undefined(user2의 키 값에 isValid3가 없기 때문)

const user3 = {
    name3: 'Jackson',
    age3: 27,
    isValid3: true,
    email2: 'jackson@123.com',
    phone_number2: '111-111-111-11',
}
const {name3,...rest2} = user3
console.log(name3)
console.log(rest2)

   - Object 데이터 또한 배열처럼 구조분해할당이 가능합니다.

   - 객체 구조 분해 할당은 배열처럼 인덱스를 기준으로 하는것이아닌, key값을 기준으로 설정합니다.

      따라서 키값에 존재하지 않는 데이터명은 사용할 수 없습니다.

   - 객체 구조 분해 할당 또한, 전개연산자를 통해 지정된 데이터를 제외한 데이터만을 가져올 수 있습니다.