▶ JavaScript Versions

JavaScript 2015 (ES6)

JavaScript 2015 (ES6): ECMAScript 6의 주요 기능과 특징

*ECMAScript 2015 (ES6)**는 JavaScript의 가장 중요한 업데이트 중 하나로, 2015년에 발표되었습니다. ES6는 이전 버전인 ES5와 비교하여 많은 새로운 기능과 구문을 도입했으며, JavaScript의 생산성과 유지보수성을 크게 향상시켰습니다. 모듈 시스템, 블록 스코프 변수, 클래스, 화살표 함수 등 중요한 기능이 포함되었으며, 대부분의 모던 브라우저와 Node.js에서 지원됩니다.

이 가이드는 ES6에서 도입된 주요 기능과 사용법을 설명합니다.

1. `let`과 `const`: 블록 스코프 변수 선언

*let*과 **const*는 변수의 스코프를 블록 레벨로 제한하는 새로운 키워드입니다. 이전의 **var*는 함수 스코프만 지원했기 때문에, 변수 호이스팅 문제로 예기치 않은 동작이 발생할 수 있었습니다. **let*과 **const*는 이를 개선해 더 안전한 변수 선언이 가능합니다.

1.1. `let`: 블록 스코프 변수

let x = 10;
if (true) {
    let x = 20;
    console.log(x);  // 20 (블록 내에서 x 선언)
}
console.log(x);  // 10 (외부의 x)

1.2. `const`: 상수 선언

*const*는 재할당이 불가능한 상수를 선언할 때 사용됩니다.

const name = "Alice";
name = "Bob";  // TypeError: Assignment to constant variable

2. 화살표 함수 (Arrow Functions)

화살표 함수는 더 간결한 함수 선언 문법을 제공합니다. 특히 this 바인딩을 상위 스코프에서 상속받으므로, 기존 함수에서 **this**가 동적으로 변하는 문제를 해결합니다.

2.1. 화살표 함수의 기본 구문

const add = (a, b) => a + b;
console.log(add(2, 3));  // 5

2.2. `this` 바인딩

화살표 함수는 **this**가 상위 스코프를 참조하므로, 콜백 함수나 비동기 함수에서 유용합니다.

const person = {
    name: "Alice",
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};
person.greet();  // Hello, my name is Alice

3. 클래스 (Classes)

클래스는 JavaScript에서 **객체지향 프로그래밍(OOP)**을 위한 **문법적 설탕(Syntactic Sugar)**입니다. ES6 이전에는 프로토타입 기반으로 객체를 생성했지만, 클래스 구문을 통해 더 직관적이고 명확한 방식으로 객체와 상속을 구현할 수 있습니다.

3.1. 클래스 선언

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const alice = new Person('Alice', 25);
alice.greet();  // Hello, my name is Alice

3.2. 클래스 상속

extends 키워드를 사용해 상속을 구현할 수 있습니다.

class Employee extends Person {
    constructor(name, age, job) {
        super(name, age);  // 부모 클래스의 생성자 호출
        this.job = job;
    }

    work() {
        console.log(`${this.name} is working as a ${this.job}`);
    }
}

const bob = new Employee('Bob', 30, 'Engineer');
bob.greet();  // Hello, my name is Bob
bob.work();   // Bob is working as a Engineer

4. 템플릿 리터럴 (Template Literals)

템플릿 리터럴은 **백틱(`````)**을 사용하여 다중 행 문자열을 쉽게 작성하고, 문자열 내에 표현식을 삽입할 수 있는 기능을 제공합니다. 이는 기존의 문자열 연결 방식보다 가독성이 뛰어납니다.

4.1. 기본 사용법

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting);  // Hello, Alice!

4.2. 다중 행 문자열

const multiLine = `This is
a multi-line
string.`;
console.log(multiLine);

5. 디스트럭처링 할당 (Destructuring Assignment)

*디스트럭처링(구조 분해)**을 통해 객체나 배열의 값을 쉽게 추출하고, 변수를 한 번에 초기화할 수 있습니다.

5.1. 객체 디스트럭처링

const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name);  // Alice
console.log(age);   // 25

5.2. 배열 디스트럭처링

const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first);  // 1
console.log(second); // 2

6. 모듈 (Modules)

ES6 모듈 시스템을 통해 JavaScript는 모듈화를 지원합니다. **import**와 **export**를 사용하여 코드의 재사용성을 높이고, 모듈 간의 의존성을 명확하게 할 수 있습니다.

6.1. 모듈 내보내기 (`export`)

// math.js
export const add = (a, b) => a + b;

6.2. 모듈 가져오기 (`import`)

// app.js
import { add } from './math.js';
console.log(add(2, 3));  // 5

7. 프로미스 (Promises)

*프로미스(Promise)**는 비동기 작업을 처리하기 위한 새로운 방식입니다. 콜백 함수의 복잡성을 줄이고, 체이닝을 통해 비동기 코드를 더 읽기 쉽게 만듭니다.

7.1. 프로미스의 기본 사용법

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data loaded'), 1000);
    });
};

fetchData().then(data => {
    console.log(data);  // Data loaded
});

7.2. `Promise.all()`

*Promise.all()*을 사용하면 여러 프로미스를 병렬로 실행하고, 모두 완료되면 결과를 반환받을 수 있습니다.

Promise.all([fetchData(), fetchData()])
    .then(results => {
        console.log(results);  // ['Data loaded', 'Data loaded']
    });

8. 기본 매개변수 (Default Parameters)

ES6에서는 함수의 매개변수에 기본값을 설정할 수 있습니다. 이를 통해 함수 호출 시 인자를 생략하더라도 기본값을 사용할 수 있습니다.

8.1. 기본 매개변수 설정

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();           // Hello, Guest!
greet('Alice');    // Hello, Alice!

9. `for...of` 반복문

*for...of*는 이터러블 객체(배열, 문자열 등)를 순회할 때 사용하는 반복문입니다. 기존의 **for...in*은 객체의 키를 순회하지만, **for...of*는 값을 순회합니다.

9.1. 배열 순회

const numbers = [1, 2, 3];
for (const num of numbers) {
    console.log(num);  // 1, 2, 3
}

10. 심볼 (Symbols)

*심볼(Symbol)**은 ES6에서 새롭게 도입된 고유한 값으로, 주로 객체의 속성 키로 사용됩니다. 심볼은 충돌을 방지하기 위해 항상 고유한 값을 생성합니다.

10.1. 심볼 사용

const id = Symbol('id');
const user = {
    [id]: 1234,

    name: 'Alice'
};
console.log(user[id]);  // 1234

요약

ES6는 JavaScript의 가장 큰 업데이트 중 하나로, 많은 기능들이 추가되어 코드의 생산성과 유지보수성을 크게 향상시켰습니다.

let과 const: 블록 스코프 변수 선언으로 더 안전한 코딩 가능.
화살표 함수: 간결한 문법과 this 바인딩 문제 해결.
클래스: 객체지향 프로그래밍을 위한 클래스 지원.
템플릿 리터럴: 문자열 내에 표현식 삽입 및 다중 행 문자열 지원.
디스트럭처링: 객체나 배열의 값을 쉽게 추출.
모듈 시스템: import와 export를 통해 코드의 모듈화 가능.
프로미스: 비동기 작업을 간편하게 처리할 수 있는 프로미스 도입.

ES6는 모던 JavaScript 개발의 기반이 되는 표준으로, 더 효율적이고 명확한 코드를 작성할 수 있도록 도와줍니다.

코딩 스쿨 JavaScript