ES6 이후 추가된 주요 문법 한눈에 정리
개발/javascript&typescript1 2025. 12. 24. 07:43자바스크립트를 오래 사용하다 보면 ES5와 ES6 이후 문법의 차이를 체감하게 됩니다.
특히 요즘 작성되는 코드들은 대부분 ES6 이후 문법을 기본으로 하고 있어서, 전체 흐름을 한 번쯤 정리해 두는 것이 도움이 됩니다.
이번 글에서는 ES6(ECMAScript 2015) 이후 추가된 주요 문법들을 기능별로 묶어서 살펴보겠습니다.
1. 변수 선언 방식: var → let, const
ES6 이전에는 변수를 선언할 때 var만 사용했습니다. 하지만 var는 함수 스코프를 가지며, 의도치 않은 재선언이나 값 변경이 발생하기 쉬웠습니다.
ES6 이후에는 let과 const가 도입되었습니다.
- let
블록 스코프를 가지며, 값 변경이 필요한 변수에 사용합니다. - const
블록 스코프를 가지며, 재할당이 불가능한 상수에 사용합니다.
실무에서는 기본적으로 const를 사용하고, 값이 바뀌는 경우에만 let을 사용하는 방식이 일반적입니다.
2. 화살표 함수 (Arrow Function)
함수 표현식이 간결해졌고, this 동작 방식도 달라졌습니다.
기존 함수는 호출 방식에 따라 this가 달라졌지만, 화살표 함수는 상위 스코프의 this를 그대로 사용합니다.
이 특성 덕분에 콜백 함수나 이벤트 처리 코드에서 의도치 않은 this 문제를 줄일 수 있습니다.
짧은 로직이나 콜백에서는 가독성이 크게 좋아지는 장점이 있습니다.
3. 템플릿 리터럴 (Template Literal)
문자열을 + 연산자로 이어 붙이던 방식에서 벗어나, 백틱(`)을 사용해 문자열을 표현할 수 있게 되었습니다.
- 변수 삽입이 간단해짐
- 여러 줄 문자열 작성이 쉬워짐
UI 문구, 로그 메시지, HTML 문자열을 다룰 때 특히 유용합니다.
4. 구조 분해 할당 (Destructuring)
객체나 배열의 값을 한 번에 꺼내서 변수로 선언할 수 있는 문법입니다.
- 객체에서 필요한 값만 선택적으로 추출 가능
- 배열 순서에 맞춰 간결하게 변수 선언 가능
API 응답 처리나 함수 인자 전달 시 코드가 훨씬 깔끔해집니다.
5. 기본 매개변수 (Default Parameter)
함수 호출 시 인자가 전달되지 않았을 때 기본값을 설정할 수 있습니다.
이전에는 매개변수 유효성 체크를 함수 내부에서 처리해야 했지만, 이제는 함수 선언부에서 해결할 수 있어 코드가 단순해졌습니다.
6. Spread / Rest 문법
점 세 개(...)를 사용하는 문법으로, 상황에 따라 역할이 달라집니다.
- Spread
배열이나 객체를 펼쳐서 복사하거나 병합할 때 사용 - Rest
여러 개의 인자를 하나의 배열로 받을 때 사용
불변성을 유지하면서 데이터를 다뤄야 하는 경우에 특히 자주 사용됩니다.
7. 객체 리터럴 확장 문법
객체를 생성할 때 문법이 간결해졌습니다.
- 프로퍼티 이름과 변수명이 같으면 축약 가능
- 메서드 선언 시 function 키워드 생략 가능
- 계산된 프로퍼티 이름 사용 가능
상태 객체나 설정 객체를 다룰 때 코드 가독성이 크게 개선됩니다.
8. 클래스 (class)
ES6부터 class 문법이 도입되면서 객체 지향 스타일 코드 작성이 쉬워졌습니다.
기존의 프로토타입 기반 상속을 내부적으로 사용하지만, 문법 자체는 훨씬 직관적입니다.
- constructor로 초기화
- extends로 상속
- super로 부모 클래스 접근
프레임워크나 대규모 프로젝트에서는 거의 필수적으로 사용됩니다.
9. Promise와 비동기 처리
콜백 지옥을 해결하기 위해 Promise가 도입되었습니다.
- then / catch를 통한 비동기 흐름 관리
- 에러 처리 구조가 명확해짐
이후 등장한 async / await 문법과 함께 사용하면, 비동기 코드도 동기 코드처럼 읽히는 장점이 있습니다.
10. async / await
Promise를 기반으로 한 비동기 처리 문법으로, 현재 가장 널리 사용됩니다.
- 비동기 로직을 순차적으로 작성 가능
- try / catch로 에러 처리 가능
API 통신, 파일 처리, 네트워크 로직에서 사실상 표준처럼 사용되고 있습니다.
11. 모듈 시스템 (import / export)
파일 단위로 코드를 분리하고 재사용할 수 있는 문법입니다.
- export로 외부 공개
- import로 필요한 기능만 불러오기
대규모 프로젝트에서 의존성 관리와 코드 구조화에 핵심적인 역할을 합니다.
12. 기타 알아두면 좋은 문법들
- Optional Chaining (?.)
객체 체인 접근 시 에러 방지 - Nullish Coalescing (??)
null, undefined일 때만 기본값 적용 - for...of
배열, 문자열, iterable 순회 - Map / Set
키-값 관리, 중복 없는 데이터 처리
모두 ES6 이후 점진적으로 추가되며 실무에서 자주 사용됩니다.
ES6 이후 자바스크립트는 단순한 스크립트 언어를 넘어, 대규모 애플리케이션을 안정적으로 개발할 수 있는 언어로 크게 발전했습니다.
처음에는 문법이 많아 보일 수 있지만, 실제로는 코드 가독성과 유지보수를 위한 개선들이 대부분입니다.
이미 사용하고 있는 문법이라도, 이렇게 한 번 정리해 두면 코드 리뷰나 리팩토링 시 큰 도움이 됩니다.
