[JS] About ES6

hangkemiii·2021년 11월 14일

Javascript

목록 보기

3/11

Introduction

ECMASCript(ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 현재 2021년 11월 기준, 2019년 6월에 출판된 ES2019까지의 ECMASCript가 나와있지만 오늘 알아볼 ECMASCript는 바로 2015년 6월에 출판된 ECMASCript의 5판, ES6이다.

왜 ES6인가?

ES10 까지 나온 현재, 왜 우리는 ES6에 주목해야 할까? 그것은 바로 ES6가 새로운 언어 기능이 포함된 주요 업데이트였으며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트였기 때문이다. 그렇기 때문에 ES6에서는 ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고, 이는 가독성 및 유지보수성 향상으로 이어졌다. React나 Vue와 같은 유명 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었다. 그럼 지금부터, 대표적인 ES6 문법들에 대하여 알아보자.

ES6 문법

const and let

const와 let은, 앞서 작성했던 문서인 var, let, const의 차이점에서 알아볼 수 있듯이, 변수 선언을 위한 ES6의 새로운 문법이다. 이 둘은 모두 블럭 범위이며, var과 다르게 재선언을 할 수 없다는 차이점이 있다.

다만, let은 재할당이 가능하지만, const는 재할당이 불가능하다는 차이점 역시 존재한다. ES6에서 const와 let이 등장한 이후로, var을 변수를 선언할 때 거의 사용되지 않게 되었다.

Arrow functions(화살표 함수)

ES6에서는 복잡하고 조금은 깨끗하지 않게 느껴졌던 전통적인 함수표현 (function(){})에 대한 대안으로 Arrow Function을 도입하였다. 다만 이것인 전통적인 함수표현의 대안이라고 해도 몇가지의 제한점이 있으며 모든 상황에 사용할 수는 없다.

this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없다.
new.target 키워드가 없다.
일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없다.
생성자(Constructor)로 사용할 수 없다.
yield를 화살표 함수 내부에서 사용할 수 없다.

this 바인딩

화살표 함수가 기존의 function을 대체할 수 없는 이유 중 대표적인 예시가 서로 가리키고 있는 this 값이 다르다는 것이다. 다음의 예를 살펴보자.

function BlackDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: function () {
      console.log(this.name + ": 멍멍!");
    },
  };
}
const blackDog = new BlackDog();
blackDog.bark(); //검둥이: 멍멍!

function WhiteDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: () => {
      console.log(this.name + ": 멍멍!");
    },
  };
}
const whiteDog = new WhiteDog();
whiteDog.bark(); //흰둥이: 멍멍!

이와 같이 function()을 사용했을 때는 검둥이가 나타나고, 화살표 함수를 사용했을 때는 흰둥이가 나타나게 된다. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리키게 된다.

템플릿 리터럴 (Template Literal)

우리는 이전까지 문자열을 연결하기 위해 더하기(+) 연산자를 사용해왔다. 하지만 ES6 부터는 그럴 필요 없이 백틱을 사용하여 문자열을 연결하고 문자열 내에서 변수를 사용할 수 있게 되었다.

const foo = (name, age) => {
  return `안녕하세요, 저는 ${name}이고, 나이는 ${age} 살 입니다.`;
};

console.log(foo('김형겸', 25));
// 안녕하세요, 저는 김형겸이고, 나이는 25살입니다.

비구조화 (Destructing)

ES6에서는 비구조화를 통해 배열과 객체의 값을 변수에 더욱 쉽게 할당할 수 있다.

//ES5 
const kyeom = {
	FirstName: '김',
	SecondName: '형겸',
	age: 25
  	major: '경영정보학과',
};

let FirstName = kyeom.FirstName;
let SecondName = kyeom.SecondName;
let myAge = kyeom.age;
let myMajor = kyeom.major;

console.log(FirstName);
console.log(SecondName);
console.log(age);

//ES6
const kyeom = {
	FirstName: '김',
	SecondName: '형겸',
	age: 25
  	major: '경영정보학과',
};

let { FirstName, SecondName, age, major } = kyeom;

배열 역시 객체와 동일한 구문을 사용한다.

const fruit = ['사과', '배', '귤', '수박'];

let [value1, value2, value3] = fruit;

클래스(Class)

ES6 이전에는 자바스크립트에서 클래스를 선언하려면 다음과 같이 function 구문을 이용하거나 프로토타입 표현식을 이용해서 선언했어야만 했다.

function User(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
}

Person.prototype.id = function() {
    return id;
}

Person.prototype.name = function() {
    return "[name: " + this.name + 
        ", email: " + this.email + "]";
}

하지만 ES6부터는 클래스를 사용하는 구문이 추가되어 Java의 문법과 흡사한 형태로 더욱 가독성이 좋은 클래스 구문을 사용할 수 있게 되었다.

class User {
    constructor(id, name, email) {
        this.id = id;
        this.name = name;
        this.email = email;
    }

    id() {
        return id;
    }

    name() {
        return name;
    }

    info() {
        return "[name: " + this.name +
            ", email: " + this.email + "]";
    }

모듈(Module)

스크립트의 크기가 커지고 복잡해지기 시작하면서, 개발자들은 '모듈(Module)'이라는 각각의 파일로 클래스나 함수를 분리할 필요성을 느꼈다. 모듈은 단지 스크립트 파일 하나에 불과하며, 이를 export와 import와 같은 특수한 지시자를 통해 다른 모듈을 불러오거나 공유하여 모듈에 있는 함수를 호출하는 등의 기능 공유가 가능해졌다.

export : 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다(모듈 내보내기).
import : 외부 모듈의 기능을 가져올 수 있다(모듈 가져오기).

사용법은 다음과 같다.

// 📁 Hello.js
export function Hello(User) {
  console.log(`Hello, ${User}!`);
}

// 📁 App.js
import {Hello} from './Hello.js';

console.log(Hello); // 함수
Hello('Kyeom'); // Hello, Kyeom!

둘 이상의 모듈을 가져올 경우에는, 중괄호에 해당 모듈을 넣기만 하면 된다.

프로미스(Promise)

Promise 객체는 비동기 작업의 완료 또는 실패와 그 결과 값을 나타낸다. 예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때 사용할 수 있다. Promise는 다음 중 하나의 상태를 가진다.

대기(pending): 이행하거나 거부되지 않은 초기 상태.
이행(fulfilled): 연산이 성공적으로 완료됨.
거부(rejected): 연산이 실패함.

프로미스 구문은 다음과 같이 사용할 수 있다.

const myPromise = (param) => {
	return new Promise((resolve, reject) => {
		if(param){
          resolve('성공!');
        }
      	else {
          reject('실패!');
        }
	});
};

myPromise(true).then(function(result){
  console.log(result);//'성공!'
},function(err){
  console.log(err);//'실패!'
});

마무리

이렇게 ES5 이후에 나온 ES6로 인해 우리는 코드를 구현할 때 더욱 쉽고, 클린한 코드를 짤 수 있게 되었다. 현재 ECMASCript는 ES10까지 나왔으며 앞으로도 더 많은 기능과 문법들이 등장할 예정이다. 그렇기 때문에 우리는 매번 새로운 기능과 문법을 사용할 수 있게 하기 위해 ECMAScript의 업데이트에 주목할 필요가 있을 것이다.