Javascript - 구조 분해 할당 방법 [배열, 객체]

• 구조 분해 할당
• 배열 분해하기
• 객체 분해하기
• '...' 나머지 객체
• 중첩 구조 분해

 

 

 

 

 

구조 분해 할당

- 키를 가진 여러개의 데이터를 하나의 엔티티에 저장 시 객체를 사용합니다.

- 데이터를 순서대로 저장 시 배열을 사용합니다.

- 함수, 변수에 객체나 배열을 전달해야 하는 경우가 있는데 전체 데이터가 아닌 일부만 필요시 "구조 분해 할당" 문법을 사용할 수 있습니다.

 

 

배열 분해하기

- 인덱스 접근없이 변수로 사용이 가능합니다.

- 할당 값이 없다면 undefined로 취급됩니다.

- 반환 값이 배열인 메서드를 활용도 가능합니다. (ex.. split과 같은 메서드)

let arr = ["JH","SON"]

// 구조 분해 할당 방식
// 첫 번째 배열에는 JH, 두 번째 배열에는 SON이 할당됩니다.
let [firstName , secondName] = arr; 

console.log(firstName) // JH
console.log(secondName) // SON

 

- 쉽표를 사용하면 필요하지 않은 배열 요소를 버립니다.

let [firstName, , secondName] = ["Son", "Jisu", "JH"];

console.log(secondName); //JH

 

- 할당 연산자 좌측에는 '할당 가능한 것' 은 어떤 것이든 올 수 있습니다.

let user = {};
[user.secondName, user.firstName] = "JH SON".split(' ');

console.log(user.firstName); //SON

 

- .entries() 을 사용해서 구조 분해를 하면 객체의 키, 값을 반복하여 변수 분해 할당이 가능합니다.

let user = {
	name : "JH",
    age : 27
};

for (let [key, value] of Object.entries(user)) {
	console.log(`${key} : ${value}`); // "name : JH"와 "age : 27" 이 차례대로 출력합니다.
}

 

- 기본값 설정하기

let [firstName = "SON", secondName = "JH" ] = ["KIM"];

console.log(firstName); //KIM (배열에서 할당 받은 값)
console.log(secondName); //JH (기본값)

 

 

객체 분해하기

 

- 기본문법

let {first , second} = {first : "" , seconde : ""}

let option = {
	firstName :  "SON",
    secondName : "JH"
};
let {firstName, secondName} = option;
console.log(firstName); // SON
console.log(secondName); //JH

 

- 목표변수 사용방법

let options = {
	firstName : "SON",
    secondName : "JH"
};

let {firstName : f, secondName : s} = options;

console.log(f) // SON
console.log(s) // JH

 

 

'...' 나머지 객체

 

- 분해하려는 객체의 프로퍼티 개수가 할당하려는 변수의 개수보다 많다면 나머지 패턴을 사용해서 할당을 합니다.

let options = {
	firstName : "SON",
    secondName : "JH",
    thridName : "K"
};

let {firstName, ...rest} = options;

console.log(rest.secondName); // JH
console.log(rest.thirdName); // K

 

 

중첩 구조 분해

 

- 객체, 배열이 다른 객체나 배열을 포함할 때 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있습니다.

let options = {
	user : { //또 다른 객체 프로퍼티
    	firstName : "SON",
        secondName : "JH"
    },
    items : ["Chicken","Pizza"], // 배열 프로퍼티
    extra : true
};

let {
	user: {
    	firstName,
        secondName
    },
    items : [item1, item2] // items 배열 할당

} = options;

console.log(firstName); // SON
console.log(secondName); //JH
console.log(item1); //Chicken
console.log(item2); //Pizza

 

 

함수 매개변수

 

- 매개변수 모두 객체에 모아 함수에 전달하여 함수가 전달받은 객체를 분해하여 사용하는 코드입니다.

let options = {
	firstName : "SON",
    secondName : "JH",
    items : ["Item1","Item2"]
}

function menu({firstName, secondName, items = []}){
	console.log(`${firstName} ${secondName}`); //SON JH
    console.log( items ); // Item1, Item2
}

menu(options);