JS 구조분해 할당

구조 분해 할당 Destructuring Assignment

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있습니다.

 

객체 구조분해 할당

 

// 일반적인 객체 속성 접근
const user = {name: "징징", age: 10};

console.log(user.name); // 징징
console.log(user.age); // 10

// 구조분해 할당 사용 ✅
const { name, age } = user;

console.log(name); // 징징
console.log(age); // 10

 

구조 분해를 사용하면 데이터에 접근하기 편합니다.

그러나 키 값으로 불러온 것이기에 name 이 아닌 다른 키로 가져오려고 하면 아래와 같이 undefined 를 가져 옵니다.

 

const user = {name: "손석구", age: 10};

const { name2, age } = user

console.log(name2) // undefined
console.log(age) // 10

 

배열 구조분해 할당

 

// 일반적인 배열 속성 접근
const games = ['배틀그라운드', '리그오브레전드'];

console.log(games[0]) // 배틀그라운드
console.log(games[1]) // 리그오브레전드

// 구조분해 할당 ✅
const [battleGround, Lol] = games;

console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드

 

배열의 경우 index 로 각 자리가 정해져 있기 때문에 변수명에 battleGround, lol 같이 자유롭게 넣어 주어도 순서대로 값이 들어 갑니다.

혹은 모든 속성마다 변수를 지정하지 않아도 됩니다.

아래 예시를 보면 0번째 인덱스에만 변수명을 주고 나머지는 ...others 로 순서대로 가져올 수 있습니다.

여기서 others 는 예시 문자일 뿐이며, 다른 문자를 사용해도 됩니다. ex) ...rest

 

const games = ['배틀그라운드', '리그오브레전드', '바람의나라'];

const [battleGround, ...others] = games;

console.log(battleGround); // 배틀그라운드
console.log(games); // [ '배틀그라운드', '리그오브레전드', '바람의나라' ]

 

배열의 크기보다 많은 변수를 임시로 저장할 수 있습니다.

그러나 games 에 출력은 되지 않습니다. 단지 const baram = '바람의 왕국'; 변수를 새로 만들어 준 것이나 다름 없습니다.

 

const games = ['배틀그라운드', '리그오브레전드'];

const [battleGround, Lol, baram = '바람의 왕국'] = games;

console.log(battleGround); // 배틀그라운드
console.log(games); // [ '배틀그라운드', '리그오브레전드' ]
console.log(baram); // 바람의 왕국

 

이것을 아래와 같이 활용할 수 있습니다.

 

const games = ['배틀그라운드', '리그오브레전드', '왕국의 바람'];

const [battleGround, Lol, baram = '바람의 왕국'] = games;

console.log(battleGround); // 배틀그라운드
console.log(games); // [ '배틀그라운드', '리그오브레전드', '왕국의 바람' ]
console.log(baram); // 왕국의 바람

 

games 의 2번째 자리(왕국의 바람)에 값이 있다면, baram 변수에 그 값을 넣어줍니다.

만약, 2번째 자리가 비어 있다면, baram 변수의 초기값인 '바람의 왕국' 이 들어갑니다.

 

함수 인자 구조분해 할당

 

인자 자리에 구조분해 할당을 사용하면, 더 간단하게 접근 가능합니다.

 

구조분해 할당 ✅

const people_obj = {name: 'lee', age: 20};
const people_arr = ['lee', 20];

// 객체일 때
const getUserName_obj = ({name, age}) => { // key 로 접근하기에 name, age 로 불러야 합니다.
	return `${name}의 나이는 ${age}`;
};

// 배열일 때
const getUserName_arr = ([name, age]) => { // index 로 접근하기에 n, a 이렇게 자유롭게 인자 사용 가능
	return `${name}의 나이는 ${age}`;
};

console.log(getUserName_obj(people_obj)); // lee의 나이는 20
console.log(getUserName_arr(people_arr)); // lee의 나이는 20

 

함수에서는 아래와 같이도 많이 활용합니다.

 

function makeNum() {
    return ['one', 1];
}

const [num_string, num_number] = makeNum();
console.log(num_string); // one
console.log(num_number); // 1

 

 

참고 자료

https://ko.javascript.info/destructuring-assignment

구조 분해 할당