JavaScript ES6 주요 기능 10가지: 개발자 가이드

ES6, 정확히는 ECMAScript 2015(EcmaScript 2015),는 JavaScript의 여섯 번째 에디션으로, 현대 웹 개발에 중요한 많은 기능을 도입했습니다. 이 가이드에서는 개발자가 꼭 알아야 할 ES6의 10가지 주요 기능을 설명합니다.

1. let과 const

let과 const는 변수를 선언할 때 사용하는 새로운 키워드입니다. var와 달리 블록 스코프를 가집니다.

javascript
let a = 10;
const b = 20;

let은 변수의 값을 변경할 수 있지만, const는 상수로 선언되어 값을 변경할 수 없습니다.

2. 화살표 함수 (Arrow Functions)

화살표 함수는 간단한 함수 표현을 위해 도입된 문법입니다. 함수의 본문과 함께 =>를 사용합니다.

javascript
const add = (a, b) => a + b;

화살표 함수는 this 바인딩 방식이 다르다는 점에서도 유용합니다.

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

템플릿 리터럴을 사용하면 문자열 내에 변수를 포함하거나 여러 줄의 문자열을 간편하게 작성할 수 있습니다.

javascript
const name = 'World';
console.log(`Hello, ${name}!`);

백틱(```)을 사용하여 문자열을 감싸고 ${}를 이용해 변수를 삽입합니다.

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

배열이나 객체의 속성을 쉽게 추출하여 변수에 할당할 수 있는 문법입니다.

javascript
const [a, b] = [1, 2];
const { name, age } = { name: 'Alice', age: 25 };

5. Default Parameters

함수를 호출할 때 인자가 전달되지 않으면 기본 값을 설정할 수 있습니다.

javascript
function greeting(name = 'Stranger') {
  return `Hello, ${name}!`;
}

함수를 호출할 때 인자 없이 호출하면, name은 'Stranger'가 됩니다.

6. 나머지 매개변수 (Rest Parameters)

나머지 매개변수는 함수 인자를 배열로 모을 때 사용합니다.

javascript
function sum(...args) {
  return args.reduce((acc, cur) => acc + cur, 0);
}

...args는 모든 인자를 배열로 모아줍니다.

7. 스프레드 연산자 (Spread Operator)

스프레드 연산자는 배열이나 객체를 개별 요소로 확장할 때 사용합니다.

javascript
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

배열은 물론, 객체에서도 사용할 수 있습니다.

javascript
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

8. 클래스 (Classes)

ES6는 객체 지향 프로그래밍을 더 쉽게 하기 위해 클래스 문법을 도입했습니다.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

클래스는 생성자와 메소드를 정의할 수 있는 구조를 제공합니다.

9. 모듈 (Modules)

ES6는 공식적으로 모듈 시스템을 도입하여, import와 export를 사용해 코드를 분할하고 재사용할 수 있게 했습니다.

javascript
// module.js
export const pi = 3.14;
export function add(a, b) {
  return a + b;
}

// main.js
import { pi, add } from './module';
console.log(add(pi, 2));

10. 프라미스 (Promises)

프라미스는 비동기 작업을 처리하기 위한 객체입니다. .then과 .catch 메소드를 사용해 비동기 작업의 성공 또는 실패를 처리할 수 있습니다.

javascript
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 3000);
  });
};

fetchData()
  .then(data => console.log(data))
  .catch(error => console.log(error));

프라미스는 콜백 지옥을 피하는데 유용합니다.

마무리

이 가이드는 ES6의 10가지 주요 기능을 다루고 있으나, ES6에서는 이 외에도 많은 중요한 기능들이 도입되었습니다. JavaScript의 최신 기능을 마스터하는 것은 현대 웹 개발에 매우 중요합니다. 이를 통해 코드의 효율성과 가독성을 크게 향상할 수 있습니다.