ES6란?

곽민서·2025년 7월 14일

ES6란?

ES6(ECMAScript 2015)는 자바스크립트의 최신 버전으로, 2015년에 공식 발표되었다. ES6는 코드의 가독성과 유지보수성을 높이고, 현대 웹 애플리케이션의 요구를 반영하기 위한 여러 기능들을 제공한다. 주요 변경사항은 다음과 같다.

변경 사항

1. `let` 과 `const` 키워드 추가

let 은 변수 선언, const 는 상수 선언에 사용된다. var 과 달리 let 과 const 는 블록 스코프를 가지므로 코드의 안정성이 더 높다. 또한, 변수 선언 이전에 접근했을 때 Undefined 가 할당되지 않고, ReferenceError 가 발생한다는 점에서도 차이가 있다.
그렇다면 Undefined 와 ReferenceError 가 할당될 때의 차이점은 무엇일까?

Undefined와 ReferenceError의 차이점

undefined 속성은 undefined 원시 값을 나타내며, JavaScript의 원시 자료형 중 하나이다. undefined 는 기본적으로 값이 할당되지 않은 변수는 Undefined 타입이며, Undefined 타입은 변수 자체가 값 또는 Undefined이다. Undefined 는 변수는 선언하였지만 초기화를 하지 않아서 그 값을 원시 값인 Undefined로 주는 것이다. 초기화가 안되었다고 생각하는게 가장 쉬울 것 같다.
ReferenceError 는 객체가 존재하지 않는 변수를 참조했을 때 발생하는 참조 에러이다. 객체를 생성하지 않았기에 참조할 값을 찾지 못했다, 즉 변수가 선언조차 안되었다고 생각하면 쉽다.
이렇게 보면 Undefined 보다 ReferenceError 를 더 선호하는 것처럼 보이는데 그 이유는 무엇일까

왜 `ReferenceError`가 더 안전한가?

가장 큰 이유는 의도하지 않은 버그를 막아주기 때문이다.

console.log(name); // ReferenceError
let name = "휘래";

이렇게 하면 "아, 이 변수 선언 전에 접근했구나" 하고 명확하게 오류를 잡을 수 있다.

console.log(name); // undefined (하지만 실제 버그임)
var name = "휘래";

반면, var를 썼을 경우 아무런 에러가 안 나서 버그가 숨겨진 채 넘어간다.
결국 개발자의 편의를 위해 let과 const를 쓰는 방향으로 바뀌었다.

2. 화살표(Arrow Function) 도입

기존의 함수 정의 방식보다 간결하고 가독성이 좋다. 또한 this의 바인딩을 호출 문맥과 일치시키기 때문에 함수 내부에서의 혼란이 줄었다.

도입 이전 코드

function Person(name) {
  this.name = name;
  
  this.sayHello = function() {
    setTimeout(function() {
      console.log('Hello, my name is ' + this.name);
    }, 1000);
  };
}

const p1 = new Person('휘래');
p1.sayHello();  // → Hello, my name is undefined

도입 이후 코드

function Person(name) {
  this.name = name;
  
  this.sayHello = function() {
    setTimeout(() => {
      console.log('Hello, my name is ' + this.name);
    }, 1000);
  };
}

const p2 = new Person('민서');
p2.sayHello();  // → Hello, my name is 민

화살표 함수를 사용하는 이유

기존에 함수가 존재함에도 불구하고 화살표 함수를 만든 이유는 무엇일까?

함수의 기능을 직관적으로 표현

프로그래밍에서 function 문법은 아래와 같을 때 사용한다.
- 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때
- 입출력 기능을 만들 때
화살표 함수는 이러한 이유 중 입출력 기능을 직관적으로 잘 표현해준다.
```
var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16
```

소괄호 생략 가능

파라미터가 하나라면 소괄호 생략이 가능하다.

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

중괄호 생략 가능

중괄호 안에 return이 한 줄 뿐이라면 중괄호와 retrun도 생략가능하다.

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) ); // 8
console.log( 두배만들기(8) ); // 16

내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용

함수를 쓸 때 함수가 쓰인 위치에 따라서 내부의 this값이 변하지만, 화살표 함수를 쓰면 내부의 this 값은 변하지 않는다.
이 이유가 arrow funtion을 쓰는 핵심 이유이다.

기존 함수

const obj = {
  name: '민서',
  sayHi: function() {
    console.log('1)', this.name);  // → 민서

    setTimeout(function() {
      console.log('2)', this.name);  // → undefined (또는 window.name)
    }, 1000);
  }
};

obj.sayHi();

화살표 함수

const obj = {
  name: '민서',
  sayHi: function() {
    console.log('1)', this.name);  // → 민서

    setTimeout(() => {
      console.log('2)', this.name);  // → 민서
    }, 1000);
  }
};

obj.sayHi();

3. 클래스 문법 추가

객체 지향 프로그래밍의 핵심 개념인 생성자, 상속, 메서드 오버라이딩 등을 자바스크립트에서 활용할 수 있게 되었다.

4. 템플릿 리터럴 추가

문자열 내에 변수를 손쉽게 삽입할 수 있어, 기존의 문자열 연결 방식보다 가독성과 유연성이 향상되었다. 템플릿 리터럴이란 내장된 표현식을 허용하는 문자열 리터럴로 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.

문자열 삽입

이전에는 다음과 같이 문자열을 삽입했다.

let name = 'Hojun';
let greeting = 'Hello my name is ' + name ;

console.log(greeting);		// Hello my name is Hojun

ES6부터는 백틱(`)을 이용하여 아래와 같이 더 쉽게 작성할 수 있게 되었다.

let name = 'Hojun';
const greeting = 'Hello my name is ${name}';

console.log(greeting);		// Hello my name is Hojun

여러 줄 문자열 생성

ES6 이전에는 HTML 프래그먼트 등에 사용할 여러 줄로 이루어진 문자열을 백슬래시를 이용해 다음과 같이 작성하였다.
```
let text = "Hello, \
my name is Alberto \
how are you? \ ";
```
ES6 에서는 전체를 백틱으로 감싸기만 한다면 백슬래시를 사용하지 않아도 된다.
```
let text = `Hello,
my name is Alberto
how are you?`;
```