먼저, ES란?
ECMA Script (European Computer Manufacture's Association Script)
- 정보와 통신 시스템을 위한 국제적 표준화 기구 ECMA International에 의해 제정된
ECMA-262기술 규격에 의해 정의된 범용 스크립트 언어이다 - ECMA-262 Github
JavaScript와 같은 스크립트 언어의 표준을 말한다JavaScript는ECMA Script를 기반으로 하며ECMA Script사양을 준수하는 범용 스크립트 언어이다- 뒤에 숫자는 버전을 뜻하는데
ES5는 2009년,ES6은 2015년에 출시되었다
ES6에 추가된 기능과, ES5 와의 차이점은?
1. 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 defined2. 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();
// TypeError2-(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 undefinedArrow function은 상위 scope의 this를 계승하기 때문에 이 경우에는 전역 객체를 가리키게 된다
addEventListner의 콜백 함수
const btn = document.getElementById('btn');
btn.addEventListner('click'¸ () => {
console.log(this);
});
// window3. Template Literal
// ES5
console.log('Hi' + user + 'Today is' date);
// ES6
console.log(`Hi ${user} Today is ${date}`);- 백틱 ``(back-ticked) 으로 문자열과 값을 간단하게 사용 가능하다
${}중괄호 앞에 달러 표시를 통해 자바스크립트 표현식을 삽입 가능하게 한다
4. Multi-line string
// 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. Enhanced Object Literals
6-(1)
var language = 'js
var langs = {
language: language, // ES5
language // ES6
};- 속성과 값이 같으면 1개만 기입 가능
6-(2)
const shab = {
coding() {
coding: function()
console.log('Hello World');
}
}
shab.coding();
// Hello World- 속성에 함수 정의할 때 function 생략 가능
7. Promises
- 비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값 이라는 속성을 갖고 있다
- resolve, reject를 호출하여 진행 상태를 결정할 수 있다
promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다then(),catch()는 일의 진행 상태를 나타내는 객체이다- promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected 일 때는 아무것도 하지 않는다
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!')
});- 요청과 응답이 동시에 일어나지 않는다
- 응답이 오기 전까지 다른 요청이나 작업이 가능하다
8. Default parameter 추가
// 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인 경우에 들어갈 기본값을 설정해 놓아야 한다 - ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다
9. Module
// 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- 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화 시키고, API 부분만 외부에 노출시킨 코드들이다
- 모듈 스코프를 가지며, export, import 키워드로 사용한다
10. Class
class Note {
constructor(text) {
this.text = text;
}
}- 객체 생성 방식 중 하나, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍이다
- 자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각한다 (생성자 함수)
- 단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작하게 된다
11. string method (includes, startsWith, endsWith)
const text = 'Hello World Hong gil dong';
text.includes('Hong')
// true
text.startsWith('Hello')
// true
text.endsWith('dong')
// true- includes (포함되어 있는지), startsWith (시작되는지), endsWith (끝나는지)
- true/false 값을 리턴하며 문자열 메서드들로 검사 로직을 수행할 수 있다
- ex) 이메일에 포함되는지, 홍 씨로 시작하는지, 끝나는지 등등
참고:
https://webapplog.com/es6/
https://poiemaweb.com/es6-block-scope
성장중인 개발자