[#JavaScript] ECMA Script, ES5와 ES6의 차이, ES6 문법 특징

 

 

 

 

 

ECMA Script(European Computer Manufacturer's Association Script)

 

정보와 통신 시스템을 위한 국제적 표준화 기구 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어

ECMAScript는 JavaScript와 같은 스크립트 언어의 표준을 말한다 

ECMAScript는 스크립트 언어가 준수해야 하는 규칙, 세부 사항 및 지침을 제공한다

JavaScript는 ECMAScript를 기반으로 하며 ECMAScript 사양을 준수하는 범용 스크립팅 언어다 

ECMAScript 언어 중 가장 인기 있는 언어로 알려져 있다

 

 

ES5(2009)

 

ES2015(ES6)

 

 

BABEL

JavaScript 컴파일러

ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있도록 이전 버전과 호환되는 버전으로 변환하는 데 주로 사용한다 = 다음 버전의 JS 문법을 현재 사용가능한 문법으로 변환해 준다

 

 

 

ES6 문법 특징

 

Default Parameters in ES6 Template Literals in ES6 Multi-line Strings in ES6 Destructuring Assignment in ES6 Enhanced Object Literals in ES6 Arrow Functions in ES6 Promises in ES6 Block-Scoped Constructs Let and Const Classes in ES6 Modules in ES6

 

① Arrow Function 

 

this, prototype, arguments 세 가지가 없다

익명 함수로만 사용할 수 있다

lambda식과 같은 방식

 

⑴ this

일반 함수는 호출할 때 어떻게 호출되는지에 따라 this에 바인딩할 객체가 동적으로 결정되지만, 화살표 함수는 선언할 때 this에 바인딩할 객체가 정적으로 결정된다 화살표 함수의 this는 항상 상위 scope의 this를 말한다 자신만의 this를 생성하지 않는 익명 함수다 (Lexical this)

ES5
var _this = this
$('.btn').click(function(event){
  _this.sendData()
})
ES6
$('.btn').click((event) =>{
  this.sendData()
})

 

⑵ prototype

생성자 함수로 사용할 수 없다 new 사용 시 오류 발생한다

var Foo = () => {};
var foo = new Foo();		TypeError

 

⑶ arguments

매개변수를 지정하지 않아도 arguments 프로퍼티가 함수에 자동으로 생성되어 사용 가능했었으나, arguments가 없어졌다 대신 args가 생겼다

const myFunction = () => {
	console.log(arguments);		Uncaught ReferenceError
}

const myFunction = (...args) => {
	console.log(args);		
}

myFunction(1, 2, 3, 4)		[1, 2, 3, 4]

 

 

@ 호이스팅(hoisting) 될 수 없다

호이스팅(hoisting)

= 들어올리다

코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것

선언 부분만 호이스팅 한다 할당 부분은 호이스팅하지 않는다

함수 내에서 선언한 함수 범위(function scope)의 변수는, 해당 함수 최상위로 호이스팅 된다 

function hoistingTest() {
   console.log(x);			// undefined
   var x = 100;
   console.log(x);			// 100
}

 

첫 번째 콘솔 로그에 출력된 undefined는 x의 값이 할당되지 않았다는 의미다

x값 할당 후 두 번째 콘솔 로그에는 할당한 값이 출력된다

 

함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는, script 단위의 최상위로 호이스팅 된다

hoistingTest();

function hoistingTest() {
   console.log("test");
}

hoistingTest() 함수 위에서 먼저 호출해도 "test"가 콘솔 로그에 출력되는 것을 볼 수 있다

 

hoisting();

const hoisting = () => {
   console.log("test");
}

=> Error: Cannot access 'hoisting' before initialization

 

하지만 arrow function는 호이스팅되지 않기 때문에 이와 같이 함수 위에서 먼저 호출하면 에러가 발생한다

 

 

arrow funciton을 사용하면 안 되는 경우

 

⑴ 객체의 메소드에서 사용 시

arrow function은 상위 scope의 this를 계승하기 때문에 이 경우 전역 객체를 가리키게 된다

const person = {
  name: 'Lee',
  sayHello: () => console.log(`Hi ${this.name}`)
};
 
person.sayHello();		Hi undefined

 

⑵ addEventListener의 콜백 함수

const btn = document.getElementById('btn');
 
btn.addEventListener('click', () => {
    console.log(this);			window    
});

 

 

② Template Literal

ES5
console.log('Hi' + user + 'Today is' + date);
ES6
console.log(`Hi ${user} Today is ${date}`);

` 백틱(back-ticked)으로 문자열과 값을 간단하게 사용 가능하다

 

 

③ Default Parameters

인자가 없거나 'undefined'인 경우에 들어갈 기본값을 설정해 놓아야 한다

ES6에서는 기본 매개 변수(Default Parameters)를 제공하고, 매개변수가 없을 경우 지정한 기본값을 인자로 전달한다

ES5
function sayHello(name, greeting) {
   name = (typeof name !== 'undefined') ? name : 'Student';
   greeting = (typeof greeting !== 'undefined') ? greeting : 'Welcome'; 
   
   return `${greeting} ${name}!`;
}
ES6
function sayHello(name = 'Student', greeting= 'Hi') {
   return `${greeting} ${name}!`;
}

greet();		Hi Student!

 

 

④ Multi-line Strings

` 백틱을 이용해서 여러 줄의 문자열을 처리하기 수월해졌다

ES5
var content = 'Hi,\n\t'
	+ 'My name is SHAB\n\t'
ES6
var content = `Hi,
	My name is SHAB`

 

 

⑤ Destructuring Assignment 

비구조화 할당, 배열이나 객체의 요소를 해체하여 별개의 변수로 추출할 수 있다

ES5
var res = $('body').data(),
   first = res.first,
   second = res.second
ES6
var { first, second } = $('body').data();

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a);			10
console.log(b);			20
console.log(rest);		[30, 40, 50]

 

 

⑥ Enhanced Object Literals

객체 정의 방식이 개선됐다

 

⑴ 속성과 값이 같으면 1개만 기입 가능

var language = 'js
var langs = {
  language: language,		ES5
  language			ES6
};
console.log(josh);	{language: "javascript"}

 

⑵ 속성에 함수 정의할 때 function 생략 가능

const shab = {
  coding() {		coding: function() { 생략
    console.log('Hello World');
  }
};
shab.coding();		Hello World

 

 

⑦ Promises

비동기를 위한 객체, 어떤 일의 진행 상태를 나타내는 객체로 상태와 값이라는 속성을 갖고 있다 resolve, reject를 호출하여 진행 상태를 결정할 수 있다 promise의 값은 resolve, reject를 호출할 때 넘긴 인자에 의해 결정된다 then(), catch()는 일의 진행 상태를 나타내는 객체다 promise가 fullfilled일 때 then()에 등록한 함수를 실행하고, promise가 rejected일 때는 아무것도 하지 않는다

 

⑴ 동기

요청과 응답이 동시에 일어난다 설계가 간단하고 직관적이지만 응답이 있을 때까지 대기해야 한다

ex) 은행 계좌이체

 

⑵ 비동기

요청과 응답이 동시에 일어나지 않는다 응답이 오기 전까지 다른 요청이나 작업이 가능하다

 

ES5
setTimeout(function(){
  console.log('Yay!')
}, 1000)
ES6
var wait1000 = () => new Promise((resolve, reject) => {
   setTimeout(resolve, 1000)
   }
)
wait1000()
    .then(function() {
        console.log('WOW!')
        return wait1000()
    })
    .then(function() {
        console.log('WOWWOW!')
    });

 

 

⑧ Block-Scoped Constructs Let and Const

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)지만, Java Script는 함수 레벨 스코프(Function-level scope)를 따른다 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let, const를 제공한다

let vs const

재할당 자유롭다 vs 상수를 위해 사용, 재할당이 안 된다

 

⑴ 블록 레벨 스코프(Block-level scope)

모든 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하고 코드 블록 외에서는 참조할 수 없다

 

⑵ 함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다

 

ES6에서 var 키워드는 사용하지 않도록 하고, const 키워드를 사용하도록 하자

 

 

⑨ Classes

new 키워드로 Class 생성 가능, constructor() 생성자 함수로 속성 설정 가능, 메서드 정의, 상속, 부모 메서드 호출 가능한 Class를 사용할 수 있다 프로토 타입과 클래스가 다르지 않다 = 프로토 타입으로 상속을 구현했을 경우데 클래스 문법을 사용할 수 있다

class Note {
	constructor(text) {	
		this.text = text;
	}
}

 

 

⑩ Modules

import sayHi from "module.js";
sayHi("hi");

import * as myModule from "module.js";
myModule.sayHi("hi");

import { sayHi as A } from "module.js";

 

 

 

 

 

 

참고 사이트

https://webapplog.com/es6/

Top 10 ES6 Features Every Busy JavaScript Developer Must Know