[Javascript] 디스트럭처링 (Destructuring)

디스트럭처링 (Destructuring)

• 디스트럭처링 할당 문법이란 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식을 의미
• 변수로 선언 됨을 인지하여 따옴표를 사용하지 않도록 유의

객체 디스트럭처링

• { } 를 활용하여 조금 더 간결하게 변수 생성 가능
• 디스트럭처링을 활용하여 객체의 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능

/* 형식 */
const {객체의 속성 이름, 객체의 속성 이름 } = 객체명

 

const person = {
	name : 'John',
	age : 20,
    links: {
		website: {
			google : 'http://www.google.com'
		}
	}
}

// ES6
const { name, age } = person;
const {google} = person.links.website // 중첩객체 데이터도 접근 가능

console.log(name); // John
console.log(age);  // 20

// ES6 이전
var name = person.name;
var age = person.age;

객체 디스트럭처링 활용

• 변수 이름 변경 가능
• 속성 값 변경 가능

/* 구문 : 객체 속성명 변경 */
const {객체의 속성명 : 변경하려는 속성명} = 객체

/* 구문 : 기본 속성값 변경  */
const {객체의 속성명 = 변경하려는 값} = 객체

const person = {
  name: 'John',
  age: 20,
  links: {
    website: {
      google: 'http://www.google.com',
    },
  },
};

const { name: n } = person;
const { google: gg } = person.links.website;
console.log(n); // ⇒ John
console.log(gg); // ⇒ http://www.google.com

// 변수명 수정 후 기본 값 지정
const { age: a = 10 } = person.age;
console.log(a); // ⇒ 10

---

배열 디스트럭처링

• 배열은 [ ]를 사용하여 디스트럭처링 수행
• 생성하려는 변수의 수가 배열의 원소보다 적은 경우 남은 배열의 데이터는 어떤 변수에도 할당되지 않음
• 나머지 연산자(rest operator)를 활용하여 남은 데이터 여러 개를 하나의 변수에 저장 가능

/* [구문] */
const [생성 할 변수명, 생성할 변수명] = 객체

// *  기본 사용
const person = ['John', 25];
const [name, age] = person; // 배열의 데이터를 활용
console.log(name, age); // ⇒ John 25

// * 생성할 변수의 수 < 배열의 데이터 수
const person1 = ['John', 'doctor', 25];
const [name1, job1] = person1
console.log(name1, job1); // ⇒ John doctor

// * rest 연산자 활용
const fruits = ['apple', 'banana', 'cherry', 'orange']
const [fruit1, fruit2, ...restfruit] = fruits
console.log(restfruit); // ⇒ [ 'cherry', 'orange' ]

---

디스트럭처링을 활용한  변수 교체

• 디스트럭처링 할당을 사용하여 변수의 값을 서로 교체할 수 있음

let name1 = 'John';
let name2 = 'Jane';
[name1, name2] = [name2, name1]
console.log(name1, name2); // ⇒ Jane John