ES6 정리

 

var 키워드로 변수 선언시 몇가지 문제가 있고, 그 문제들로 인하여 ES6에서 let과 const를 도입하였음. 

- 문제의 대부분은 전역변수와 관련

  *함수레벨 스코프, var 생략 가능, 변수 중복선언 허용, 변수 호이스팅

- 전역 변수는 사용억제 해야 함

- 변수 스코프는 좁을수록 좋음 

  *스코프 넓으면 언제 어디서 사용하는지 파악이 힘들고, 의도치 않게 변경되어 복잡함

 

* 블록레벨 스코프(대부분의 프로그래밍 언어)

  : 모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효(지역변수), 코드 블록 외부에서는 참조 X

 

* 함수레벨 스코프(JS)

  : 함수 내부에서 선언된 변수는 지역변수, 함수외부에서 선언한 변수는 모두 전역변수

 

 

let 

- 블록레벨스코프

- 변수 중복 선언 금지

- 호이스팅 되지만, 일시적 사각지대(TDZ)에 빠짐 

  *변수 선언시, 아래의 단계를 거치는데, var는 선언과, 초기화가 동시에 적용되고, let은 선언단계까지만 적용

   1. 선언: VO에 등록

   2. 초기화: 메모리에 공간확보

   3. 할당: 실제값 할당

- 클로저

  * for문에서 var i 변수는 전역 변수, let i 변수는 지역변수이자 자유변수임. (전역객체 window의 프로퍼티가 아님)

 

 

const

- 대부분의 특징이 let과 같음 

- 변하지 않는 값 = 재할당X

- 선언과 동시에 값이 할당되어야 함 

- 객체도 재할당 되지 않으나, 객체의 내용(obj.prop)는 변경 가능 

 

 

let, const 어떤걸 써야하는가? 에 대한 결론

- 변수 선언은 기본적으로 const를 사용(const가 비교적 안전하다) 

- 재할당이 필요한 경우에 한해 let 사용

 

 

 

템플릿 리터럴 도입

- 백틱 문자(`)를 사용

- 문자열 인터폴레이션(${...})으로 표현식을 감쌈 

- ex) `My name is ${변수명 등}`

 

 

 

 

화살표 함수 

- function 키워드 대신, 화살표 => 를 사용하여 함수 선언

- 익명함수로만 사용 가능, 호출을 위해 함수 표현식 사용

  ex) const pow = x => x*x; 

- 화살표 함수의 this는 정적으로 결정됨, 언제나 상위 스코프의 this를 가짐 

  * JS의 경우, this는 함수 호출 방식에 따라 바인딩 될 객체가 동적으로 결정되었다 (전역객체이거나 인스턴스)

- 화살표 함수를 사용하면 안되는 경우

  1. 객체의 메소드: 상위객체로 취급(window를 가리킴)

  2. prototype: 1번과 같은 이유

  3. 생성자 함수: 화살표 함수는 prototype 프로퍼티가 없다. 

  4. addEventListener 함수 등의 콜백 함수: window를 가리킴

 

 

 

 

 

Rest 파라미터 (...)

- function test(a, b, ...rest){ console.log(rest) } // [1,2]

- rest는 앞의 인자들을 제외한 나머지 인자값임

- 배열로 받음

- 반드시 마지막에 위치해야함

- 화살표 함수에는 arguments 프로퍼티가 없으므로 가변인자함수 구현시엔 반드시 rest 파라미터 사용 

 

Spread 문법 (...)

- 대상을 개별 요소로 분리함 

- console.log(...[1,2,3]) // 1,2,3

- 이터러블이 아닌 객체는 안됨 

- 합치거나(concat 처럼 사용)

- 넣거나(push ")

- 다른배열을 삽입하거나(splice ")

- 복사하거나(copy ")

  할때 사용

 

 

 

객체 리터럴 프로퍼티(속성) 기능 확장 

- var obj = {... }

- 축약 obj = {x,y}

- 키 동적 생성 obj = {[`${prefix} - ${++i}`] : i}

- 상속 

  ex) const child = {

     __proto__: parent 

  }

 

 

 

디스트럭처링

- 구조화된 배열or객체를 비구조화, 파괴하여 개별적인 변수에 할당 하는 것

- ex) [x,y] = [1,2]

 

 

 

 

클래스

- JS의 클래스는 클래스기반 언어에 익숙한 프로그래머들을 위한 일종의 (프로토타입 기반 패턴의) 문법적 설탕임 

- 익숙한 클래스로 빠른 학습 가능, 단순 명료한 문법 제공

- class Person {

     constructor(name){

        this._name = name;

        // 속성은 constructor에 작성

     }

    // 몸체에는 메소드만 가능하다 

  }

- constructor 생략시 빈객체 생성됨, 동적할당 가능 

- constructor의 this는 인스턴스 가리킴, public 임

- get 메소드명: 몸체에 작성, 접근시, 리턴값 필수

- set 메소드명(인자값): 몸체에 작성, 값 할당시

- static(정적) 메소드

  : this 사용 X, 

   인스턴스에서 사용불가함 

- 클래스 상속시 extends 키워드 사용 

  class Child extends Parent {

     constructor(){

       super() // 자식클래스의 constructor에서 반드시 super 호출해야함 

     }

     // 오버라이딩 : 재정의

     // 오버로딩: 매개변수에 의해 메소드 구별하여 접근 

  }

 

 

 

 

 

 

 

 

모듈

js 파일은 브라우저에서 따로 로드해도 같은 독립적인 파일 스코프를 갖지 않는다. (하나의 전역객체를 공유함)

ES6 부터는 각 파일을 모듈로 만들어서 export(내보내기), import(가져오기) 할 수 있도록 만들었음 

 

<script type="module" src="lib.mjs"></script> 

 

이렇게 타입을 모듈로 지정하고 확장자명도 명시적으로 mjs로 해주면 모듈로 인식하게 됨. 

하지만, IE를 포함한 구형 브라우저는 지원하지 않고, 지원하더라도 몇몇 이슈도 있으므로

안전하게 webpack 사용이 권장됨. 

 

export const 변수명

export function 함수명

이런식으로 따로 따로 내보낼 수 도 있고, 

 

export { a,b,c }

이런식으로 한번에 객체로 내보낼 수 도 있음 

 

하나만 export 할경우 default 키워드 사용하는 게 좋음 

export default function 함수명(){...}

default 사용시에는 var, let, const 사용X

default 모듈을 불러들일때는 import 변수명 from '...mjs' 이런식으로 임의의 변수로 이름붙여 불러온다 

 

import는 공개(export)한 파일을 로드할때 쓴다 

import * as lib from ./lib.mjs

 

 

 

 

 

 

 

프로미스

JS는 비동기 처리 위해 콜백함수를 사용한다. 

콜백함수를 사용하면 콜백헬(콜백에 콜백에 콜백...)에 빠지기 쉬운데, 

콜백헬에 빠질경우 가독성이 나쁘고 에러처리가 곤란하다. 

 

이런 단점을 보완하기 위해 프로미스를 도입하였다. 

아래처럼 사용하는데, 

오류는 catch로 잡아주는게 좋다 

 

const p = new Promise((resolve, reject) => {

    if(수행성공){

       resolve('result') // resolve 함수를 호출하면서, 처리결과를 전달함

    }else(수행실패){

       reject('failure') // reject 메소드를 호출하면서 에러메시지를 전달함 

    }

})

 

 

보통 선언하고(리턴해주고), 호출한다 

 

const promiseAjax = (m, u, p) => {

    return new Promise(resolve, reject) => {

       ...

    }

}

 

 

p('GET', '...'){

   ...

}.then(처리결과){

   ...

}.then(그다음 처리결과){

  ...

}

 

이게 프로미스 체이닝이다. 

(콜백헬 해결 위해)

후속처리 메소드 여러개 연결하여 처리함

 

 

Promise.all 은 전달받은 모든 프로미스를 선언 순서대로 병렬로 처리하고, 에러는 먼저 발생한 순으로 처리한다 

Promise.race는 all이랑 비슷하지만, 먼저 처리된 Promise 리졸브 처리결과를 반환한다. 

 

 

 

 

 

Symbol(심볼)

- ES6에서 새로 추가된 타입이다. 

- 변경되지 않는 원시타입 이다. 

- 객체의 유일한 프로퍼티 키 생성위해 사용한다 

- new 연산자를 사용하지 않는다

- let mySymbol = Symbol();

- ()안에 인자로 문자열 전달 할 수 있지만, 설명 위한 디버깅용일 뿐이다 

- obj[mySymbol] = 123

=> {[Symbol(mySymbol)]: 123}

 

 

 

이터레이션 프로토콜

이터레이션 프로토콜은 다양한 데이터 소스(문자열, 숫자, 배열 등...)가 하나의 순회방식을 갖도록 하기 위한 것이다. 

이터러블이 이터레이션을 리턴한다 

 

1. 이터러블

[Symbol.iterator]() 

 

2. 이터레이션

{

   next(){

     retrun {

       value: any,

       done: boolean

     }

   }

}

 

이터러블은 for ...of문으로 순회가능하다. 

for(const item of array){

 console.log(item)

}

 

이터러블은 next() 메소드로 value(현재 순회중인 값)와 done(순회완료 여부)를 리턴해준다 

const item array = [1,2,3];

const iter = array[Symbol.iterator]();

 

console.log(iter.next()) 

=> {value: 1, done: false}

console.log(iter.next())

=> {value: 2, done: false}

 

 

 

 

Generator (제너레이터)

- 제너레이터는 이터러블을 생성하는 함수이다, 비동기 처리를 위해서도 사용함

- 이터레이터처럼 next() 호출시마다 이터레이터 1회 순회값 리턴해준다

function* jf(){

   let i = 0;

   while(true) { yield ++i}

}

 

 

 

 

ES6 환경구축 

- 구형 브라우저는 E6모듈 지원하지 않고, 

- 모던 브라우저 역시 지원하지 않는 기능이 있으며, 

- 지원하더라도 트랜스파일링과 번들링이 필요하다 

- 아직 쌩으로 쓰기에는 이슈가 꽤 있다. 

- 그래서 트랜스 파일러(변환기)인 Babel을 사용하고, 

  모듈 번들러(여러 js를 하나의 js로 묶어주는것)로 Webpack을 이용하여 

  ES6+ 환경구축이 필요하다 

- npm으로 babel과 webpack을 설치해준다

- 보통 1+2 로 환경구축해줌

 

1. Bable

- 변환기

- ES6+ 코드를 ES5코드로 트랜스 파일링 해줌

 

2. Webpack

- 번들링(묶음) 

- npm webpack 설치후,

  webpack config.js (환경설정)파일을 생성하고, 설정을 잡아줘야 한다 

+ 추가되는 npm(폴리필, sass 관련) 있으면 config 파일에 추가하고 설정잡아줘야 한다 

   (어떤 파일들을 어디로 output해야 하는지 등등)

 

 

 

 

 

 

출처: poiemaweb

 

1. 1 let, const와 블록 레벨 스코프
2. 2 템플릿 리터럴
3. 3 화살표 함수
4. 4 매개변수 기본값, Rest 파라미터, Spread 문법, Rest/Spread 프로퍼티
5. 5 객체 리터럴 프로퍼티 기능 확장
6. 6 디스트럭처링
7. 7 클래스
8. 8 모듈
9. 9 프로미스
10. 10 7번째 타입 심볼(Symbol)
11. 11 이터레이션과 for...of 문
12. 12 제너레이터와 async/awit
13. 13 Babel과 Webpack을 이용한 ES6 환경 구축 ①
14. 14 Babel과 Webpack을 이용한 ES6 환경 구축 ②