#23 자바스크립트 ES6

ES6(ECMAScript 2015) 이후 자바스크립트에는 여러 새로운 기능과 문법이 추가되어 더 강력하고 간결한 코드를 작성할 수 있게 되었습니다. 이 글에서는 자바스크립트의 최신 기능들인 let, const, 화살표 함수, 클래스, 모듈 등에 대해 설명하고, 각각의 특징과 예제 코드를 통해 새로운 문법을 익히는 방법을 소개하겠습니다.

1. let과 const: 블록 범위 변수 선언

ES6 이전에는 자바스크립트에서 변수를 선언할 때 var를 사용했습니다. 그러나 var는 함수 범위만을 가지며, 블록 범위(block scope)를 지원하지 않아 의도하지 않은 변수 중복이나 값 변경이 발생할 수 있었습니다. 이를 해결하기 위해 let과 const가 도입되었습니다.

let: 재할당이 가능한 블록 범위 변수

let은 변수를 블록 범위에서 선언하며, 재할당이 가능합니다.

let x = 10;
if (true) {
    let x = 20; // 블록 범위 내에서만 유효
    console.log(x); // 20
}
console.log(x); // 10

const: 재할당이 불가능한 상수

const는 상수를 선언할 때 사용되며, 초기화 이후 값을 변경할 수 없습니다. 단, 객체나 배열은 내부 프로퍼티는 변경이 가능합니다.

const y = 5;
// y = 10; // 오류: const로 선언된 변수는 재할당이 불가능
const arr = [1, 2, 3];
arr.push(4); // 배열 자체는 변경 가능
console.log(arr); // [1, 2, 3, 4]

 

2. 화살표 함수(Arrow Function)

화살표 함수는 ES6에서 도입된 새로운 함수 선언 방식입니다. 간결한 문법으로 함수 표현식을 대체하며, 특히 this의 바인딩에서 기존 함수와 차이가 있습니다.

기본 문법

// 일반 함수 표현식
const add = function(a, b) {
    return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

화살표 함수의 주요 특징

1. 간결한 문법: 중괄호와 return 키워드를 생략할 수 있어 더 짧은 코드 작성이 가능합니다.
2. this 바인딩: 화살표 함수는 this를 렉시컬(정적) 스코프에서 결정하므로, 기존 함수와 달리 호출한 객체에 따라 this가 변경되지 않습니다.

화살표 함수 예제

const person = {
    name: 'Alice',
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, ${this.name}`); // 화살표 함수는 `this`를 바깥의 `greet` 메서드와 공유
        }, 1000);
    }
};
person.greet(); // 1초 후 "Hello, Alice" 출력

 

3. 클래스(Class)

ES6에서 도입된 클래스는 자바스크립트의 기존 프로토타입 기반 상속을 보다 직관적이고 명확하게 사용할 수 있도록 만들어졌습니다. 객체지향 프로그래밍(OOP) 패턴을 쉽게 구현할 수 있으며, 클래스 기반 상속을 지원합니다.

클래스 선언

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
}

const dog = new Animal('강아지');
dog.speak(); // "강아지가 소리를 냅니다."

상속 구현

class Dog extends Animal {
    speak() {
        console.log(`${this.name}가 멍멍 짖습니다.`);
    }
}

const dog = new Dog('강아지');
dog.speak(); // "강아지가 멍멍 짖습니다."

클래스는 extends 키워드를 사용해 다른 클래스를 상속할 수 있습니다. super()를 통해 부모 클래스의 생성자나 메서드를 호출할 수도 있습니다.

4. 모듈(Module)

ES6 이전에는 자바스크립트에서 모듈화를 구현하기 위해 IIFE(즉시 실행 함수)나 라이브러리 패턴을 사용해야 했습니다. 그러나 ES6에서 모듈 시스템이 표준화되면서, 자바스크립트에서 공식적으로 모듈을 사용하게 되었습니다.

모듈 내보내기(export)

모듈에서는 함수를 정의하고, export 키워드를 사용하여 외부로 내보낼 수 있습니다.

// math.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

모듈 가져오기(import)

import 키워드를 사용하여 다른 파일에서 내보낸 함수를 가져올 수 있습니다.

// main.js
import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14159

• default export를 사용하면 하나의 모듈에서 기본적으로 내보낼 수 있는 값을 정의할 수 있으며, 이를 가져올 때는 중괄호 없이 사용할 수 있습니다.

5. 템플릿 리터럴(Template Literal)

템플릿 리터럴은 문자열을 좀 더 편리하게 다룰 수 있는 기능으로, 백틱(`)을 사용하여 문자열을 정의하고, ${}를 사용해 변수나 표현식을 삽입할 수 있습니다.

템플릿 리터럴 예제

const name = 'Alice';
const age = 25;

console.log(`Hello, my name is ${name} and I am ${age} years old.`);
// 출력: Hello, my name is Alice and I am 25 years old.

템플릿 리터럴을 사용하면 긴 문자열이나 여러 줄로 된 문자열을 쉽게 작성할 수 있습니다.

6. 디스트럭처링(Destructuring)

디스트럭처링은 배열이나 객체의 값을 간단히 추출하여 변수에 할당하는 문법입니다.

배열 디스트럭처링

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

객체 디스트럭처링

const person = { name: 'Alice', age: 25 };
const { name, age } = person;

console.log(name); // 'Alice'
console.log(age); // 25

디스트럭처링을 사용하면 코드가 더 간결해지고, 가독성이 향상됩니다.

결론

ES6 이후 도입된 여러 모던 자바스크립트 기능들은 개발의 생산성을 크게 높여주고, 보다 직관적이며 간결한 코드를 작성할 수 있게 해줍니다. let과 const로 안전한 변수 관리를 하고, 화살표 함수와 클래스, 모듈 시스템을 통해 복잡한 애플리케이션을 구조적으로 관리할 수 있습니다. 또한, 템플릿 리터럴과 디스트럭처링으로 코드 가독성을 향상시킬 수 있습니다. 모던 자바스크립트의 다양한 기능들을 잘 활용하면, 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.