월요일 아침이 밝았다.
비구조화 할당
ES6부터 추가된 문법이며 구조 분해 할당(Destructuring Assignment)라고도 하며, 배열이나 객체의 값을 새로운 변수에 쉽게 할당한다.
1. 객체 비구조화 할당
const object = { a: 1, b:2, c:3 };
const { a, b } = object;
console.log(a);
console.log(b);
function print({ a, b }) {
console.log(a);
console.log(b);
}
print(object);
// 1
// 2비구조화 할당은 객체나 배열 값 중에 일부만 꺼내서 사용하고 싶을 때 사용할 수 있다.
위 코드에서 object 변수 안에 a,b,c중에 a와 b만 비구조화 할당을 통해 가져오는 걸 볼 수 있다.
비구조화 할당을 하는 방법은 중괄호를 쓰고 비구조화 할당하고자 하는 객체의 프로퍼티명을 써주면 해당 프로퍼티값이 변수에 할당이 된다.
비구조화 할당에서 이름 바꾸기
const animal = {
name: "멍멍이",
type: "개"
};
const {name : nickname} = animal;
console.log(nickname);
// 멍멍이 원래 대로 라면 nickname을 변수로 지정하고 거기에서 animal.name을 호출해서 가져오는 방법이 있지만 비구조화 할당을 사용하면 좀 더 편하게 변경이 가능하다.
animal의 name에 있는 "멍멍이"라는 값을 꺼내와서 nickname 변수에 할당하면 console.log에서 "멍멍이" 값을 받아올 수 있다.
2. 배열 비구조화 할당
const array = [1, 2];
const one = array[0];
const two = array[1];
console.log(one);
console.log(two);
// 1
// 2비구조화 할당을 사용하기전에 배열의 값을 확인하려면 하나하나 변수에 지정하고 그 변수를 콘솔에 찍어봄으로써 확인을 하는 번거로움이 있었다.
하지만 배열 비구조화 할당을 사용하면 아래 코드처럼 간단하게 표현이 가능하다.
const array = [1, 2];
const [one, two] = array;
console.log(one);
console.log(two);
// 1
// 2사용법은 객체와 비슷한데 {} 대신 배열에서 쓰이는 []를 사용하면 첫번째부터 배열의 0번째를 가리킨다.
좀 더 깊은 곳에 있는 값 꺼내기
const deepObject = {
state: {
information: {
name: "javascript",
version: ["es5", "es6", "es7"]
}
},
value: 5
};
const { name, version } = deepObject.state.information;
const { value } = deepObject;
const extracted = {
name,
version,
value
};
console.log(extracted);
// {name: "javascript", version: Array(3), value: 5}value 값을 안적어 주고 생략했는데 특정 객체를 만들 때 특정 key이름으로 선언된 어떤 값이 이미 있다면 value 값 설정해 주는 걸 생략해줄 수 있다.
위 코드에선 deepObject에 name, version, value가 이미 선언이 되어있기 때문에 extracted에서 value 값을 생략해줬다.
비구조화 할당 한 번으로 값 전부 꺼내기
const deepObject = {
state: {
information: {
name: "javascript",
version: ["es5", "es6", "es7"]
}
},
value: 5
};
// ================= 추가
const {
state: {
information: {
name,
version: [firstVer, secondVer]
}
},
value
} = deepObject;
// =================
const extracted = {
name,
firstVer,
secondVer,
value
};
console.log(extracted);
// {name: "javascript", firstVer: "es5", secondVer: "es6", value: 5}기존에 썼던 코드보다는 좀 더 난잡한 느낌이 나긴 한다. 개인적인 생각으로는 가독성만 보면 기존에 썼던 코드가 좀 더 보기 편한 느낌이지만 한 번에 다 써보는 것도 때에 따라 사용만 잘하면 꽤 도움이 될 것 같다.
댓글