ECMAScript 6 (줄여서 ES6, 또는 ECMAScript 2015)는 자바스크립트(JavaScript)의 대대적인 개정판으로, 2015년에 공식 발표되었습니다. ES6는 JavaScript의 기능성과 생산성을 획기적으로 개선하면서 현대적인 웹/앱 개발의 기반이 되었습니다.

아래에 ES6의 핵심 개념과 주요 기능들을 상세하게 설명해드리겠습니다.

🔰 ECMAScript란?

  • ECMAScript는 JavaScript의 표준 사양입니다.
  • ECMA(유럽 컴퓨터 제조 협회)의 TC39 위원회에서 관리하고 발전시키고 있습니다.
  • JavaScript는 ECMAScript 사양을 구현한 프로그래밍 언어입니다.

🚀 ES6의 주요 특징 및 기능

1. let과 const

  • 기존의 var는 함수 스코프(function scope)를 가지며, 호이스팅(hoisting) 문제를 유발함.
  • ES6는 **블록 스코프(block scope)**를 가지는 let과 상수 선언을 위한 const를 도입함.
let name = "Alice";
const age = 30;

✅ let: 값을 나중에 변경 가능
✅ const: 변경 불가능 (immutable)

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

  • 문자열을 백틱() “으로 감싸고 ${}로 변수나 표현식을 쉽게 삽입
const name = "Bob";
console.log(`Hello, ${name}!`); // Hello, Bob!

✅ 다중 줄 문자열도 가능

3. 화살표 함수 (Arrow Functions)

  • 짧고 간결한 함수 표현
const add = (a, b) => a + b;

✅ this 바인딩이 기존 함수와 다름 (lexical scope 사용)

4. 클래스 (Class)

  • 객체 지향 프로그래밍을 위한 문법적 설탕 (syntactic sugar)
class Person {
constructor(name) {
this.name = name;
}

greet() {
return `Hi, I'm ${this.name}`;
}
}

5. 모듈 (Modules)

  • 코드 분할 및 재사용성을 향상시킴 (import / export)
// math.js
export const add = (a, b) => a + b;

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

6. 디스트럭처링 (Destructuring)

  • 배열이나 객체의 값을 개별 변수로 쉽게 추출
// 배열
const [a, b] = [1, 2];

// 객체
const { name, age } = { name: 'Alice', age: 25 };

7. 디폴트 파라미터 (Default Parameters)

  • 함수의 기본 인자 설정 가능
function greet(name = "Guest") {
console.log(`Hello, ${name}`);
}

8. 스프레드 연산자 (...) & 나머지 파라미터

  • 복사, 병합, 나머지 추출 등 다양하게 활용
// 배열 병합
const nums = [1, 2, ...[3, 4]];

// 함수 파라미터
function sum(...args) {
return args.reduce((a, b) => a + b);
}

9. Promise (비동기 처리)

  • 콜백 지옥을 해결하기 위한 비동기 처리 방식
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data received"), 1000);
});
};

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

10. Map과 Set

  • 새로운 컬렉션 타입
const map = new Map();
map.set('key', 'value');

const set = new Set([1, 2, 3, 3]); // 중복 제거됨

📌 ES6 이후로도 계속 발전 중

ES6 이후에도 ES7, ES8, …, ES2024 등으로 ECMAScript는 매년 새로운 기능이 추가되고 있습니다. 하지만 ES6는 현재 자바스크립트의 기본 토대로 자리잡았으며, 이후의 모든 문법 발전의 기반입니다.

🧠 요약

기능설명
let/const새로운 변수 선언 방식
Template Literals문자열 보간과 멀티라인 문자열
Arrow Functions간결한 함수 선언 및 this 처리
Classes객체지향 문법 지원
Modules코드 분할과 재사용 가능
Destructuring배열/객체 분해 할당
Default Parameters기본 함수 인자 설정
Spread / Rest배열/객체 병합 및 분해
Promise비동기 처리 개선
Map / Set새로운 데이터 컬렉션

zerg96

Recent Posts

AI 해킹 시대, 4대 은행이 해외 법인 보안망부터 다시 짜는 이유

국내 금융권에서 AI를 이용한 해킹과 대규모 정보유출이 잇따르자, 은행들이 이제 해외 법인과 지점의 보안까지 다시…

2시간 ago

서울 집값은 11% 올랐는데 거래는 17% 줄었다, 토허제 1년의 역설

서울 전역이 토지거래허가구역으로 묶인 지 1년이 됐습니다. 집을 못 팔게 막으면 값이 내려갈 거라는 기대도…

2시간 ago

코스피 5연속 급락 뒤 2% 반등, 외국인·기관이 받쳤고 코스닥은 제자리

어제 5거래일 연속으로 밀렸던 코스피가 오늘 아침 확 반등했습니다. 오전 9시 12분 기준 코스피는 6,165.02로…

2시간 ago

네이버 vs 카카오, 한국 AI 전쟁의 진짜 승자는 누구인가?

네이버 하이퍼클로바X vs 카카오 AI — 한국 양대 IT 기업의 AI 전쟁, 기술 역량과 플랫폼…

2시간 ago

GPU를 사지 않고 빌린다? 네이버·아마존·구글이 같은 주에 꺼낸 AI 인프라 카드

AI 이야기는 이제 "어떤 모델이 더 똑똑한가"에서 "누가 계산 자원을 더 싸고 안정적으로 쥐고 있나"로…

3시간 ago

코스피 5.46% 급락 다음 날, 오늘 밤 9시 30분 미국 CPI가 진짜 변수인 이유

어제 코스피가 하루에 348.89포인트, 5.46% 빠지면서 6,035.35로 마감했습니다. 장중에는 5,911선까지 밀렸다가 겨우 6,000선 위로 올라왔는데요,…

4시간 ago