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
'~2022 > 아티클' 카테고리의 다른 글
| [아티클 프로젝트 034] [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄) (0) | 2020.08.28 |
|---|---|
| [아티클 프로젝트 033] SEO 그것을 알려드림 (0) | 2020.08.27 |
| [아티클 프로젝트 029] ES6부터 ES2020까지 03. ES9 간단하게 알고가기 (0) | 2020.08.20 |
| [아티클 프로젝트 028] ES6부터 ES2020까지 02. ES7, ES8 간단하게 알고가기 (0) | 2020.08.19 |
| [아티클 프로젝트 025] React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~' (0) | 2020.08.12 |
| [아티클 프로젝트 023] 2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) (0) | 2020.08.10 |
| [아티클 프로젝트 019] react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 / 비동기적으로 바뀌는 컴포넌트 UI 테스트 (0) | 2020.08.05 |
| [아티클 프로젝트 018] react-testing-library 를 사용한 리액트 컴포넌트 테스트 (0) | 2020.08.04 |