[Javascript] New Javascript 4장 - 디스트럭처링 할당

✅ 1. 배열 구조 분해

배열 구조 분해는 배열의 값을 순서대로 변수에 담을 수 있습니다.

const arr = [1, 2, 3];
const [x, y] = arr;

console.log(x); // 1
console.log(y); // 2

 

기본값을 지정할 수도 있습니다 (값이 없을 경우 대체)

// 기본 값 지정 (값이 없을 때 대체)
const arr = [10];
const [a, b = 20] = arr;

console.log(a); // 10;
console.log(b); // 20;

 

값을 건너뛰고 필요한 것만을 가져올 수 있습니다.

const arr = [1, 2, 3, 4];
const [first, , third] = arr;

console.log(first); // 1
console.log(third); // 3

 

나머지를 모아 배열로 받을 수도 있습니다.

const arr = [1, 2, 3, 4, 5];
const [a, b, ...rest] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]

---

 ✅ 2. 객체 구조 분해

객체의 속성을 키 이름으로 꺼낼 수 있습니다.

const user = { name: "홍길동", age: 26 };
const { name, age } = user;

console.log(name); // "홍길동"
console.log(age); // 26

 

변수명을 직접 바꿔 받을 수 있습니다.

const user = { name: "지훈", age: 24 };
const { name: username, age: userAge } = user;

console.log(username); // "지훈"
console.log(userAge); // 24

 

기본값을 지정할 수도 있습니다.

const user = { name: "정수" };
const { name, age = 25 } = user;

console.log(name); // "정수"
console.log(age); // 25

 

나머지 속성을 모아 객체로도 받을 수 있습니다.

const user = { name: "Jimmy", age: 23, city: "Los Angeles", hobby: "Golf" };
const { name, ...others } = user;

console.log(name); // "Jimmy"
console.log(others); // { age: 23, city: "Los Angeles", hobby: "Golf" }

---

✅ 3. 함수 파라미터에서 활용

배열을 인자로 받을 때 바로 구조를 분해할 수 있습니다.

function print([a, b]) {
  console.log(a, b);
}

console.log([10, 20]); // [ 10, 20 ]

 

객체를 인자로 받을 때에도 필요한 속성만 꺼내 사용 가능합니다.

function greet({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old`);
}

greet({ name: "Mason", age: 29 });
// Hello Mason, you are 29 years old

---

 

GitHub - javascript-only/newJSRoom: https://thinky.tistory.com/category/Front-End/JavaScript