ES6 완벽 정리: 자바스크립트 개발자가 꼭 알아야 할 핵심 기능

ES6(ECMAScript 2015) 개요

ES6(ECMAScript 2015)는 자바스크립트의 표준인 ECMAScript의 6번째 버전으로, 기존 ES5의 단점을 보완하고 더욱 강력한 기능을 추가한 중요한 업데이트입니다. ES6 이후에도 ES7, ES8 등이 나왔지만, ES6는 현재의 모던 자바스크립트 개발에서 필수적인 개념으로 자리 잡았습니다.

 

 

img

 

---

ES6의 주요 기능 및 문법 개선

 

1. let과 const (변수 선언 방식 개선)

ES5에서는 var 키워드만을 사용하여 변수를 선언했습니다. 하지만 var는 함수 스코프를 가지며, 변수 호이스팅으로 인해 의도치 않은 버그가 발생할 가능성이 컸습니다. ES6에서는 let과 const가 도입되어 블록 스코프를 가지도록 개선되었습니다.

let name = "Alice"; // 재할당 가능
const age = 25; // 재할당 불가능

• let: 블록 스코프를 가지며, 재할당이 가능합니다.
• const: 블록 스코프를 가지며, 값이 변경되지 않는 상수를 선언할 때 사용합니다.

 

2. 화살표 함수(Arrow Function)

기존 함수 표현식보다 더 간결하게 함수를 정의할 수 있으며, this의 바인딩 방식도 기존 함수와 다르게 동작합니다.

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

• 기본 함수 표현식보다 코드가 짧고 직관적입니다.
• this가 상위 스코프의 값을 그대로 유지하므로 bind()가 필요 없습니다.

 

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

ES5에서는 문자열을 연결할 때 + 연산자를 사용해야 했지만, ES6에서는 백틱()과 ${}`를 사용하여 더 직관적으로 문자열을 조합할 수 있습니다.

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

 

4. 디스트럭처링(Destructuring)

배열이나 객체에서 값을 쉽게 추출할 수 있는 기능입니다.

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

 

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

함수의 매개변수에 기본값을 설정할 수 있습니다.

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

 

 

반응형

 

 

 

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

배열이나 객체를 쉽게 복사하거나 확장할 수 있습니다.

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

 

7. 클래스(Class)

객체 지향 프로그래밍(OOP)을 지원하기 위해 class 문법이 도입되었습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

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

 

8. 모듈 시스템(ES6 Modules)

ES6에서는 import와 export를 사용하여 코드를 모듈화할 수 있습니다.

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

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

 

9. 프로미스(Promise)

비동기 작업을 더 쉽게 관리할 수 있도록 Promise가 도입되었습니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data loaded"), 2000);
  });
};
fetchData().then(console.log); // 2초 후 "Data loaded" 출력

 

10. 심볼(Symbol)

Symbol은 유일한 값을 가지는 원시 데이터 타입입니다.

const uniqueKey = Symbol("key");
const obj = { [uniqueKey]: "value" };
console.log(obj[uniqueKey]); // "value"

 

 

 

---

ES6 vs ES5 비교

 

비교 항목ES5ES6

변수 선언	var	let, const
함수 선언	일반 함수 사용	화살표 함수 지원
문자열	+ 연산자로 연결	템플릿 리터럴 사용
객체 다루기	복잡한 접근 방식	디스트럭처링 지원
모듈 시스템	없음	import, export 지원
비동기 처리	콜백 함수 사용	Promise 도입

 

 

 

---

ES6를 배워야 하는 이유

 

1. 가독성 향상 → 템플릿 리터럴, 화살표 함수 등으로 코드가 더 간결해짐.
2. 효율적인 비동기 처리 → Promise와 async/await 지원.
3. 모듈 시스템 지원 → 유지보수와 협업이 쉬워짐.
4. 객체 지향 프로그래밍(OOP) 가능 → class 문법 제공.
5. 최신 프레임워크와 호환성 → React, Vue, Angular 같은 프레임워크에서 필수적.

 

 

---

 

 

ES6는 자바스크립트의 현대적인 문법과 기능을 제공하여 개발 생산성을 높이고, 유지보수를 쉽게 만들어 줍니다. 최신 프레임워크와의 호환성도 뛰어나므로, 자바스크립트를 사용한다면 반드시 익혀야 하는 필수 개념입니다!