ES6? 다른 숫자도 있는건가?

안녕하세요! ES라고 아시나요? JavaScript를 포함한 스크립트 언어를 배운다면 흔히 접하는 단어입니다.

그 중에서도 ES6나 ES6이후 문법들이라는 말들이 되게 많습니다.

ES는 뭐고 몇까지 있을까요?

 

ES

ECMAScript의 약자로 ECMA International이 정의하고 있는 표준화된 Script 프로그래밍 언어입니다.

ECMA

ECMA란 European Computer Manufacturers Association라는 정보와 통신 시스템을 표준화하는 기구입니다. 후에

국제적 확장을 고려하여 뒤에 International이라는 이름이 붙게 되었습니다.

 

ECMA International은 JavaScript말고도 여러 언어의 규격을 표준하고 있는 기구입니다. 그 중 JavaScript는

ECMA-262라는 문서를 따르고 있습니다.

 

ES 에디션

ES는 여러 에디션이 있습니다. 5 까지는 에디션의 이름을 붙였지만 ECMA International에서 해마다 새로운 업데이트를 하기로 결정해

ES6부터는 해당 년도가 붙게 되었습니다. ES6는 2015년에 업데이트 되었습니다. 그래서 ES6와 ES2015는 같은 뜻이라고 생각하시면 됩니다.

 

ES6

이제 ES6가 왜 그렇게 자주 언급되는지 알아보겠습니다. 전 에디션보다 10년 정도 뒤에 업데이트 되었고 알아보면 정말 자주 쓰이고 익숙한 문법들이 ES6에서 많이 생겨났습니다!

 

const, let

ES6 이전에는 var라는 키워드로만 변수를 선언했습니다. 하지만 var의 단점들이 보이기 시작했습니다.

var는 호이스팅이 되면 코드상에서 선언 전에 사용할 때 오류가 발생하지 않고 undefined를 반환하거나 함수 레벨 스코프 등의

단점들이 많았습니다. 코드가 길어진다면 유연한 방식 때문에 어떤 예기치 못한 값을 가질 지 파악하기 쉽지 않습니다.

 

const는 변하지 않는 상수를 선언할 때 사용됩니다. 그렇기에 var보다 훨씬 강력하고 안전합니다. 변하지 않기 때문에 재할당이 불가능합니다. 재선언도 불가능하죠.

const x = 10;
var y = 10;

x = 5; // error: Assignment to constant variable.
y = 5; // success

 

let은 var와 비슷합니다. 재할당이 가능한 변수를 선언할 때 사용하는데 대신, 재선언이 불가능합니다.

let x = 10;
var y = 10;

x = 5; // success
y = 5; // success

let x = 10; // error: Identifier 'x' has already been declared
var y = 10; // success

 

const와 let은 선언, 초기화, 할당의 단계가 따로따로 일어나 선언 전에 사용한다면 var와 다르게 참조 오류가 발생합니다.

선언 전에 사용은 허가하지 않는다는 겁니다.

 

템플릿 리터럴

문자열을 합칠 때 + 기호로 하지 않아도 되게 되었습니다. 변수를 보다 쉽게 문자열에 합칠 수 있습니다.

const world = 'world!';
console.log("hello, " + world);

// template literals
console.log(`hello, ${world}`);

 

arrow function

function 키워드로만 함수를 정의했지만 다른 방법으로 정의할 수 있게 되었습니다.

저는 function보단 arrow function 방식이 좀 더 가독성이 좋고 익숙해졌습니다.

간단한 식은 return과 {]를 생략해도 됩니다.

function Add(x, y) {
  return x + y;
}

const Add2 = (x, y) => x + y;

 

Promise

Promise는 비동기 작업이 끝났을 때 이 작업에 대한 약속 된 값을 반환합니다. 이 값은 크게 resolve와 reject로 나뉘게 됩니다.

직접 Promise를 써도 되고 then-cache를 써서 처리할 수도 있습니다.

function promiseFn(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof number === 'number') {
        resolve(number);
      } else {
        reject(number);
      }
    }, 1000);
  })
}

promiseFn(10)
  .then((res) => console.log(res))
  .catch((error) => console.log(error));


// 네트워크 요청
fetch(url)
  .then((res) => res.json())
  .then((data) => console.log(data)) // resolve
  .catch((error) => console.log(error)); // reject

 

Destructuring Assignment ( 구조 분해 할당 )

구조 분해 할당은 객체나 배열에서 필요한 값만 추출해서 코드의 가독성과 효율을 높이는 방법입니다.

const obj = {
  name: 'woonrin',
  isAdult: false,
};

const { name } = obj;

console.log(obj.name); // woonrin
console.log(name); // woonrin

const arr = [1, 2, 3];

const [num1, num2] = arr; // num1: 1, num2: 2

 

 

Modules( import, export )

modules가 업데이트 되면서 ES6 이상부터는 require와 module.exports말고 import export 문을 사용할 수 있습니다.

export는 기본 export가 있고 export default가 있습니다. export는 여러 개의 모듈을 내보낼 때 사용하고 export default는 한 개의 모듈을 내보낼 때 사용합니다. 그래서 export default는 각 파일당 한 개밖에 사용할 수 없습니다.

 

기본 export는 {}를 이용해 여러개를 import할 수 있고 export default는 중괄호 없이 가져와야 합니다!

// numbers.js
export const num1 = 10;
export const num2 = 10;
export default const num3 = 10;

// 모듈 import 하기
import { num1, num2 }, num3 from './numModule';

 

Enhanced Object Literal ( 향사된 객체 리터럴 )

2개의 축약 문법이 업데이트 됐습니다.

 

속성과 값이 같으면 1개만 기입

// 기존
var name = 'woonrin';
var obj = {
  name: name,
};

// enhanced
let name = 'woonrin';
const obj = {
  name,
};

 

입력하려는 속성과 변수의 값이 같다면 1개만 기입해 코드를 줄일 수 있습니다.

 

function 예약어 생략

// 기존
var obj = {
  fn: function() {
    console.log('hello, world!');
  },
};

obj.fn(); // hello, world!

// enhanced
const obj = {
  fn() {
    console.log('hello, world!');
  },
};

obj.fn(); // hello, world!;

 

 

ES6뿐 아니라 이 이후 문법도 익숙한 것들이 정말 많습니다! ( Array.prototype.includes, async await,  )