ES5 to ES6

JavaScript의 ES란?

나무위키에서는 이렇게 정의한다.

ECMA Script란..?
ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다.

우리가 흔히 사용하는 ES5, ES6은 버전 숫자를 붙여 ECMAScript를 줄여 쓰는 말이다. 2009년에 ES5가 등장하고 2015년에 ES6가 등장하며 큰 변화가 있었다. ES6는 이전 버전의 문제점을 해결하고 기존 코드를 간결하게 작성할 수 있는 새로운 문법을 추가하여 코드의 가독성과 유지 보수성을 향상시켰다.

ES5와 ES6의 문법 차이

ES6이후 추가된 스펙


화살표 함수 (Arrow functions)
=> 키워드를 사용하며 this 바인딩 이슈를 해결해주고 함수 표현식을 간결하게 표현해 준다.


블록 스코프 변수 (let, const)
변수의 범위를 블록 내부로 제한하여 호이스팅(hoisting) 문제를 방지하고, const는 상수로 값을 재할당할 수 없는 특성을 갖는다. 코드의 가독성과 안정성을 높일 수 있다.


클래스 (Classes)
프로토타입 기반 상속을 쉽게 만들어주는 문법으로 라이브러리들도 프로토타입 객체를 재사용하며 구현할 수 있도록 통일되었다.


모듈 (Modules)
export와 import 문을 사용하여 파일 간 코드 재사용을 간단하게 만들어 모듈을 정의하고 불러올 수 있다.


템플릿 리터럴 (Template literals)
백틱(``) 으로 감싼 문자열 내부에 ${ }을 사용하여 변수나 표현식을 쉽게 삽입할 수 있는 문법이다. 기존 문자열 결합 방식보다 가독성이 높아지고, 복잡한 문자열 구성도 더욱 용이해졌다.


향상된 객체 리터럴
객체 리터럴에 여러 개의 속성을 추가하거나 계산된 속성 이름을 사용할 수 있다.


디폴트 매개변수 (Default parameters)
함수의 매개변수에 기본값을 할당하는 방법이다. 매개변수에 값이 전달되지 않은 경우, 기본값이 사용되며, 값이 전달된 경우 전달된 값이 사용된다.


나머지 매개변수 및 전개 연산자 (Rest parameters, spread operator)
나머지 매개변수는 함수의 매개변수로 전달되는 인수 중 마지막에 위치한 것들을 배열로 모아서 함수 내부에서 사용할 수 있도록 하는 기능이다.
전개 연산자는 배열이나 객체 같은 iterable 객체를 펼쳐서 개별적인 값들의 목록으로 만들어준다.


구조 분해 할당 (Destructuring assignment)
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.


for...of 루프 (For...of loop)
반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성한다.


제너레이터 (Generators) 함수
호출되어도 즉시 실행되지 않고 실행을 일시적으로 멈추고 다시 시작할 수 있는 함수다. 이터러블과 이터레이터를 만드는 데 사용될 수 있으며, 비동기 프로그래밍과 함께 사용될 때 유용하다.


프로미스 객체 (Promises)
자바스크립트 비동기 처리에 사용되는 객체다. 비동기 작업의 결과를 알 수 있는 객체로 비동기 처리에서 콜백 지옥을 해결하고 에러 처리를 편하게 해 준다.


심벌 (Symbols)
원시 데이터 타입으로, 고유하고 변경 불가능한 값이다.
주로 객체의 프로퍼티 이름으로 사용되며 Symbol() 생성자 함수를 호출하여 생성한다.
생성된 심벌은 유일하고 변경이 불가능하여 안전한 프로퍼티 이름을 제공하며, 객체에 추가되어 다른 프로퍼티와 구분되어 사용됩니다.


Proxy, Reflect객체(Proxy, Reflect objects)
객체를 래핑하여 프록시 동작을 수행하고 자바스크립트의 객체를 다양하게 제어하는 데 사용한다.


다양한 배열 메소드
Array.from(), Array.of(), find(), findIndex(), fill(), copyWithin(), includes()
배열의 생성, 탐색, 복사, 채우기, 포함 여부 확인 등 다양한 기능을 수행한다.