이 글은 코딩앙마 자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment) 강의를 듣고 정리한 글입니다.
구조 분해 할당이란?
구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식입니다.
배열 구조 분해
let [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2
x에 1이 들어가고, y에 2가 들어갑니다.
let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users; // let user1 = users[0];
// let user2 = users[1];
// let user3 = users[2];
console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'
users라는 배열이 있고, 세명의 이름이 있습니다.
user1, user2, user3라는 변수를 대괄호로 묶은 뒤 선언하고 users 배열을 할당했습니다.
이 의미가 뭐나면, user1은 users[0] ... 이렇게 할당이 되는 것입니다.
let str = "Mike-Tom-Jane";
let [user1, user2, user3] = str.split('-'); // ["Mike", "Tom", "Jane"]
console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'
문자열을 split으로 자른 후 user1,2,3에 넣어주는 것도 가능합니다.
배열 구조 분해 : 기본값
let [a,b,c] = [1,2];
//c -> undefined;
let [a=3, b=4, c=5] = [1,2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 5 <- undfined이기 때문에 기본값 유지
만약 해당하는 값이 없으면 어떻게 될까요?
undefined가 됩니다. 이럴 때 기본값을 주면 에러를 미연에 방지할 수 있습니다.
a=3, b=4, c=5 이렇게 각 변수에 미리 기본값을 세팅해주고 값이 undefined이면 기본값을 사용합니다.
그래서 이 예제의 경우 a와 b는 배열에서 얻어온 값 1,2로 되었고 c는 undefined이기 때문에 기본값 5를 유지합니다.
배열 구조 분해 : 일부 반환값 무시
let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
console.log(user1); // 'Mike'
console.log(user2); // 'Jane'
공백과 쉼표를 이용해서 필요하지 않은 배열 요소를 무시할 수 있습니다.
첫번째 요소 'Mike'는 user1에 들어가고 두번째 요소는 할당 받는 곳이 없으니 생략하고, 세번째 요소는 user2에 할당하고 네번째 요소는 사용하는 곳이 없으니 무시됩니다.
배열 구조 분해 : 바꿔치기
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1
전에는 이미 할당된 변수를 바꾸려면 의미없는 변수를 하나 이상 더 만들어야했습니다.
let c = a; a = b; b = c;
이렇게 사실상 필요하지 않는 변수 c에 값을 저장하고 임시로 사용해야 합니다.
이럴 때 구조 분해 할당을 사용하면 더이상 임시 변수를 선언하지 않고도 간단하게 구현할 수 있습니다.
객체 구조 분해
let user = {name: 'Mike', age: 30};
let {name, age} = user; // let name = user.name;
// let age = user.age;
console.log(name); // 'Mike'
console.log(age); // 30
배열 객체 구조 분해와의 차이점은 순서를 신경쓰지 않아도 된다는 점입니다.
let {name, age} = user; 는 let {age, name} = user; 로 사용해도 동일하게 동작합니다.
객체 구조 분해 : 새로운 변수 이름으로 할당
let user = {name: 'Mike', age: 30};
let {name: userName, age: userAge} = user;
console.log(userName); // 'Mike'
console.log(userAge); // 30
이렇게 변수에 :을 하고 새로운 변수명을 넣어주면 변수의 이름을 바꿀 수 있습니다.
객체 구조 분해 : 기본값
let user = {name: 'Mike', age: 30};
let {name, age, gender} = user;
// gender -> undefined
let {name, age, gender = 'male'} = user;
배열과 마찬가지로 객체를 분해 할 때에도 기본값을 설정해줄 수 있습니다.
gender 변수는 아무것도 해당되는게 없어서 undefined가 들어갑니다. 이럴 때 기본값을 사용해주면 됩니다.
이제 user 객체에 gender가 없다면 male이 기본값으로 할당됩니다.
let user = {
name: 'Jane',
age: 18,
gender: 'female'
};
let {name, age, gender = 'male'} = user;
console.log(gender); // 'female'
만약 user 객체에 gender가 있다면 그 값이 사용됩니다.
객체로 받은 값이 undefined일때만 기본값이 사용된다는 것을 기억하세요.
출처:
https://www.youtube.com/watch?v=lV7ulA7R5Nk
'자바스크립트 > 기초' 카테고리의 다른 글
객체 지향 프로그래밍(OOP, Object-oriented programming) (1) | 2021.07.19 |
---|---|
나머지 매개변수, 전개 구문(Rest parameters, Spread syntax) (0) | 2021.07.17 |
1급 객체와 고차함수 개념 다시 정리하기 (0) | 2021.07.07 |
TDZ (Temporal Dead Zone) (1) | 2021.06.28 |
객체 메소드(Object methods) (1) | 2021.06.27 |