[Javascript] ES6(ECMAScript 2015)란 무엇인가

Javascript를 프로그래밍하다 보면 ES6 또는 ECMAScript2015라는 내용을 보신 적이 있을 겁니다. 혹은 알지 못해도 ES6  이상의 버전으로 프로그래밍을 하고 있을 수도 있습니다.

 

 

이번 포스팅에서는 ES6가 무엇인지 간략하게 알아보도록 하겠습니다.

---

Javascript ES6 (EMCAScript 2015) 버전

Javascript는 ES6 (EMCAScript2015) 버전을 기점으로 사용방법이 조금 달라졌습니다. 물론 하위호환이 가능하여 기존에 사용하던 방법은 그대로 사용할 수 있으며 새롭게 사용하는 방법이 추가되었습니다.

 

EMCAScript라는 것은 Javascript 프로그래밍 언어의 표준을 의미합니다. 모든 언어에는 표준이 존재하며 Javascript 역시 마찬가지입니다. 

 

그렇다면 ES6는 왜 많이 언급될까요? Javascript의 ES6는 많은 변화가 생겼습니다. 변수와 함수를 만들거나 사용하는 방법 역시도 변화가 생겼습니다. 이러한 큰 변화로 인해서 새롭게 익혀야 할 문법들이 만들어진 것입니다. 

 

지금의 프로그래밍은 많은 부분들이 혼합되어 있습니다. 다음은 새로 추가된 문법들에 대해서 알아보도록 하겠습니다.

---

Javascript 변수 let

기존 Javascript에서 변수를 선언하기 위해서는 var 키워드를 사용해 왔습니다. 그리고 새롭게 let 키워드가 정의되었습니다.

 

let 키워드는 var 키워드와 사용방법이 동일합니다. 다만 let 키워드로 사용된 이름은 범위가 block 기준입니다. 다음은 var와 let의 다른 점입니다.

var name='Ironman';
{
    var name='Hulk'; // Identifier 'name' has already been declared
    console.log(name);
}
console.log(name);

let name='Ironman';
{
    let name='Hulk'; // Identifier 'name' has already been declared
    console.log(name); // Hulk
}
console.log(name); // Ironman

var 키워드로 생성된 변수이름은 위의 경우 사용할 수 없습니다. 하지만 let 키워드는 block 내부에서만 사용할 수 있는 이름을 동일하게 만들 수 있습니다.

---

Javascript 상수 const

상수를 만드는 키워드는 기존에는 없었습니다. 새롭게 등장한 이름이며 const 키워드를 사용합니다.

const name='Ironman';

이렇게 정의된 이름은 변경할 수 없습니다. 한번 const로 지정된 변수는 변경이 불가능합니다.

---

Javascript 클래스 class

앞선 포스팅에서 생성자 함수를 사용해서 만들면 class와 동일한 형태의 Object를 만들 수 있다고 했었습니다.

2021.05.07 - [쿤즈 Dev/HTML & CSS & Javascript] - [Javascript] 생성자 함수(Constructor Function) 사용하기

[Javascript] 생성자 함수(Constructor Function) 사용하기

ES6에서는 class라는 키워드가 등장하였고 생성자 함수 대신 class 키워드를 사용해서 Object를 만들 수 있습니다.

class Student {
	constructor(name) {
		this.name = name;
	}
}

const student1 = new Student('Ironman');
console.log(student1.name);

생성자 함수에서 class가 추가되었을뿐 사용방법은 동일합니다.

---

Javascript Object 해체 Destructuring

ES6로 버전업 되면서 새롭게 사용할 수 있는 문법 중 하나입니다. 이것은 Object 내부의 변수를 그대로 받아서 사용할 수 있습니다. 먼저 기존에 사용 방법부터 보겠습니다.

const student = {
	name: 'Ironman',
	age: 43,
	height: 175
}

console.log(student.name);
console.log(student.age);

student라는 Object를 만들고 내부 값에 접근하기 위해서는 점(.)을 이용합니다. ES6에서는 내부 변숫값을 그대로 받아올 수 있습니다.

const student = {
	name: 'Ironman',
	age: 43,
	height: 175
}

const { name, height } = student;
console.log(name);
console.log(height);

student라는 변수에서 name과 height를 그대로 가져왔습니다. 필요한 값들만 빼서 사용할 수 있습니다.

---

Javascript 함수 Arrow function

함수를 만들때 기존 Javascript에서는 function이라는 키워드를 사용했습니다.

function student() {
	console.log('student function.');
}

student();

ES6에서는 arrow function이라는 것이 등장하였습니다. 이는 화살표 함수로 번역될 수 있는데요. 저는 그대로 arrow function이라 읽습니다.

const student = () => {
	console.log('student function.');
}

student();

function이라는 키워드 없이 변수를 선언하듯 선언합니다. const 변수명 = (parameter) => { ... } 와 같이 사용하고 있습니다. 이때 => 이 키워드를 사용하기 때문에 arrow function이라 이름을 붙인 것 같습니다.

---

Javascript 프로미스 Promises

어찌보면 가장 중요한 부분 중 하나일 듯합니다. Javascript는 통신과 UI가 그려지는 순간부터 무조건 비동기 함수로 사용해야 합니다. 비동기 함수를 사용하다 보면 비동기의 늪에 빠질 수 있습니다.

function async_func1(function() {
	async_func2(function() {
		async_func3(function() {
			async_func4(function() {
				...
			});
		});
	});
});

이 경우 가독성도 떨어질 뿐더러 디버깅을 할 때에도 매우 힘들게 됩니다. 일명 콜백 지옥이 되는 이러한 현상을 제거하기 위해서 나온 것이 Promises입니다.

const async_func1 = new Promise(function(resolve, reject) {
	resolve('promise');
});

async_func1()
	.then((result) => {
		...
	})
	.then((result) => {
		...
	});
   

함수를 Promise 형태로 만들게 되면 .then() 함수를 이용해서 계속적으로 callback을 받을 수 있습니다. Promise에 대해서는 이후 포스팅에서 조금 더 자세히 알아보도록 하겠습니다.

---

이번 포스팅에서는 ES6에서 추가된 Javascript의 사용법에 대해서 알아보았습니다. 추가된 사항은 이 외에도 여러 가지 사용법들이 있습니다. 이러한 부분들은 이후 포스팅에서 하나씩 자세히 알아보도록 하겠습니다. 도움이 되셨으면 합니다. 이상입니다.