구조분해할당이란 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 하는 표현식을 얘기한다. 객체나 배열에서 데이터 전체가 아닌 일부분만 필요한 경우가 생기는데, 이럴 때 일부분만 '분해'할 수 있도록 하는 표현식이다.
Array 구조분해할당
- let [item1, item2=default, ..., rest] = array
구조분해할당이 나오기 이전에는 일부분의 데이터를 추출하기 위하여 배열의 index를 사용해 값을 추출하여 사용하거나, 변수를 교환하기 위해서는 임시 변수가 필요했었다. 구조분해할당을 통해서 이러한 점들을 간편하게 할 수 있게 되었다.
array의 첫번째, 두번째 요소는 각각 item1과 item2에 저장되고 array의 2번째 요소가 값이 없을 경우 default parameter의 값으로 반환된다. 이어지는 나머지 요소들은 배열로 rest에 저장된다.
두 변수의 값 교환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let name1 = "코딩쥐";
let name2 = "티스토리";
// 두 변수의 값 교환
[name1, name2] = [name2, name1];
console.log(name1, name2); // 티스토리 코딩쥐
</script>
</body>
</html>
배열 데이터 추출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = [1, 2, [3, "a"], "b", "c", true];
// 중간 값의 경우 콤마(,)를 통해 비우면 받지 않을 수 있다.
let[one, two,,,three,,four] = arr1;
const arr2 = [one,two,three,four];
console.log(arr2); // [1, 2, 'b', true]
// 값이 없을 경우에는 undefined로 초기화 된다.
let[a1,b1,,,,,,,,,,c1] = arr1;
const arr3 = [a1,b1,c1];
console.log(arr3); //[1, 2, undefined]
// 배열 중간에 배열이 있을 경우 구조를 똑같이 적용하면 된다.
let[,,[a2,b2],,,] = arr1;
const arr4 = [a2,b2];
console.log(arr4); // [3, 'a']
</script>
</body>
</html>
Rest Parameter와 Default Parameter 함께 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const arr1 = [1,2,3,4,5,6,7,8];
// Rest parameter을 사용해서 처음 3개만 변수로, 나머지는 배열로 받는법
let[one,two,three, ...four] = arr1;
console.log(one,two,three, four) // 1,2,3 (5) [4, 5, 6, 7, 8]
// Default parameter을 사용해서 만약 값이 없을 경우 undefined이 아닌 기본 값 할당
let[a1,a2,,,,,,,,a3=9] = arr1;
console.log(a1,a2,a3); //1 2 9
</script>
</body>
</html>
Obejct 구조분해할당
- let{key1, key2 = default, ..., rest} = object
객체에서 구조분해할당을 시행할 때 불러올 key의 이름과 같아야 한다. object에서 key1이라는 키 값을 가지고 있는 프로퍼티가 저장되고, key2에는 key2라는 키 값을 가지고 있는 프로퍼티가 저장된다. 만약 key2라는 키 값이 없으면 default parameter로 설정된 값으로 반환된다. 이어지는 나머지 요소들은 객체로 rest에 저장된다.
Object 데이터 추출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj1 = {
one: 1,
two: 2,
five: 5
}
// 해당하는 key가 없을 경우 undefined로 값을 저장한다.
let { one, three } = obj1;
console.log(one, three); // 1 undefined
// 객체에서 일부 값을 객체로 가져오고 싶을 때 사용하는 방법
let a1, b1;
({ one: a1, five: b2 } = obj1);
console.log(a1, b2); // 1 5
const obj2 = {
one : a1,
five : b2
}
console.log(obj2); //{one: 1, five: 5}
</script>
</body>
</html>
Rest Parameter와 Default Parameter 함께 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//Rest Parameter을 사용하면 나머지 값들은 객체로 저장된다.
const options = {
a: 1,
b: 2,
c: 3,
d: 4
}
let{a,b, ... rest} = options
console.log(rest); //{c: 3, d: 4}
//Default Parameter을 사용하여 값이 없을 경우 값을 할당한다.
const box = {
color: "brown"
}
let{width: w=100, height: h=100, color} = box;
const box2 = {
width : w,
height: h,
color
}
console.log(box2); //{width: 100, height: 100, color: 'brown'}
// 객체 안에 배열, 객체 안에 객체가 있을 때
const obj1 = {
a: [1,2,3],
b: {b_1 : "안녕"},
c: false
}
let{
a : [a1, a2, a3],
b : {b_1 : bvalue},
c} = obj1
console.log(a1, a2, a3); //1 2 3
console.log(bvalue); //안녕
console.log(c); //false
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : Geolocation API를 사용하여 현재 위치를 가져와보자 (0) | 2024.08.11 |
|---|---|
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |
| JavaScript : Symbol에 대해서 알아보자 (0) | 2024.08.06 |
| JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 (0) | 2024.08.05 |
| JavaScript : Array관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : String관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 숫자 관련 내장함수 (0) | 2024.08.04 |
| JavaScript 내장함수 : 인코딩 / 디코딩 함수 (0) | 2024.08.04 |