JavaScript_ES6_Study [ 축약 표현, Destructuring ]

2022-03-10 노션페이지,
2022-04-17 노션페이지
기록된 노션을 다시 정리

어려웠던 부분

• 객체 디스트럭처링에서 축약 전 표현 법(아래 작성)
  • 구조가 익숙하지 않아 어색했음

1. 프로퍼티 축약 표현

• ES5보다 ES6로 가면 조금 더 짧아지고 간편해짐
• 이때 프로퍼티 이름은 변수의 이름으로 자동 생성된다.

// ES5
var x = 1, y = 2;

var obj = {
  x: x,
  y: y
};
----------------------------------------
// ES6
let x = 1, y = 2;

const obj = { x, y };

2. 메소드 축약 표현

: function() 삭제

// ES5
var obj = {
  name: 'Lee',
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee
----------------------------------------
// ES6
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

다음은 정말 많이 사용되는 디트럭처링

3. 배열 디스트럭처링(Array destructuring)

배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다.
이때 추출/할당 기준은 배열의 인덱스이다

// ES5
var arr = [1, 2, 3];

var one   = arr[0];
var two   = arr[1];
var three = arr[2];
----------------------------
// ES6 Destructuring
const arr = [1, 2, 3];
const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3

4. 객체 디스트럭처링 (Object destructuring)

객체의 각 요소를 배열로부터 추출하여 변 리스트에 할당한다.
이때 할당 기준은 프로퍼티 이름(키)이다.

// ES5
var obj = { firstName: 'Ungmo', lastName: 'Lee' };

var firstName = obj.firstName;
var lastName  = obj.lastName;
----------------------------
// ES6 Destructuring
// 축약 전
const { prop1: p1, prop2: p2 } = { prop1: 'a', prop2: 'b' };
// 아래는 위의 축약형이다
const { prop1, prop2 } = { prop1: 'a', prop2: 'b' };

중첩 객체의 경우는 아래와 같이 사용한다.

const person = {
  name: 'Lee',
  address: {
    zipCode: '03068',
    city: 'Seoul'
  }
};

const { address: { city } } = person;
console.log(city); // 'Seoul'

참조: poiemaweb.com