( JavaScript ) 필수 문법 : ES6+

⭕ ES6+란 무엇인가?

본격적으로 문법을 탐구하기 전에, 우리가 이야기하는 ES6+가 정확히 무엇인지부터 짚고 넘어가자.

 

JavaScript의 표준, ECMAScript

JavaScript는 사실 ECMAScript라는 공식 명세를 따른다. 이 명세는 TC39라는 기술 위원회에서 관리하며, 언어가 어떻게 작동해야 하는지 규칙을 정의했다. 우리가 흔히 < JavaScript >라고 부르는 것은 이 ECMAScript 명세를 구현한 언어이다.

 

ES6의 등장과 ES6+의 의미

• ES6 (ECMAScript 2015) : 2015년에 발표된 버전이다. 이 버전은 JavaScript 역사상 가장 큰 변화를 가져왔다. let, const, 화살표 함수, 클래스, Promise 등 혁신적인 기능들이 이때 대거 도입됐다.
• ES6+ : ES6 이후 매년 발표되는 모든 최신 버전을 통틀어 부르는 용어이다. 즉, ES6와 그 이후에 추가된 모든 최신 JavaScript 문법을 의미한다.

우리가 배우는 모던 문법들은 대부분 이 ES6 이후의 표준에 포함된 것들이다. 이 문법들은 웹 개발의 효율성을 극대화했기 때문에, 최신 개발 환경에서는 필수로 익혀야 하는 지식이었다.

 

 

---

 

 

🔴 let과 const, var를 넘어선 스마트한 변수 선언

오랜 기간 JavaScript 개발자를 괴롭혔던 문제 중 하나는 바로 var 키워드가 가진 특성이었다. 모던 JavaScript는 이 문제를 let과 const로 해결했다.

 

블록 스코프의 도입

var는 함수 스코프를 가졌다. 이는 if 문이나 for 문 같은 블록 내부에서 선언해도, 그 변수가 함수 전체에서 유효했다는 의미이다. 이 때문에 변수가 의도치 않게 덮어쓰이는 문제가 발생했다.

// var의 문제점: 함수 스코프
function example() {
    for (var i = 0; i < 3; i++) {
        // ...
    }
    console.log(i); // 3이 출력된다. (블록 밖에서도 접근 가능)
}

이에 반해 < let >과 < const >는 블록 스코프를 가졌다. 변수를 선언한 {} 블록 내에서만 유효하며, 블록을 벗어나면 접근할 수 없다. 이는 코드를 더 직관적이고 안전하게 만들었다.

let vs const

• let: 값이 재할당될 수 있는 변수를 선언할 때 사용한다. (예: 카운터 값, 상태 값)
• const: 값이 재할당될 수 없는 상수를 선언할 때 사용한다. (예: 환경 설정 값, DOM 요소 참조)

특별한 이유가 없다면 const를 기본으로 사용하는 것이 권장된다. 변하지 않는 값을 상수로 선언함으로써 코드를 읽는 사람이 그 값의 성격을 바로 파악할 수 있기 때문이다.

 

 

---

 

 

🔴 화살표 함수 ( => ) : 짧아진 문법, 달라진 this 바인딩

화살표 함수(Arrow Function)는 기존의 함수 선언 방식보다 훨씬 간결한 문법을 제공한다.

코드 간결성

인수가 하나이거나, 본문이 return 문 하나로 이루어져 있다면 다음과 같이 코드를 압축할 수 있었다.

기존 함수 선언	화살표 함수
function (a) { return a * 2; }	(a) => a * 2
function (a, b) { return a + b; }	(a, b) => a + b

핵심 변화 : this 바인딩

화살표 함수의 진정한 힘은 간결한 문법보다 this 바인딩 방식에 있다.

일반 함수는 호출 방식에 따라 this가 동적으로 결정된다. 하지만 화살표 함수는 자신만의 this를 생성하지 않는다. 대신 자신이 선언된 < 외부(상위 스코프) >의 this 값을 정적으로 물려받는다 (Lexical this라고 불린다).

이 특성 덕분에 콜백 함수나 클래스 내부에서 this를 사용할 때 더 이상 bind()나 self = this 같은 복잡한 코드를 쓸 필요가 없어졌다.

class Timer {
    constructor() {
        this.message = "시간이 됐다";
        // 일반 함수를 사용하면 this.message에 접근할 수 없다 (this가 전역 객체를 가리킨다)
        // setTimeout(function() { console.log(this.message); }, 1000); 

        // 화살표 함수를 사용하면 Timer 클래스의 this를 물려받는다
        setTimeout(() => { console.log(this.message); }, 1000); // "시간이 됐다" 출력
    }
}
new Timer();

 

 

---

 

 

🔴 구조 분해 할당과 스프레드 연산자 ( . . . )

코드를 깔끔하게 만드는 가장 강력한 도구는 구조 분해 할당(Destructuring Assignment)과 스프레드 연산자(Spread Operator)이다

구조 분해 할당 : 원하는 것만 쏙 뽑아내다

구조 분해 할당은 배열이나 객체의 속성을 해체하여 개별 변수에 저장할 수 있게 한다.

// 기존 방식
const user = { id: 101, name: 'Alice', age: 25 };
// const name = user.name;
// const age = user.age;

// 구조 분해 할당
const { name, age } = user;
console.log(name, age); // Alice 25

// 배열도 가능하다
const colors = ['red', 'green', 'blue'];
const [first, , third] = colors; // 중간 값은 건너뛸 수 있다
console.log(first, third); // red blue

 

특히 함수에서 객체를 인수로 받을 때, 필요한 속성만 깔끔하게 꺼내 쓸 수 있어 코드가 명료해진다.

스프레드 연산자 ( . . . ) : 복사와 결합의 마술사

< 스프레드 연산자 (...) >는 배열이나 객체를 펼쳐서(Spread) 개별 요소로 분리하는 역할을 한다.

배열/객체의 복사 및 병합

기존 객체를 변경하지 않고 새로운 객체를 생성할 때 매우 유용했다.

const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 병합
const combinedArr = [...arr1, ...arr2, 5]; // [1, 2, 3, 4, 5]

const defaultOptions = { theme: 'dark', size: 10 };
const newOptions = { ...defaultOptions, size: 20, color: 'red' }; 
// { theme: 'dark', size: 20, color: 'red' } // size가 덮어쓰여졌다.

 

나머지 매개변수 (Rest Parameters)

함수 인수로 사용할 때는 나머지 매개변수(Rest Parameters) 역할을 했다. 함수에 전달된 모든 인수를 배열로 묶어준다.

function sumAll(first, ...rest) {
    // rest는 [2, 3, 4]가 된다
    return first + rest.reduce((sum, current) => sum + current, 0);
}

sumAll(1, 2, 3, 4); // 10

 

---

 

 

모던 JavaScript 문법을 익히는 것은 단순히 코드를 줄이는 것을 넘어, 언어의 잠재력을 최대한 활용하고 더 견고한 소프트웨어를 만드는 데 필수적이라고 하니 모두 같이 파이팅해보자..!