[JavaScript] ES6는 뭘까?

조혜인·2022년 8월 21일

JavaScript

JavaScript를 공부하기 시작하면서 ES6이라는 단어를 익히 들었다. 여기서 이야기하는 ES6는 무엇일까?

📌 ES6

ES6에서 ES는 ECMA Script의 약자로 JavaScript를 표준화시키는 문법이다. ECMA-262기술 규격에 따라 정의하고 있는 표준화된 언어이다. ES뒤의 숫자는 지속적으로 개발되는 ES문법의 버전이다. 기존 ES5가 2009년에 공개된 이후 기나긴 공백이 있었고 비로소 2015년 그 이후 ES6이 세상에 공개되었다.
ES6는 아래에서 보이는 것과 같이 ES5와 비교하였을 때 다양한 새로운 특징들이 출시되었다. 그 중에서 자주 사용하고 있는 몇 가지에 대해서 정리해보도록 하겠다.

📌 ES6의 New Features 분석

let과 const

재사용이 불가능한 let과 상수를 선언할 수 있는 const가 추가되었다.
이전에 var만 사용하였을 때는 재사용이 가능하여 위에서 선언했지만 모르고 아래에서 다시 선언할 수 있었기 때문에 위험성이 있었다. 하지만 let과 const가 추가되면서 좀 더 명확한 코드를 구현할 수 있게 되었다.

화살표 함수(Arrow Functions)

함수를 표현하는 방법 중 화살표를 사용하여 함수를 좀 더 간단하게 표현할 수 있게되었다. 아래 예시를 통해 ES5와 ES6를 비교해보자.

/* ES5 */
var sum = function(x, y){
  return x + y
}

/* ES6 */
const sum = (x, y) => x + y

두 함수 모두 매개변수 x와 y를 더한 값을 출력하는 함수이다. ES6가 공개되면서 굳이 ES5처럼 function이라는 단어를 쓰지 않고도 화살표(=>)를 사용하여 간단하게 구현할 수 있게 되었다.

for/of 구문

기존의 for문처럼 사용할 수 있는 for/of 구문이 추가되었다. 그러나 이 구문은 오직 iterable objects 즉, 반복가능한 객체들만 사용할 수 있다. Array, String, Map, Nodelist 등에서만 사용할 수 있다. 아래의 예시를 보자.

const alphabet = ['A', 'B', 'C', 'D', 'E']

let str = ''
for(let al of alphabet) {
  str += al
}
console.log(str)			//'ABCDE'

alphabet은 배열 타입으로 알파벳이 들어있는데, 위와 같이 for/of 구문을 이용하여 alphabet배열에서 값을 하나씩 al 변수에 꺼내와서 사용할 수 있다. for/of 구문을 사용하여 alphabet[0]과 같이 사용하지 않고 내부에 있는 값을 바로 꺼내올 수 있다는 장점이 있다.

Set 객체

중복된 값을 갖지 않는 객체인 Set객체가 추가되었다.

Promises

JavaScript에서 비동기 처리를 위하여 도입되었다. Promise 후속처리 메소드를 이용해 에러 처리를 효과적으로 할 수 있게 되었다.

구조 분해 할당(Function Rest Parameter)

'...'(점3개)를 이용하여 객체나 배열의 값을 분해한 후에 값을 변수에 재할당할 수 있게 되었다.
예를 들어 넘겨받은 객체나 배열의 값들 중 몇 개의 값만 사용하고 싶다고 하였을 때도 유용하게 사용할 수 있다.

const student = {
  name: "철수",
  age: 12,
  school: "호랑이초등학교",
  friend: "영희"
}

const {name, friend, ...rest} = student
console.log(name, friend)				//'철수' '영희'
console.log(rest)						//{age: 12,school: '호랑이초등학교'}