먼저, ES란?
ECMA Script (European Computer Manufacture's Association Script)
ECMA-262
기술 규격에 의해 정의된 범용 스크립트 언어이다JavaScript
와 같은 스크립트 언어의 표준을 말한다JavaScript
는 ECMA Script
를 기반으로 하며 ECMA Script
사양을 준수하는 범용 스크립트 언어이다ES5
는 2009년, ES6
은 2015년에 출시되었다let
, const
키워드 추가var
키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능하였다let
, const
키워드가 추가되었다// var는 재선언, 재할당 가능
var a = 1;
var a = 2;
a = 3;
// let은 재할당만 가능
let b = 1;
// let b =2; Identifier 'b' has already been declared
b = 3;
// const는 둘 다 불가능
const c = 1;
// const c = 2; Identifier 'c' has already been declared
// c = 3; Assignment to constant variable
// 스코프의 차이
// var은 블록 레벨 스코프에서는 접근가능 하지만 함수 레벨 스코프에서는 접근 불가능
{
var a = 1;
}
function funVar() {
var b = 1;
}
console.log(a); // 1
funVar();
console.log(b); // b is not defined
// let은 블록, 함수 레벨 스코프 둘 다 접근 불가능
{
let a = 1;
}
function funcLet() {
let b = 1;
}
console.log(a) // a is not defined
funcLet();
console.log(b) // b is not defined
// const도 블록, 함수 레벨 스코프 둘 다 접근 불가능
{
const a = 1;
}
function funcConst() {
const b = 1;
}
console.log(a) // a is not defined
funcConst();
console.log(b) // b is not defined
Arrow function
추가Arrow function (화살표 함수)
가 추가되어 함수를 간결하게 나타낼 수 있다Arrow function
은 lexical this
를 따른다this
는 항상 상위 scope의 this
를 말한다. 자신만의 this
를 생성하지 않는 익명 함수다(lexical this
)return
도 생략 가능하다this
, prototype
, arguments
세 가지가 없다lambda
식과 같은 방식// ES5
function sum (a,b) {
return a+b;
}
// ES6
const sum = (a,b) => a+b;
2-(1) this
// ES5
var _this = this
$('.btn').click(function(event){
_this.sendData()
})
// ES6
$('.btn').click((event) => {
this.snedData()
})
this
에 바인딩할 객체가 동적으로 결정된다this
에 바인딩할 객체가 정적으로 결정된다2-(2) prototype
var Foo = () => {};
var foo = new Foo();
// TypeError
2-(3) arguments
const myFunction = () => {
console.log(arguments);
}
//Uncaught ReferenceError
const myFunction = (...args) => {
console.log(args);
}
myFunction(1,2,3,4)
// [1,2,3,4]
Arrow function
을 사용하면 안 되는 경우const person = {
name: 'Lee',
sayHello: () => console.log(`Hi $(this.name)`)
};
person.sayHello();
// Hi undefined
Arrow function
은 상위 scope의 this를 계승하기 때문에 이 경우에는 전역 객체를 가리키게 된다addEventListner
의 콜백 함수const btn = document.getElementById('btn');
btn.addEventListner('click'¸ () => {
console.log(this);
});
// window
// ES5
console.log('Hi' + user + 'Today is' date);
// ES6
console.log(`Hi ${user} Today is ${date}`);
${}
중괄호 앞에 달러 표시를 통해 자바스크립트 표현식을 삽입 가능하게 한다// ES5
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
var fourAgreements = 'You have the right to be you.\n\
You can only be you when you do your best.'
// ES6
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.````
- 백틱 `` (back-ticked)을 이용해서 여러 줄의 문자열을 처리하기 수월해졌다
### 5. Destructuring Assignment
```javascript
// ES5
var res = $('body').data(),
first = res.first,
second = res.second
// ES6
var { first, second } = [10, 20, 30, 40, 50];
console.log(a);
// 10
console.log(b);
// 20
console.log(rest);
//[30,40,50]
// array destructuring
const arr = [1, 2, 3];
const [one, two, three] = arr;
// object destructuring
const obj = { firstName: 'Gildong', lastName: 'Hong' };
const { lastName, firstName } = obj;
6-(1)
var language = 'js
var langs = {
language: language, // ES5
language // ES6
};
6-(2)
const shab = {
coding() {
coding: function()
console.log('Hello World');
}
}
shab.coding();
// Hello World
promise
의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다then()
, catch()
는 일의 진행 상태를 나타내는 객체이다7-(1) 동기
7-(2) 비동기
// ES5
setTimeout(function() {
console.log('Wow!')
}, 1000)
// ES6
var wait1000 = () => new Promise((resolve, reject) => {
setTimeout(resolve, 1000)
}
)
wait1000()
.then(function() {
console.log('Yay!')
return wait1000()
})
.then(function() {
console.log('YayYay!')
});
// ES5
var bmi = function (height, weight) {
var height = height || 184;
var weight = weight || 84;
return weight / (height * height / 10000);
}
// ES6
const bmi = function (height = 184, weight = 84) {
return weight / (height * height /10000);
}
undefined
인 경우에 들어갈 기본값을 설정해 놓아야 한다// ES5
var service = require('module.js')
console.log(service.port) // 3000
// ES6
import {port, getAccounts} from 'module'
console.log(port) // 3000
import * as service from 'module'
console.log(service.port) // 3000
class Note {
constructor(text) {
this.text = text;
}
}
const text = 'Hello World Hong gil dong';
text.includes('Hong')
// true
text.startsWith('Hello')
// true
text.endsWith('dong')
// true
참고:
https://webapplog.com/es6/
https://poiemaweb.com/es6-block-scope