20
part1. ES2015 -hckrmoon

Part 1. es2015

Embed Size (px)

Citation preview

Page 1: Part 1. es2015

part1. ES2015

-hckrmoon

Page 2: Part 1. es2015

- let

● 블록 스코프 변수 (block scoped variable) 이다.● var 가 함수 스코프 변수 (function scoped variable) 이라는 점에서 대비된다.● 블록 단위안에서도 hoisting 되지 않는다.● 같은 스코프에서 재선언이 불가능하다.

Page 3: Part 1. es2015

기존의 var 로 선언된 변수 a 는 block 밖에서도 접근이 가능하지만, let 으로 선언된 변수 b 는 그와 다르게 block 밖에서 접근할 수 없습니다.

Page 4: Part 1. es2015

a 변수는 선언되었지만 값이 세팅되어 있지 않은 상태이고, b 는 변수자체가 아직 선언되지 않은 상태입니다. 고로 let 은 hoisting 되지 않는다는 것을 확인할 수 있습니다.

Page 5: Part 1. es2015

기존의 var 로 선언된 변수로 var 로 재선언하면 해당 변수가 덮어쓰여졌습니다.하지만 let 을 통해 선언한 변수는 해당 scope 에서 재선언할 수 없습니다.

Page 6: Part 1. es2015

- const

● 읽기 전용 상수이다.● 객체를 할당하면 참조값이 상수에 할당되므로 객체는 프로퍼티는 변경가능하다.

● const 또한 block scoping을 따르며 hoisting 되지 않는다.

Page 7: Part 1. es2015

const 로 선언된 상수 a 에 재할당을 시전했지만 에러가 뜨면서 실패합니다. 읽기전용 상수임을 알 수 있습니다.

Page 8: Part 1. es2015

const 를 이용하여 상수 a 를 선언하여 객체를 할당했습니다. 이때 a 에 할당된 값은 객체의 참조값이므로 property 의 값이 변해도 해당 참조값은 변하지 않습니다.고로 상수로 선언되어도 객체는 가변상태입니다.

Page 9: Part 1. es2015

- collection

● Set● WeakSet● Map● WeakMap

Page 10: Part 1. es2015

Set

- Set 은 유일한 값들로 구성된 collection 이며 삽입한 순서대로 원소들을 갖는다.- 1을 두번 추가했지만 중복값은 자동 삭제되어 s의 사이즈는 2이다.- iterable 객체이다.

Page 11: Part 1. es2015

WeakSet

- Weak 은 Weakly 하게 값을 참조한다는 뜻인데 WeakSet 이 갖는 객체의 참조값이 다른 곳에서 참조되지 않으면 해당 객체는 garbage collect 대상이다.

- 객체 참조값만을 가진다.- iterable 객체가 아니다.

Page 12: Part 1. es2015

Map

- Map 은 key, value 쌍을 모아놓은 컬렉션으로 삽입한 순서대로 원소들을 갖는다.- iterable 객체이다.

Page 13: Part 1. es2015

WeakMap

- WeakSet 과 비슷한 개념으WeakMap 의 key 가 약하게 참조된다.- key 는 객체 참조값 만을 가진다.- iterable 객체가 아니다.

Page 14: Part 1. es2015

- arrow function

● 보다 간결한 구문을 지닌 익명함수이다.● 자기 고유의 this 를 갖지 않고, 외부 스코프의 this 를 그대로 가진다 (lexical

binding)● 화살표 함수를 객체 생성자로 사용할 수 없다.

Page 15: Part 1. es2015

- 기존의 function syntax 보다 훨씬 간결해졌다 .- 인자가 하나일 때에만 인자를 감싸는 괄호를 생략할 수 있다.- 객체 리터럴을 리턴할때에는 괄호를 감싸줘야 한다.

Page 16: Part 1. es2015

Lexical binding

Page 17: Part 1. es2015

javascript 는 객체 지향 언어라고 하면서도 클래스 문법도 지원하지 않아 객체 모델링이나 상속등을 구현하기가 까다로웠다 .

그래서 es2015 부터는 상속이나 생성자와 같은 표현과 훨씬 심플한 구문을 제공한다.

Page 18: Part 1. es2015

- class

● 기존 모델에 단지 새롭게 추가된 구문일 뿐, 전혀 새로운 객체 지향 모델이 아니다.

● 생성자나 상속의 좀 더 간단하고 명확한 구문이 제공된다.

Page 19: Part 1. es2015

- 생성자는 constructor 로 표현된다.- 클래스 바디는 중괄호 안에 두고 여기에 메소드를 function 키워드 없이 정의한다.- 메소드는 prototype 프로퍼티에 추가된다.

Page 20: Part 1. es2015

- class 는 extends 구문으로 다른 class 를 상속한다.- 자식 클래스에 constructor 가 없으면 부모의 그것이 자동으로 호출된다.- 생성자에서 super 키워드를 통해 상속 계층을 구현한다. this 보다 먼저 사용하지 않으면 예외가 발생한다.- static 키워드를 통해 정적 메소드를 만들 수 있다. 이 메소드는 클래스 prototype 프로퍼티가 아닌 클래스 자체 메소드다. (유틀리티 함수 작성에 쓰인다.)