JS | ECMA Script? / ES6 살짝 알아보기

순수 자바스크립트는 바닐라 스크립트(Vanilla JS)고... es5, es6..은 또 뭘까 싶어 이참에 다 알아보기로 했습니다.

 

ECMA Script는 ECMA International이라는 표준화 기구에 의하여 표준화된 스크립트 언어라는 뜻입니다. 표준화, 규격화된 스크립트 언어가 ECMA Script이고, 이의 약자가 ES이며 ES뒤에 붙는 숫자들은 버전, 사양 정도라고 이해하면 쉽습니다. 

 

ES6?

ES6는 ECMA Script 2015와 같은 말입니다. 물론 ES5, ES4 등 이전 버전도 있고(ES3가 가장 흔히 알고있는 자바스크립트) 현재 ES10까지 나왔는데 ES6가 아직까지도 가장 많이 언급되는 이유는 아무래도 가장 큰 변화가 있었기 때문인듯합니다.

어디선가 들어봤을 '모던 자바스크립트', '차세대 자바스크립트'라는 말이 현재는 ES6를 지칭할 확률이 높다!

 

ES6에는 굉장히 많은 문법과 기능들이 추가되었습니다. 그 중 대표적인 몇 가지만 소개해보려 합니다.

 

화살표 함수 (Arrow Function)

보다 짧게 함수를 작성할 수 있으며, this를 포함합니다. (this를 바인딩 할 필요가 없음!)

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

 

let 

let은 변수가 선언된 블록(하위블록 포함), 구문 또는 표현식 안에서 유효합니다.

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 상위 블록과 같은 변수!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 상위 블록과 다른 변수
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

 

const

const는 블록범위의 상수입니다. let과 달리 값의 재할당 및 재선언이 불가합니다.

const myAge = 8

myAge = 9  // Error

 
*var가 가진 문제
1. 함수 스코프
정의된 변수가 함수 스코프를 가짐. 함수가 아닌 프로그램의 가장 바깥에 정의하면 전역 변수가 됨. for반복문에서 정의된 변수가 반복문이 끝난 이후에도 계속 남아있음. 즉시 실행 함수를 사용해 스코프를 제한하기도 하지만 잣겅하기가 번거로우며 가독성이 떨어짐.
2. 호이스팅
var로정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려지며 이를 호이스팅이라 부름. 예를 들어 변수를 정의하기 전에 사용해도 코드를 실행했을 때 에러가 발생하지 않음. 변수의 정의만 끌어올려지고 값은 원래 정의했던 위치에서 할당... 호이스팅은 직관적이지 않으며, 보통의 프로그래밍 언어에서는 찾아보기 힘든 성질이다.
3. 한 번 정의된 변수가 재정의 됨
상수처럼 써야 할 값도 재할당 가능한 변수로 만들어야 함.

* const와 let
1. 블록 스코프
대부분의 언어에서 블록 스코프를 사용.
2. 호이스팅
const나 let으로정의된 변수도 호이스팅되지만, 변수를 정의하기 전에 그 변수를 사용하면 참조에러가 발생함.
3. const는 재할당이 불가능
하지만 const로 정의된 객체 내부의 속성값은 변경 가능함.

(출처: 실전 리액트 프로그래밍 | 이재승)

모듈(Modules)

export, import키워드를 통해 함수나 변수들을 다른 곳에서 사용할 수 있습니다.

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
//import {sum, pi} from "lit/math";
alert("2π = " + math.sum(math.pi, math.pi));

 

템플릿 리터럴(Template Strings / Template Literals)

큰 따옴표(")나 작은 따옴표(')대신 백틱(`)을 사용합니다. 플레이스 홀더를 사용하여 표현식을 사용할 수 있습니다.

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

 

이밖에 더 추가된 기능과 문법들을 알고싶다면 ↓

lukehoban/es6features

JavaScript ES6 — write less, do more

ECMAScript 6

 

 

+) 읽을거리

JavaScript brief history and ECMAScript(ES6,ES7,ES8,ES9) features

ES6 In Depth: Arrow functions – Mozilla Hacks - the Web developer blog

신선함으로 다가온 ES6 경험 - 우아한형제들 기술 블로그