여기에서 ES6(ECMAScript 2015)는 JavaScript 문법을 현대화 한 2015년 표준으로, let/const, 화살표 함수, 클래스, Promise 등 핵심 기능을 도입한 대규모 업데이트이다. 브라우저에서 지원하기 시작해서 일반 사용자는 알지 못하는 부분이지만 개발자에게는 큰 변화이다.
현대 JavaScript의 핵심 ES6 문법 정리
JavaScript는 ES6 이후로 급격히 현대적인 언어로 발전했다. 과거에는 길고 복잡했던 표현들이 간결하게 개선되었고, 각 기능은 실제 웹 개발에서 필수적으로 사용된다. 특히 DOM 조작과 서버 통신 작업을 수행하는 데 큰 도움이 된다.
const와 let: 변수 선언의 기준
var를 더 이상 쓰지 않는 이유는 스코프가 불명확하고 예측하기 어려운 동작이 많기 때문이다. 현재는 대부분의 프로젝트에서 const와 let만 사용한다.
- const: 변경되지 않는 값에 사용
- let: 변경 가능한 값에 사용
const userName = 'gozzle'; let count = 0; count++;
템플릿 문자열: 문자열 결합의 표준
문자열을 + 연산자로 이어 붙이던 방식은 더 이상 효율적이지 않다. 템플릿 문자열을 사용하면 표현식과 줄바꿈을 자연스럽게 처리할 수 있다.
const name = 'gozzle';
const msg = `Hello, ${name}. Welcome!`;
화살표 함수: 함수 표현식의 간결화
화살표 함수는 현재 가장 널리 쓰이는 함수 형태다. 특히 콜백을 다룰 때 코드 가독성이 크게 개선된다.
// 기존
function add(a, b) {
return a + b;
}
// ES6 방식
const add = (a, b) => a + b;
구조 분해 할당: 객체와 배열을 빠르게 꺼내는 방법
배열과 객체에서 특정 값을 추출하는 과정을 간단하게 만들며, 코드 양을 크게 줄여준다.
const user = { id: 1, name: 'gozzle' };
const { id, name } = user;
const arr = [10, 20, 30];
const [a, b] = arr;
스프레드와 Rest 문법
스프레드 문법은 배열이나 객체를 펼쳐 새로운 데이터를 만들 때 사용한다. 반대로 rest는 여러 값을 하나로 모을 때 사용한다.
// 스프레드
const base = [1, 2, 3];
const extended = [...base, 4, 5];
// rest
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
모듈(import/export) 개념
ES6 모듈은 코드 규모가 커질수록 중요해진다. 기능을 파일 단위로 관리하고 재사용성을 높인다. 브라우저에서도 기본적으로 지원되며, 복잡한 웹 어플리케이션에서도 구조적인 개발이 가능하다.
// module.js
export function greet(name) {
return `Hi, ${name}`;
}
// main.js
import { greet } from './module.js';
console.log(greet('gozzle'));
ES6를 익혀야 하는 이유
지금의 DOM 개발은 ES6 문법을 기반으로 이루어진다. 코드가 명확해지고, 버그 발생 가능성이 줄어들며, 최신 라이브러리·브라우저 환경과 완벽하게 호환되기 때문이다. 또한 대부분의 개발 문서와 예시는 ES6 기준으로 작성되어 있다.
- 더 짧고 가독성 좋은 코드
- 버그를 줄이는 명확한 스코프 체계
- 최신 브라우저와의 높은 호환성
- 프로젝트 확장 시 유지보수 효율 극대화
다음 3편에서는 DOM 조작의 핵심 패턴 10가지를 실전 중심으로 정리한다. 이 단계에 도달하면 대부분의 웹 UI 기능을 순수 JavaScript로 구현할 수 있다.
