SlideShare a Scribd company logo
1 of 8
ES6
let, const, block level scope
발표자 : zero86
let / const / block level scope
02
목차
ES6
01
ES6
ES6에 대해서, 간략하게 알아보자.
ES6
ES6 === ECMAScript 2015
EcmaScript 란?
1. JavaScript 코어를 이루는 스크립트 언어를 의미.(스펙)
2. Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어
우리가 흔히 사용하는 JavaScript의 ES 스펙은 ES5(2009) 다.(국내 기준일지도? 현재는 최신문법을 많이 사용한다)
REACT / VUE / ANGULAR 와 같은 프레임워크 및 라이브러리들이 ES6를 기본으로 하고 있습니다.
ES5는 현재 대부분의 브라우저에서 문제없이 지원을 합니다. ES4는 중간에 이슈가 있어서 폐기되고 ES3에서 바로 ES5가 나왔다고 합니다.
ES6
source: https://kangax.github.io/compat-table/es6/ 현재 모던 브라우저에서는 ES6를 기본적으로 지원한다.
ES6
ES6 === ECMAScript 2015
2015년 6월 ES6의 최종안인 ES2015를 발표!
여러가지 추가가 되었다..!
Block level scope variables
const
template Literals
Destructuring assignment
Arrow functions
class
module
promise
default parameter
spread operator
symbol
proxy
등..
ES5를 씹어먹고 편의성과 혁신을..!
let / const /
block level scope
ES6에 추가된 변수선언 키워드 let, const와 특성을 알아보자.
let / const / block level scope
var a = 10;
let b = 200;
var a = 20;
// let b = 300; // has already been declared.
b = 300; //재할당은 가능하지만, var 키워드처럼 중복선언은 허용하지 않는다.
function call() {
if(true) {
var a = '이프문안에 있어!';
let b = 'let b';
console.log(b);
}
console.log(a);
console.log(b); // b is not defined
}
call();
const 변수는 재선언, 재할당 불가능하다.(immutable : 불변성)
반드시, 초기에 정의할 때 값을 할당해줘야 한다.
객체를 const로 참조했을 때, 객체 속성값을 변경할 수 없는 것은
아니다. 참조값을 변하게 하지 않는 것이지 객체 자체를 불변성 있게
freeze 하는거랑은 다르다.
var 변수는 자유롭다. 그래서 막 변경이 될 위험이 있다. let 변수는
var 와 같은 선언방식을 막고 있다. 재정의 될수는 없지만 재할당은
가능하다.
var 변수는 function level scope 를 가지게 된다.
let, const 는 block level scope 를 가지고 있다. 여기서 block 이란
if, for 같은 문법으로 지정된 {} 블록을 의미한다.
const a = 100;
const b = 0;
// b = 10; // Assignment to constant variable
const c = {
num : 9999
};
c.num = 999;
console.log(c.num)

More Related Content

What's hot

Clojure/Chapter3
Clojure/Chapter3Clojure/Chapter3
Clojure/Chapter3destinycs
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4현찬 양
 
More effective c++ 항목30부터
More effective c++ 항목30부터More effective c++ 항목30부터
More effective c++ 항목30부터Dong Chan Shin
 
More effective c++ 2
More effective c++ 2More effective c++ 2
More effective c++ 2현찬 양
 
Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약Nam Hyeonuk
 
클래스의 추가 지식
클래스의 추가 지식클래스의 추가 지식
클래스의 추가 지식. Ruvendix
 
Effective c++ chapter3, 4 요약본
Effective c++ chapter3, 4 요약본Effective c++ chapter3, 4 요약본
Effective c++ chapter3, 4 요약본Dong Chan Shin
 
연산자 오버로딩
연산자 오버로딩연산자 오버로딩
연산자 오버로딩. Ruvendix
 
Effective c++ 2
Effective c++ 2Effective c++ 2
Effective c++ 2현찬 양
 
More effective c++ 1
More effective c++ 1More effective c++ 1
More effective c++ 1현찬 양
 
More effective c++ 3
More effective c++ 3More effective c++ 3
More effective c++ 3현찬 양
 
Effective c++ 1
Effective c++ 1Effective c++ 1
Effective c++ 1현찬 양
 
Google coding guide
Google coding guideGoogle coding guide
Google coding guide. Ruvendix
 
Javascript 를 perl에서 mini-language 로 사용하기
Javascript 를 perl에서 mini-language 로 사용하기Javascript 를 perl에서 mini-language 로 사용하기
Javascript 를 perl에서 mini-language 로 사용하기HyunSeung Kim
 
여러 생성자
여러 생성자여러 생성자
여러 생성자. Ruvendix
 
C++ 2학기 수행평가
C++ 2학기 수행평가C++ 2학기 수행평가
C++ 2학기 수행평가Jaehee Lee
 
effective c++ chapter 3~4 정리
effective c++ chapter 3~4 정리effective c++ chapter 3~4 정리
effective c++ chapter 3~4 정리Injae Lee
 

What's hot (20)

5 6 1
5 6 15 6 1
5 6 1
 
Clojure/Chapter3
Clojure/Chapter3Clojure/Chapter3
Clojure/Chapter3
 
Effective c++ 4
Effective c++ 4Effective c++ 4
Effective c++ 4
 
More effective c++ 항목30부터
More effective c++ 항목30부터More effective c++ 항목30부터
More effective c++ 항목30부터
 
More effective c++ 2
More effective c++ 2More effective c++ 2
More effective c++ 2
 
Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약Effective c++ chapter 1,2 요약
Effective c++ chapter 1,2 요약
 
클래스의 추가 지식
클래스의 추가 지식클래스의 추가 지식
클래스의 추가 지식
 
ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차
 
Effective c++ chapter3, 4 요약본
Effective c++ chapter3, 4 요약본Effective c++ chapter3, 4 요약본
Effective c++ chapter3, 4 요약본
 
연산자 오버로딩
연산자 오버로딩연산자 오버로딩
연산자 오버로딩
 
Effective c++ 2
Effective c++ 2Effective c++ 2
Effective c++ 2
 
More effective c++ 1
More effective c++ 1More effective c++ 1
More effective c++ 1
 
More effective c++ 3
More effective c++ 3More effective c++ 3
More effective c++ 3
 
Effective c++ 1
Effective c++ 1Effective c++ 1
Effective c++ 1
 
Google coding guide
Google coding guideGoogle coding guide
Google coding guide
 
Javascript 를 perl에서 mini-language 로 사용하기
Javascript 를 perl에서 mini-language 로 사용하기Javascript 를 perl에서 mini-language 로 사용하기
Javascript 를 perl에서 mini-language 로 사용하기
 
여러 생성자
여러 생성자여러 생성자
여러 생성자
 
C++ 2학기 수행평가
C++ 2학기 수행평가C++ 2학기 수행평가
C++ 2학기 수행평가
 
Mongodb tip42 50
Mongodb tip42 50Mongodb tip42 50
Mongodb tip42 50
 
effective c++ chapter 3~4 정리
effective c++ chapter 3~4 정리effective c++ chapter 3~4 정리
effective c++ chapter 3~4 정리
 

Similar to ES6-01

Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Park Jonggun
 
자바스크립트 핵심 가이드
자바스크립트 핵심 가이드자바스크립트 핵심 가이드
자바스크립트 핵심 가이드재원 변
 
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 exportHan JaeYeab
 
7가지 동시성 모델 - 6장. 순차 프로세스 통신
7가지 동시성 모델 - 6장. 순차 프로세스 통신7가지 동시성 모델 - 6장. 순차 프로세스 통신
7가지 동시성 모델 - 6장. 순차 프로세스 통신Hyunsoo Jung
 
JavaEE6 - 설계 차원의 단순성
JavaEE6 - 설계 차원의 단순성JavaEE6 - 설계 차원의 단순성
JavaEE6 - 설계 차원의 단순성Jay Lee
 
[ES6] 7. Template literal
[ES6] 7. Template literal[ES6] 7. Template literal
[ES6] 7. Template literalHan JaeYeab
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Park Jonggun
 
04. interface in typescript
04. interface in typescript04. interface in typescript
04. interface in typescriptHan JaeYeab
 
[ES6] 5. Destructuring
[ES6] 5. Destructuring[ES6] 5. Destructuring
[ES6] 5. DestructuringHan JaeYeab
 
자바9 특징 (Java9 Features)
자바9 특징 (Java9 Features)자바9 특징 (Java9 Features)
자바9 특징 (Java9 Features)Chang-Hwan Han
 
모어 이펙티브 c++ 1,2장 스터디
모어 이펙티브 c++ 1,2장 스터디모어 이펙티브 c++ 1,2장 스터디
모어 이펙티브 c++ 1,2장 스터디quxn6
 

Similar to ES6-01 (20)

[ES6] 6. Class
[ES6] 6. Class[ES6] 6. Class
[ES6] 6. Class
 
Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초Start IoT with JavaScript - 1.기초
Start IoT with JavaScript - 1.기초
 
자바스크립트 핵심 가이드
자바스크립트 핵심 가이드자바스크립트 핵심 가이드
자바스크립트 핵심 가이드
 
[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export[ES6] 11. Modularization, import와 export
[ES6] 11. Modularization, import와 export
 
4-1. javascript
4-1. javascript4-1. javascript
4-1. javascript
 
C++ api design 품질
C++ api design 품질C++ api design 품질
C++ api design 품질
 
7가지 동시성 모델 - 6장. 순차 프로세스 통신
7가지 동시성 모델 - 6장. 순차 프로세스 통신7가지 동시성 모델 - 6장. 순차 프로세스 통신
7가지 동시성 모델 - 6장. 순차 프로세스 통신
 
Javascript
JavascriptJavascript
Javascript
 
JavaEE6 - 설계 차원의 단순성
JavaEE6 - 설계 차원의 단순성JavaEE6 - 설계 차원의 단순성
JavaEE6 - 설계 차원의 단순성
 
ES6 for Node.js Study
ES6 for Node.js StudyES6 for Node.js Study
ES6 for Node.js Study
 
[ES6] 7. Template literal
[ES6] 7. Template literal[ES6] 7. Template literal
[ES6] 7. Template literal
 
PL/SQL - 10g Release1
PL/SQL - 10g Release1PL/SQL - 10g Release1
PL/SQL - 10g Release1
 
ECMA Script
ECMA ScriptECMA Script
ECMA Script
 
Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수Start IoT with JavaScript - 6.함수
Start IoT with JavaScript - 6.함수
 
(C#,닷넷구조체강좌)구조체 개요 및 간단한 예제_닷넷,C#, WPF, 자마린실무교육
(C#,닷넷구조체강좌)구조체 개요 및 간단한 예제_닷넷,C#, WPF, 자마린실무교육(C#,닷넷구조체강좌)구조체 개요 및 간단한 예제_닷넷,C#, WPF, 자마린실무교육
(C#,닷넷구조체강좌)구조체 개요 및 간단한 예제_닷넷,C#, WPF, 자마린실무교육
 
04. interface in typescript
04. interface in typescript04. interface in typescript
04. interface in typescript
 
[ES6] 5. Destructuring
[ES6] 5. Destructuring[ES6] 5. Destructuring
[ES6] 5. Destructuring
 
자바9 특징 (Java9 Features)
자바9 특징 (Java9 Features)자바9 특징 (Java9 Features)
자바9 특징 (Java9 Features)
 
모어 이펙티브 c++ 1,2장 스터디
모어 이펙티브 c++ 1,2장 스터디모어 이펙티브 c++ 1,2장 스터디
모어 이펙티브 c++ 1,2장 스터디
 
Java script
Java scriptJava script
Java script
 

More from ChangHyeon Bae

호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFEChangHyeon Bae
 
JavaScript 실행컨텍스트와 클로저
JavaScript 실행컨텍스트와 클로저JavaScript 실행컨텍스트와 클로저
JavaScript 실행컨텍스트와 클로저ChangHyeon Bae
 
WAS와 웹서버 간단 정리
WAS와 웹서버 간단 정리WAS와 웹서버 간단 정리
WAS와 웹서버 간단 정리ChangHyeon Bae
 
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.ChangHyeon Bae
 
OOP - Object Oriendted Programing
OOP - Object Oriendted ProgramingOOP - Object Oriendted Programing
OOP - Object Oriendted ProgramingChangHyeon Bae
 
TDD - Test Driven Development
TDD - Test Driven DevelopmentTDD - Test Driven Development
TDD - Test Driven DevelopmentChangHyeon Bae
 
DI - Dependency Injection
DI - Dependency InjectionDI - Dependency Injection
DI - Dependency InjectionChangHyeon Bae
 
CDN - Content Delivery Network
CDN - Content Delivery NetworkCDN - Content Delivery Network
CDN - Content Delivery NetworkChangHyeon Bae
 

More from ChangHyeon Bae (14)

호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE호이스팅, 클로저, IIFE
호이스팅, 클로저, IIFE
 
ES6-02
ES6-02ES6-02
ES6-02
 
javascript03
javascript03javascript03
javascript03
 
javascript02
javascript02javascript02
javascript02
 
Java memory
Java memoryJava memory
Java memory
 
JavaScript 실행컨텍스트와 클로저
JavaScript 실행컨텍스트와 클로저JavaScript 실행컨텍스트와 클로저
JavaScript 실행컨텍스트와 클로저
 
WAS와 웹서버 간단 정리
WAS와 웹서버 간단 정리WAS와 웹서버 간단 정리
WAS와 웹서버 간단 정리
 
REST Concept
REST ConceptREST Concept
REST Concept
 
Srping data rest
Srping data restSrping data rest
Srping data rest
 
Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.Angular 살짝 해보고 발표.
Angular 살짝 해보고 발표.
 
OOP - Object Oriendted Programing
OOP - Object Oriendted ProgramingOOP - Object Oriendted Programing
OOP - Object Oriendted Programing
 
TDD - Test Driven Development
TDD - Test Driven DevelopmentTDD - Test Driven Development
TDD - Test Driven Development
 
DI - Dependency Injection
DI - Dependency InjectionDI - Dependency Injection
DI - Dependency Injection
 
CDN - Content Delivery Network
CDN - Content Delivery NetworkCDN - Content Delivery Network
CDN - Content Delivery Network
 

ES6-01

  • 1. ES6 let, const, block level scope 발표자 : zero86
  • 2. let / const / block level scope 02 목차 ES6 01
  • 4. ES6 ES6 === ECMAScript 2015 EcmaScript 란? 1. JavaScript 코어를 이루는 스크립트 언어를 의미.(스펙) 2. Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 우리가 흔히 사용하는 JavaScript의 ES 스펙은 ES5(2009) 다.(국내 기준일지도? 현재는 최신문법을 많이 사용한다) REACT / VUE / ANGULAR 와 같은 프레임워크 및 라이브러리들이 ES6를 기본으로 하고 있습니다. ES5는 현재 대부분의 브라우저에서 문제없이 지원을 합니다. ES4는 중간에 이슈가 있어서 폐기되고 ES3에서 바로 ES5가 나왔다고 합니다.
  • 5. ES6 source: https://kangax.github.io/compat-table/es6/ 현재 모던 브라우저에서는 ES6를 기본적으로 지원한다.
  • 6. ES6 ES6 === ECMAScript 2015 2015년 6월 ES6의 최종안인 ES2015를 발표! 여러가지 추가가 되었다..! Block level scope variables const template Literals Destructuring assignment Arrow functions class module promise default parameter spread operator symbol proxy 등.. ES5를 씹어먹고 편의성과 혁신을..!
  • 7. let / const / block level scope ES6에 추가된 변수선언 키워드 let, const와 특성을 알아보자.
  • 8. let / const / block level scope var a = 10; let b = 200; var a = 20; // let b = 300; // has already been declared. b = 300; //재할당은 가능하지만, var 키워드처럼 중복선언은 허용하지 않는다. function call() { if(true) { var a = '이프문안에 있어!'; let b = 'let b'; console.log(b); } console.log(a); console.log(b); // b is not defined } call(); const 변수는 재선언, 재할당 불가능하다.(immutable : 불변성) 반드시, 초기에 정의할 때 값을 할당해줘야 한다. 객체를 const로 참조했을 때, 객체 속성값을 변경할 수 없는 것은 아니다. 참조값을 변하게 하지 않는 것이지 객체 자체를 불변성 있게 freeze 하는거랑은 다르다. var 변수는 자유롭다. 그래서 막 변경이 될 위험이 있다. let 변수는 var 와 같은 선언방식을 막고 있다. 재정의 될수는 없지만 재할당은 가능하다. var 변수는 function level scope 를 가지게 된다. let, const 는 block level scope 를 가지고 있다. 여기서 block 이란 if, for 같은 문법으로 지정된 {} 블록을 의미한다. const a = 100; const b = 0; // b = 10; // Assignment to constant variable const c = { num : 9999 }; c.num = 999; console.log(c.num)