자바스크립트 ES6 핵심 변화

jjade·2026년 2월 20일

자바스크립트 ES6 핵심 변화 요약 및 코드 예시

1. ES6 도입 배경

기존 자바스크립트는 복잡한 웹 애플리케이션을 개발하기에 구조적인 한계가 있었음. 이를 해결하고 현대적인 개발 환경을 구축하기 위해 대규모 업데이트가 진행됨. 특히 신입 개발자 기술 면접이나 리액트(React) 같은 모던 프론트엔드 프레임워크를 다룰 때 반드시 알아야 하는 핵심 기반임.

변수 관리 문제: 엉성한 유효 범위(Scope)로 인해 예측 불가능한 버그 발생.
콜백 지옥 (Callback Hell): 비동기 작업 처리 시 코드가 심하게 중첩됨.
모듈 시스템 부재: 코드를 여러 파일로 쪼개고 관리하는 표준 방법이 없었음.

2. 핵심 변화 8가지 (코드 예시 포함)

① `let`, `const` 도입 (블록 스코프)

기존 var는 함수 단위 스코프를 가져서 제어가 어렵고 재선언이 가능해 버그의 주범이었음. ES6부터는 블록 단위 {} 스코프를 가지는 let과 const가 도입됨.

let: 재선언 불가, 값 변경 가능. (값이 바뀔 변수에 사용)
const: 재선언 불가, 값 변경 불가. (상수 선언에 사용, 기본적으로 가장 많이 권장됨)

// Before (var)
var a = 1;
var a = 2; // 에러 안 남 (의도치 않은 덮어쓰기 위험)

// After (let, const)
let b = 1;
b = 2; // 값 변경 가능

const c = 1;
// c = 2; // TypeError 발생 (상수는 변경 불가)

② 화살표 함수 (Arrow Function)

함수 선언 문법을 간결하게 만들고, 기존 함수의 복잡한 this 바인딩 문제를 해결함. 자신만의 this를 생성하지 않고 상위 스코프의 this를 그대로 유지하기 때문에 콜백 함수로 넘길 때 매우 유용함.

// Before
const addES5 = function(a, b) {
  return a + b;
};

// After
const addES6 = (a, b) => a + b; // 실행문이 한 줄이면 중괄호와 return 생략 가능

③ 템플릿 리터럴 (Template Literal)

백틱(`)을 사용하여 문자열과 변수 결합을 직관적으로 개선함. 줄바꿈 기호(\n) 없이도 줄바꿈이 그대로 인식됨.

const name = "김개발";
const job = "프론트엔드 개발자";

// Before
var introES5 = "안녕하세요. 저는 " + name + "이고,\n" + job + "입니다.";

// After
const introES6 = `안녕하세요. 저는 ${name}이고,
${job}입니다.`;

④ 구조 분해 할당 (Destructuring)

객체나 배열에서 필요한 데이터만 변수로 쉽게 추출함. 리액트에서 컴포넌트의 props를 넘겨받거나 useState를 다룰 때 아주 자주 쓰이는 패턴임.

const user = { name: "지민", age: 25, city: "서울" };

// Before
var nameES5 = user.name;
var ageES5 = user.age;

// After (객체 구조 분해)
const { name, age } = user;
console.log(name); // "지민"

// 배열 구조 분해
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;
console.log(firstColor); // "red"

⑤ 전개 연산자 (Spread Operator)

점 세 개(...)를 사용해 배열이나 객체의 요소를 쉽게 복사하거나 합칠 수 있음. 원본 데이터를 직접 훼손하지 않고 새로운 데이터 복사본(상태)을 만들어야 할 때 필수적으로 사용됨.

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// 객체 복사 및 속성 수정
const user1 = { name: "철수", age: 20 };
const updatedUser = { ...user1, age: 21 }; // { name: "철수", age: 21 }

⑥ 기본 매개변수 (Default Parameters)

함수를 호출할 때 값을 전달하지 않았을 경우 사용할 기본값을 미리 설정할 수 있음. 코드의 방어력을 높여줌.

// Before
function greetES5(name) {
  var userName = name || "손님";
  console.log("환영합니다, " + userName);
}

// After
const greetES6 = (name = "손님") => {
  console.log(`환영합니다, ${name}`);
};

greetES6(); // 환영합니다, 손님
greetES6("영희"); // 환영합니다, 영희

⑦ 프로미스 (Promise)

서버에서 데이터를 받아오는 등의 비동기 처리 방식을 개선하여 콜백 지옥을 해결함. .then(), .catch() 메서드로 성공/실패 결과를 깔끔하게 체이닝하여 처리함. (이후 등장한 async/await 문법의 기반이 됨)

// Promise 예시
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 수신 완료");
      // 에러 발생 상황: reject("에러 발생");
    }, 1000);
  });
};

fetchData()
  .then((data) => console.log(data)) // 성공 시 실행
  .catch((error) => console.error(error)); // 실패 시 실행

⑧ 모듈 (Module - Import / Export)

파일 단위로 코드를 분리하고 필요한 것만 가져다 쓸 수 있는 표준 방식. 전역 변수 이름이 겹쳐서 충돌하는 것을 막고, 코드 재사용성을 극대화함.

// math.js 파일 (내보내기)
export const add = (a, b) => a + b;
export const sub = (a, b) => a - b;

// app.js 파일 (가져오기)
import { add, sub } from './math.js';

console.log(add(10, 5)); // 15

jjade

끊임없는 에너지를 공유하는 핫스팟 같은 개발자 최준서입니다!

이전 포스트

자바스크립트 ES6 핵심 변화