1. 왜 ES6를 배워야하는가?
오늘 날, 동적인 화면 구성을 요구하는 Front-End의 트렌드에 따라 SPA가 대중화되어가고 있으며 SPA는 크게 3대장 (React, Vue, Angular)가 존재한다.
하지만, 예상컨대 대부분의 기업은 이미 Spring Framework(Back) + JS(Front)로 웹사이트가 구축되어 있을 것이다.
그리고 대기업일수록 잘돌아가고 있는 기존의 프로젝트를 부수고 Front-End를 SPA로 전환시킨다는 것에 대한 거부감이 존재할 것이다.
SPA로의 전환이 어렵다면 JavaScript 문법의 변화라도 맞춰나가야 한다.
JavaScript 진영해서 현재 가장 대중화되어 있는 표준문법은 ES5이며 2009년에 출시된 규격이다.
그리고 그 이후, 6년만에 출시된 표준 규격이 오늘의 주제이기도 한 ES6이다.
ES5(2009)와 ES6(2015) 사이는 6년이라는 시간이 존재한다. 타 버전에 비해 오랜 기간이 걸린만큼 JavaScript 진영에서 ES6는 Modern JavaScript(=ES6+)라고 불리우며 그만큼 다양한 기능이 추가되었다.
취업시장에서도 JavaScript 개발자라면 ES6 이상의 개발역량을 요구하고 있는만큼 우리는 ES6의 특징적인 문법에 대해서 알아둬야할 필요성이 있다.
2. 문법 특징
2-1. let & const
우선, var과 let의 차이에 대해 알아보자.
이 둘의 가장 큰 차이를 코드를 통해 알아보도록 하겠다.
var을 사용한 변수 선언
var data = 'hello';
if(true){
var data = 'world';
}
console.log(data);위 코드의 결과창은
world가 출력된다.
위와 같이 var을 사용할 경우, 가장 치명적인 문제는 중복 선언이 가능하다는 점이다.
본인이 기존의 데이터 값을 건든다는 점을 인지하고 있다면 문제없지만 본인도 모르는 사이에 기존의 값을 건드는 불상사를 만들 경우, 프로그램에 치명적인 오류를 발생시킬 수 있다.
let을 사용한 변수 선언
let data = 'hello';
if(true){
let data = 'world';
}
console.log(data);위 코드의 결과창은
hello가 출력된다.
위와 같이 let을 사용했을 때, hello가 출력된 이유는 let의 변수 scope는 블록단위이기 때문이다.
if절 내부의 data라는 변수는 중괄호({}) 블럭을 기준으로 쓰고 버려진다.
그러므로, 최종적인 값은 hello가 되는 것이다.
let을 사용함으로써 기존의var을 사용했을 때, 문제점으로 지적된 중복 선언에 대한 이슈를 보완했다고 볼 수 있다.
그렇다면 const의 역할은 무엇일까??
const의 핵심은 한번 정의된 값을 두번 다시 수정 불가하다라는 점이다.
소스를 통해 확인해보도록 하자.
const data = 'const data';
data = 'change data';
console.log(data);위 코드의 결과창은 Exception 발생 후, 종료된다.
앞서 언급한 것처럼 const는 상수의 개념으로 사용되기 때문에 한번 정의된 값은 변경이 불가하다.
그러므로 불변해야하는 값에 대한 제어를 위해 사용하면 효율적일 수 있다.
2-2. 화살표 함수(Arrow Function)
두번째 특징은 화살표 함수이다.
모던 자바(JAVA8)에서도 접할 수 있는 내용인데 이하 내용은 동일한 개념이라 볼 수 있다.
예시를 통해 알아보도록 하자.
- ES5를 사용한 경우
function plus(a, b) {
return a+b;
}- ES6를 사용한 경우
const plus = (a,b) => a+b;간단히 두 매개변수에 대한 덧셈 결과를 return하는 함수를 만들어보았다.
화살표 함수는 시각적으로 확인할 수 있듯이 훨씬 간편하고 간단하게 함수를 구현할 수 있다는 장점이 존재한다.
2-3. 템플릿 리터럴 (Template Literal)
세번째 특징은 템플릿 리터럴이란 녀석이다.
이 녀석은 제법 유용하게 사용할 수 있는 특징이라 알아두면 코드의 가독성을 높이는데 한몫한다.
예시를 통해 알아보도록 하자.
- ES5를 사용한 경우
function test(id, pw) {
return 'Your id is ' + id + ', password is ' + pw;
}- ES6를 사용한 경우
const test = (id,pw) => {
return `Your id is ${id}, password is ${pw}`;
}차이가 눈에 보일 것이다.
기존에 우리는 변수와 문자열을 덧셈기호(+)를 통해 분리해서 처리했다.
하지만 템플릿 리터럴을 사용할 경우, 백틱기호(`)를 양끝에 기재해주고 변수 값을 ${변수명}으로 처리해주면 자연스럽게 컴파일러가 인식하게 된다.
2-4. 그외
ES6의 특징은 그외에도 다양하게 존재한다.
- 배열 및 객체 비구조화
- import / export
- promises
- Classes
- ...
이처럼 다양한 특징들이 존재하기 때문에 이를 모두 기재한다면.. 밤새워 작성해야 할 것이다.
그래서 오늘은 개인적으로 가장 주요하다고 생각되면서 가장 빠르게 숙지와 적용이 가능하다고 판단되는 세가지 특징에 대해 알아보았다.
추가적으로 ES6에 대해 궁금하신 분들은 타 블로그를 찾아보면 더 자세하게 확인할 수 있을 것이다.
