[JS] ES5 / ES6(ECMAScript 2015) 이해하기

해당 글의 목적은 Javascript의 ES5와 ES6에 대한 기능들을 이해하며 사용법을 익히는 목적으로 작성하였습니다.

 

 

1) ES5 / ES6란 무엇인가?

---

💡 ES(ECMAScript)는 ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. ECMAScript 버전은 ES1, ES2, ES3, ES5 및 ES6으로 축약이 되었으며, 2016년부터 새 버전의 이름은 연도별로 지정됩니다(ECMAScript 2016/2017/2018).

 

Javascript ES5	ECMAScript 2009는 JavaScript의 첫 번째 주요 개정판입니다
Javascript ES6	ECMAScript 2015는 JavaScript의 두 번째 주요 개정판입니다. ECMAScript 2015는 ES6 및 ECMAScript 6으로도 알려져 있습니다.

 

[Tip]
💡 그럼 ES6를 쓰는 이유는 무엇일까?
- ES5 기반으로 충분히 개발이 가능하나 소스코드의 축약(간략화) 및 효율성에서는 ES6를 쓰기를 권장한다.

 

 

2) ES6 문법 이해하기

---

1. Javascript 변수(const, let)

---

💡 ES5와 대비하여서 ES6에서는 ‘const’, ‘let’ 변수가 추가되었으며, var 변수보다는 const, let 변수를 '지향'한다.

변수	호이스팅 문제	변수 재할당 가능여부	스코프 영역
var	발생	가능	Function Scope (함수내에서 유효함)
const	미 발생	불가능	Block Scope(중괄호 블록 내에서 유효함)
let	미 발생	가능	Block Scope(중괄호 블록 내에서 유효함)

💡 권장 사항으로는 const, let의 변수를 사용하기를 권장한다.
💡 기존의 ES5내에서 사용하는 var의 변수를 사용하게 되면 '변수 호이 스팅'이 발생할 수 있기에, 이를 방지하기 위해서 좀 더 명시적인 변수 선언을 사용하기를 권장한다.

 

 Reference

const - JavaScript | MDN

 

let - JavaScript | MDN

 

 

2. Arrow Functions

---

💡화살표 함수 표현은 function 표현에 비해 구문이 짧고 자신의 this, arguments을 바인딩하지 않는다. Arrow Function이 등장하기 전까지 모든 함수는 그 함수 자신의 this 값을 꼭 정의했다. 이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지 않다.

함수의 종류	소스의 간결화	return / 중괄호({}) 생략여부	this의 사용여부
function(ES5)	상대적으로 간결하지 않음	사용	사용
Arrow Functions(ES6)	상대적으로 간결하다	미사용	미사용

 

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

 

 Reference

화살표 함수 - JavaScript | MDN

 

 

3. Array 활용

---

💡 ES5에서 for문으로만 구성되었던 Array 배열의 분해라면, ES6내에서는 forEach for ~ of 문을 제공하고 있다.

 

ES5 (for loop)

const array = [ 1, 2, 3, 4 ] 
for(let i = 0; i < array.length; i ++ ){
	console.log(array[i]);
}

 

ES6 문법(forEach loop, for ~ of loop)

const array = [ 1, 2, 3, 4];
array.forEach((item, idx) =>{

});

for(let item of array){
	console.log(item);
}

 

Reference

NodeList.prototype.forEach() - Web API | MDN

 

 

4. 구조 분해 할당(Destructuring assignment)

---

💡 배열이나 JSON, Object 형태에서 속성을 해제하여서 변수로 할당하는 방식을 의미함. 어떤 것을 복사한 이후에 변수로 복사해준다는 의미이다. 이 과정에서 분해 혹은 파괴되지 않는다는 점이 있다.

 

// 1. 배열(array) 구조 내에서 사용
const points = [ 1, 2, 3 ] 

const [x,y,z] = points;
console.log(x,y,z); // 1,2,3

// 2. Object 구조 내에서 사용
const car = {
	type: "suv",
	color: "white",
	model: "x6"
}

const { type, color, model } = car;
console.log(type, color, model);

// 3. Alias 적용
const { type: type1, color: type2, model: type3 } = car;
console.log(type1, type2, type3);

 

5. Spread 연산자

---

💡 배열 혹은 Object 형태에서 기존에 있는 값을 그대로 유지해서 불러오는 방법 병합, 구조 분배 할당(destructuring)등에 다양하게 활용할 수 있다.

 

// 배열에서 사용하는 예시
const points = [1,2,3];
console.log(...points);		//1 2 3

// Object 형태에서 사용하는 예시 
const personalData = {
	nickname: 'JJ',
  	email: 'test@gmail.com',
};

const publicData = {
  age: 26,
} 

const user = {
	...personalData,
	...publicData,
}

 

 

6. 템플릿 리터럴 (Template literals)

---

💡 ES6에서 템플릿 리터럴이라고 불리는 새로운 문자열 표기법이 생겼다. 이전에는 문자열을 표현하기 위해선 ' 또는 "를 사용했는데, 템플릿 리터럴은 백틱을 사용한다. 템플릿 리터럴은 ' 와"를 혼용해서 사용할 수 있다. 그리고 이전에는 줄 바꿈을 표현하기 위해선 \n을 넣어줘야 인식을 했지만 템플릿 리터럴은 있는 그대로 인식한다.

const template = (param) =>{
	// ES5 처리가능 문법
	const text1 = "안녕하세요";
	const test2 = "템플릿 리터럴이 좋은점";
	let result = "";
	
	result = text1 + param + text2;
	result = text1.concat(param).concat(text2);
	
	// ES6 템플릿 리터럴 
	const result = `안녕하세요 ${param} 템플릿 리터럴 좋은점`;
}

 

Reference

Template literals - JavaScript | MDN

 

 

7. import / export

💡  import와 export는 자바스크립트의 코드를 모듈화 할 수 있는 기능이다.

 

Import

import hundred from './ex';
// export default 파일의 경우 함수나 객체를 가저올때 이름을 임의로 지정해서 사용가능.

import { exam1, exam2, animal } from './ex2';
// 여러개의 함수나 객체를 가저올때 {} 사이에 이름을 지정해줌.

import * as R from './test1'
// 모든 함수나 객체를 가저올때 *를 사용하고 as 뒤에 임이의 이름을 지정할 수있음.

 

Export

// export default를 사용하고 파일내에 하나의 함수만 있을때 이름 지정 익명함수 사용가능.
export default function (x) {
  return x * 100;
}

// 익명함수를 사용하며 그결과단순한 값을 반환할때 화살표 함수로 변경 가능.
export default x => x * 100;

Reference

import - JavaScript | MDN

 

 

 

8. 비교문(비교연산자)

---

💡 ES5내에서 동등 비교를 할 때는, ==를 사용하였다면 ES6내에서의 동등 비교는 '==='를 사용하자. 기존에는 타입 비교 없이 동등 비교를 하였다면, ES6는 타입까지 확인하여 동등비교를 수행한다.

const num1 = 1;
const num2 = '1';

// ES5
function fnEqual () {
	if( num1 == num2) {
		 return true;
	} else {
		return false;
	}
}

fnEqual(); // true

// ES6
const fnEqual () =>{
// ES5
	if( num1 == num2) {
		 return true;
	} else {
		return false;
	}
}
fnEqual(); // false

 

 

9. promise , async/await

---

💡 async await 패턴은 비동기식 프로그래밍을 일반적인 동기 프로그램과 유사한 방식으로 구성할 수 있도록 많은 프로그래밍 언어에서 제공하는 기능이다.

• promise: 비동기 작업이 맞이 할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.(then, catch, finally)
• async: 비동기 함수를 만들기 위해서 명시적으로 작성을 한다
• await: async내에서 처리가 완료될 때까지 기다림을 의미한다.

 

// promise
getData()
.then((response) => {
	console.log('## Promise SUCCEED :', response);
})
.catch((e) => {
	console.error('## Promise FAILED :', e);
});

// async / await 
const run = async () => {
const response = await getData();
const response2 = await getDataList();

	console.log(response, response2);
};
run();

Reference

Promise - JavaScript | MDN

 

async function - JavaScript | MDN

 

await - JavaScript | MDN