[아티클 프로젝트 027] ES6부터 ES2020까지 01. ES6 간단하게 알고가기

ES6 간단하게 알고가기

 

 

선언 

ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다.

 

• let

  •  

    변수

• const

  • 상수 (배열과 오브젝트의 값 변경은 가능하다.)

• immutable array

  • 기존 배열을 복제하여 사용한다. 

  • 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.)

const a = [1,2,3];
const b = [...a];

 

 

메서드

 

• 화살표함수(Arrow function)

• 클래스 개념 도입

• setPrototypeOf

  • 프로토타입 객체 추가

• 모듈(module)

• 프록시(proxy)

• startsWith(), endWith()

  • 앞 뒤로 문자열 일치 여부 판단

• includes()

  • 문자열 포함 여부 판단

• for-of

  • for-in 에서 상위 프로토타입의 값이 포함되는 문제 발생, value 순회로 for-in 문제 방지

• 전개연산자(Spread Operator)

• 나머지 매개변수(rest parameter)

• 기본 매개변수(default parameter)

• Array.from

  • 유사배열을 배열로 만들어준다.

  • querySelectAll로 얻은 노드리스트를 배열로 변경할수도 있다.

• 필수(기본) 파라미터

• 구조 분해

• set(), weakset()

• 백틱(`), 템플릿처리 ${}

 

 

객체와 변경불가성(Immutability)

원시 타입은 변경 불가능한 값이며 그 외 값은 객체 타입. 객체 타입은 변경 가능한 값이다.

(새로운 값을 다시 만들지 않고 직접 변경 가능)

참조하는 동작으로 의도하지 않은 결과가 나올 수 있다.

따라서 불변 데이터 패턴이 필요하다.

 

불변 데이터 패턴

참조가 아닌 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경한다.

(원본 데이터의 불변)

 

1.객체의 방어적 복사(defensive copy) - Object.assign

Object.assign은 shallow copy이며 deep copy가 아니다.

 

2.불변 객체화를 통한 객체 변경 방지- Object.freeze

Object.freeze는 shallow freeze이며 객체 내부의 freeze를 원한다면 deep freeze를 해야한다.

 

immutable.js

Object.assign, Object.freeze는 번거로우면 성능상 이슈가 있어서 큰 객체에는 사용을 지양한다. (??)

다른 대안 : Facebook이 제공하는 라이브러리 immutable.js를 대안으로 사용할 수 있다.(영구 불변 데이터 구조를 제공)

 

---

ES6 정리 

https://velog.io/@godori/ES6-%EC%A0%95%EB%A6%AC-vpjmrh6hhe

ES6 특징 핵심요약

https://avengersrhydon1121.tistory.com/104

객체와 변경불가성(Immutability)

https://poiemaweb.com/js-immutability

ref https://dassur.ma/things/deep-copy/

ES6-꿀팁

원문 :  https://www.sitepoint.com/shorthand-javascript-techniques/

ref https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html