자바스크립트 ES6 주요 기능 정리

자바스크립트 ES6의 주요 기능 소개

ES6는 ECMAScript 2015로도 알려져 있으며, 자바스크립트의 언어 통치 규격을 제정한 중요한 버전입니다. 이 업데이트는 여러 가지 유용한 기능과 문법 개선을 포함하여 개발자들이 코드를 보다 간편하고 유지보수하기 쉽게 만들어 줍니다. 이번 포스트에서는 ES6에서 도입된 주요 기능들을 정리하여 살펴보겠습니다.

1. 변수 선언: let과 const

ES6에서는 새롭게 let과 const 키워드가 추가되었습니다. 이들은 블록 스코프를 갖는 변수를 선언할 수 있도록 해줍니다. let 키워드는 재할당이 가능하며, const는 상수의 선언에 사용되며 재할당이 불가능합니다. 이러한 변수를 사용함으로써 코드의 가독성과 안정성을 높일 수 있습니다.

2. 화살표 함수(Arrow Functions)

화살표 함수는 function 키워드 대신 =>를 사용하여 보다 간결하게 함수를 정의할 수 있게 해줍니다. 또한, 화살표 함수는 내부의 this 바인딩을 부모 스코프에서 상속받아 사용할 수 있어, 특히 콜백 함수로 활용할 때 유용합니다.

다음은 화살표 함수를 사용하는 예시입니다:

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

3. 클래스(Class)

ES6에서는 객체 지향 프로그래밍을 지원하기 위해 클래스를 도입하였습니다. class 키워드를 사용하여 객체의 틀을 정의하고, constructor 메서드로 객체의 초기화를 수행할 수 있습니다. 클래스를 통해 프로토타입 기반의 객체 생성 방식을 보다 직관적으로 사용할 수 있게 되었습니다.

class Person {
 constructor(name) {
  this.name = name;
 }
 sayHi() {
  return 안녕하세요, 제 이름은 ${this.name}입니다.;
 }
}
const person = new Person('이름');
console.log(person.sayHi());

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

템플릿 리터럴은 문자열을 다룰 때 여러 줄에 걸쳐 작성하거나 변수 값을 쉽게 삽입할 수 있도록 해줍니다. 백틱()으로 문자열을 감싸고, 중괄호(${})를 사용하여 변수를 삽입할 수 있습니다.

const name = '홍길동';
const greeting = 안녕하세요, ${name}님!;
console.log(greeting); // 안녕하세요, 홍길동님!

5. 모듈(Module)

ES6에서는 모듈 시스템을 도입하여 코드의 재사용성을 높였습니다. export와 import 키워드를 사용하여 특정 부분을 외부로 노출하거나 다른 모듈에서 가져올 수 있습니다. 이를 통해 코드의 구조를 명확하게 유지하고 충돌을 피할 수 있습니다.

// module.js
export const pi = 3.14;
// main.js
import { pi } from './module.js';
console.log(pi); // 3.14

6. 비구조화 할당(Destructuring)

비구조화 할당은 배열이나 객체에서 값을 추출하여 변수에 할당하는 데 유용합니다. 이 기능을 통해 코드의 양을 줄이고 가독성을 높일 수 있습니다.

const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 1 2
const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x, y); // 1 2

7. Promise

Promise는 비동기 작업을 처리하기 위한 새로운 방법을 제공합니다. 콜백 지옥을 피하면서 순차적인 비동기 작업을 쉽게 관리할 수 있도록 도와줍니다. Promise는 then과 catch 메서드를 사용하여 성공 및 실패 후속 처리를 정의할 수 있습니다.

const myPromise = new Promise((resolve, reject) => {
 // 비동기 작업 수행
 const success = true;
 if (success) {
  resolve('작업 성공!');
 } else {
  reject('작업 실패!');
 }
});
myPromise.then(response => console.log(response)).catch(error => console.error(error));

8. 스프레드 문법(Spread Syntax)

스프레드 문법은 배열이나 객체를 펼쳐서 다른 배열이나 객체에 복사하거나 병합하는 데 사용됩니다. 이를 통해 코드를 간결하게 만들 수 있습니다.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

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

ES6에서는 함수의 매개변수에 기본값을 설정할 수 있는 기능이 추가되었습니다. 이를 통해 함수 호출 시 매개변수를 명시하지 않을 경우, 자동으로 기본값이 할당됩니다.

const greet = (name = '아무개') => {
 return 안녕하세요, ${name}님!;
};
console.log(greet()); // 안녕하세요, 아무개님!

결론

ES6은 자바스크립트의 기능을 한층 더 풍부하고 편리하게 만들어 주는 업데이트입니다. 위에서 설명한 기능 외에도 많은 변화가 있었으며, 자바스크립트를 사용하는 개발자들에게는 필수적으로 알아두어야 할 사항입니다. 이러한 ES6의 기능들을 활용하여 더욱 효율적인 코드를 작성해 보시기 바랍니다.

자주 묻는 질문과 답변