ES6에 대하여

ES6란?

 

ES6는 ECMAScript 버전 6 이후를 통틀어 부르는 말이다.

 

그러면, ECMAScript 는 뭔데?

이건 Javascript의 표준 문법이다.

Javascript 표준 문법은 ES6 이후로 많은 현대적인 문법이 추가되었다.

 

현대적인 문법이 뭐가 좋냐고?

그 이유는 생산성 향상에 도움을 주기 때문이다.

즉, 짧은 코드로도 더 유용한 기능을 할 수 있다. 

 

그런데, Node.js가 ES6의 모든 문법을 지원하는 것은 아니다. 

쓰이는 것이 있고, 쓰이지 않는 문법이 있다.

 

대표적으로 자주 사용되는 문법을 몇 개 알아보자.

 

1. 변수 선언

var myvar = 'node.js';

var는 상수와 변수에 대한 구분이 없었다.

ES6에서는  let과 const로 나눠서 상수와 변수 구분을 하게 했다.

let myvar = 'node.js';	// 변수
const myconst = 1;	// 상수

 

2. Template String

var name = "Berasix";
var age = 99;

var mystr = "A : " + name + "의 나이는 " + age + "살이래요. \nB : 그렇구나? \"" + age + "\"살!";

문자열 사용시 "+" 나 "\n" 를 사용했으나,

ES6에서는 ${myvar} 같은 표현으로 간단하게 변수를 사용할 수 있게 되었고,

엔터로 구분하여 줄 바꿈도 지원한다. 또한 따옴표도 그냥 사용하면 된다.

let name = "Berasix";
let age = 99;

let mystr = `A : ${name}의 나이는 ${age}살이래요. 
B : 그렇구나? "${age}"살!`;

다른 언어들과 뭔가 통합되어가고 있는 느낌이다.

3. arrow function

function add(a, b) {
	return a + b;
}

console.log(add(3, 4));

기존 문법에서 function 함수명() 같은 식으로 사용했다.

ES6에서는 "function" 이라고 표현하는 대신 "=>" 기호로 표현한다

좀...헷갈리기도 한다.

const add = (a, b) => {
    return a + b;
}

console.log(add(3, 4));

 

4. class

function classtest(name, age) {
	this.name = name;
    this.age = age;
}

classtest.prototype.getName = function() {
	console.log(this.name);
}

classtest.prototype.getAge = function() {
	console.log(this.age);
}

var classvar = new classtest("Berasix", 99);

classvar.getName();
classvar.getAge();

기존 문법에서 clss 만들 때는 좀 복잡한 느낌인데,

ES6에서는 다른 언어들과 구현 문법이 많이 유사해져서 쉽게 클래스를 만들 수 있다.

class classtest {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName = function() {
        console.log(this.name);
    }

    getAge = function() {
        console.log(this.age);
    }
}
const classvar = new classtest("Berasix", 99);

classvar.getName();
classvar.getAge();

 

5. destructiong

var userInfo = {name: "berasix", age: 99};

console.log(userInfo.name);

destruction은 자료를 분해 혹은 다른 표현으로 구조를 분해 할당을 하는 것을 말한다. 

기존 문법을 생각하면 이것 또한 좀 헷갈리긴 하는데 적응이 좀 필요할 것 같다.

const userInfo = {name: "berasix", age: 99};

const { name: userName, age: userAge } = userInfo;

console.log(userName, userAge);

 

6. async - await 

Callback 함수는 콜백 지옥에 빠질 수 있다.

이 행위 다음에 이 콜백 -> 이 콜백 행위 다음에 저 콜백 -> 저 콜백 다음에는 그 콜백........무한 무한..

이 지옥을 해결하고자 Promise가 등장했는데, 

이 또한 Promise 지옥이 유발될 수 있어 등장한 것이 바로 aync-awiat 이다. promise의 다른 문법으로 생각하면 된다.

async function myFunction() {
	const [result1, result2] = awiat Promise.all([
    	some_promise();
    	some_promise();        
    ]);	// some_promise 를 동시에 실행하여 각 결과를 result1, result2 에 저장
    
    const result3 = await some_promise();	// some_promise 실행해 result3 에 저장
}

 

이 글은 필자가 분석, 공부하면서 작성한 포스트입니다. 

잘못된 부분에 대해 알려주시면 수정하도록 하겠습니다.