Javascript-Destructuring(구조분해)

목차

1. 개체 DESTRUCTURING

2. 배열 DESTRUCTURING

---

객체나 배열에서 값을 추출하여 변수에 할당하는 방법이다. 말 그대로 데이터를 감싸고 있는 구조를 뿌신다음에, 내용물을 새로운 변수에 집어 넣는 것이다.

부숴질 대상은 개체 or 이터러블

---

1. 개체 DESTRUCTURING

프로퍼티를 기준으로 할당

---

예제1)

const person = { name: 'John', age: 30 };

// const { name : name, age : personAge } = person;

이를 줄여서 쓰면 다음과 같다.

const { name, age : personAge } = person; 

이는 아래의 두 줄을 한번에 쓴 것이다.

// const name = person.name;

// const personAge = person.age;

console.log(name); // 'John'

console.log(personAge);  // 30

---

예제2) 개체를 함수에 전달

function printUserName({ name }) {

  console.log(`이름: ${name}`);

}

const user = {

  name: '홍길동',

  age: 25,

};

// 함수 호출 시 destructuring을 사용하여 객체 속성을 추출

printUserName(user); // 이름: 홍길동

---

2. 배열 DESTRUCTURING

순서대로 할당

예제1)

const numbers = [1, 2, 3, 4, 5];

const [first, second, , fourth] = numbers;

console.log(first);  // 1

console.log(second); // 2

console.log(fourth); // 4