오늘은 ES6 문법을 정리해보려고 합니다.
ES6(ECMAScript 2015)는 Javascript 표준의 6번째 버전입니다.
주요 차이점은 아래의 10가지입니다.
1. let과 const
2. 템플릿 리터럴 (Template Literals)
3. 화살표 함수 (Arrow Function)
4. 구조분해 할당 (Destructuring Assignment)
5. 기본 매개변수 (Default Parameters)
6. 스프레드 연산자 (...)와 나머지 파라미터
7. 클래스 (Class)
8. 모듈 (Modules)
9. 프로미스 (Promises)
10. Symbol 타입
ES6는 말 그대로 '표준'입니다.
현대적인 코드를 사용하면 코드가 간결해지고 생산성이 향상될 수 있습니다.
최근 프론트엔드에서는 ES6+를 요구하고 있지만, 과거 버전에 대한 이해도 중요합니다.
1. 레거시 코드(기존의 코드)를 최신 문법으로 리팩토링 할 수 있는가?
2. 구글링한 과거 버전의 코드를 해석해서 유지 보수할 수 있는가?
이 두 가지를 위해서 ES5와 같은 과거 버전의 표준 또한 구분할 수 있어야 합니다.
그리고 모든 회사가 최신 문법을 사용하진 않기 때문에 회사의 규칙에 맞게 사용하는 것이 올바르다고 할 수 있습니다.
1. 변수 선언 (var, let, const)
ES6에서는 let과 const 키워드가 추가되었습니다. 쉬운 이해를 위해 이 세가지를 비교해보겠습니다.
- var은 재정의 재선언 모두 가능하다.
- let은 가변 변수로, 재정의가 가능하지만 재선언은 불가능하다.
- const는 불변 변수로, 재정의와 재선언 모두 불가능하다.
이러한 특징으로 세 변수 선언을 구분할 수 있습니다.
// 1. var: 재선언 O, 재할당 O
var x = 10;
var x = 20; // 재선언 가능
x = 30; // 재할당 가능
console.log("var:", x); // 출력: 30
// 2. let: 재선언 X, 재할당 O
let y = 10;
// let y = 20; // ❌ SyntaxError: Identifier 'y' has already been declared
y = 30; // ✅ 재할당 가능
console.log("let:", y); // 출력: 30
// 3. const: 재선언 X, 재할당 X
const z = 10;
// const z = 20; // ❌ SyntaxError: Identifier 'z' has already been declared
// z = 30; // ❌ TypeError: Assignment to constant variable
console.log("const:", z); // 출력: 10
재선언 : 똑같은 이름의 변수를 다시 만드는 것.
재정의: 값이 지정된 변수에 값을 바꾸려는 것.
var의 문제점
- 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다.
- 코드가 길어질 때 어디에서 어떻게 사용되는지 파악하기 어렵다.
- 함수 레벨 스코프로 인해 함수 외부에서 선언된 변수는 모두 전역 변수가 된다.
- 변수 선언문 이전의 변수를 참조하면 언제나 undefined를 반환한다. (호이스팅 발생)
-> 따라서 let과 const 키워드를 사용하는 것을 권장합니다.
호이스팅에 관해서는 따로 글을 작성해보겠습니다.
2. 템플릿 리터럴(Template literals)
템플릿 리터럴은 ES6부터 도입된 문자열 표기법으로, 문자열 생성시 따옴표 대신 백틱(`)을 사용합니다.
따옴표와 달리 백틱 안에서는 줄바꿈이 반영됩니다. 또한, 문자열 사이에 변수나 연산을 넣을 때는 &{}사이에 표현식을 삽입합니다.
파이썬을 사용해보신 분들은 익숙하게 사용하실 수 있습니다.
var jsp = "자바스크립트";
// 기존 코드
console.log("이건 " + jsp + "입니다.");
// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);
// 출력 결과 -> 이건 자바스크립트입니다.
백틱은 작은 따옴표와는 다릅니다!
일반적으로 키보드 '!' 버튼 옆에 위치해 있습니다.
3. 화살표 함수(Arrow function)
화살표 함수는 함수 표현식을 보다 단순하고 간결하게 작성하는 문법입니다.
const functionName = (parameters) => {
// 함수 본문
};화살표 함수의 기본 문법은 위와 같습니다.
// 기본 함수 형식
let sum = function(a, b) {
return a + b;
};
// 화살표 함수 형식
let sum = (a, b) => a + b;화살표 함수를 사용함으로써 위 예시처럼 함수 표현식을 보다 간결하게 줄일 수 있습니다.
특징
- 인수가 하나 밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
- 인수가 없을 때는 괄호를 비워놓으면 되지만, 이 때 괄호는 생략할 수 없다.
- 화살표 함수가 단일 표현식을 반환하는 경우, 중괄호({})와 return 키워드를 생략할 수 있다.
4. 구조분해 할당 (비구조화 할당)
구조분해 할당을 통해 객체와 배열의 값을 쉽게 변수로 저장할 수 있습니다.
객체에서 값을 꺼낼 때는 중괄호를 사용해서 key와 같은 이름으로 꺼내올 수도 있고, key와 다른 이름으로 꺼내올 수도 있습니다.
객체의 경우
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Destructuring Assignment
let { firstName, age } = person;
// let {myFirstName: firstName, myAge: age} = person;
배열의 경우
// Create an Array
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// Destructuring Assignment
let [fruit1, fruit2] = fruits;
이렇게 배열의 값을 간단하게 변수로 저장할 수 있습니다.
만약 구조분해할당을 하지 않는다면 위 코드는 아래처럼 나타낼 수 있겠죠?
구조분해할당 X
//바구조화할당 전 코드
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit1 = fruit[0];
let fruit2 = fruit[1];
console.log(fruit1);
5. 기본 매개변수(Default Parameters)
함수에 인자를 전달하지 않거나 undefined를 전달하면, 미리 지정한 기본값이 자동으로 사용됩니다.
기본 문법
function func(param = defaultValue) {
// ...
}
- 함수에 인자가 전달되지 않았을 때 defaultValue에 지정한 값이 자동으로 사용됩니다.
예시
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!
주의해야할 점
1. undefined만 기본값으로 처리됨 - (null값, 0, '' 등은 처리되지 않음)
function test(x = 10) {
console.log(x);
}
test(); // 10
test(undefined); // 10
test(null); // null (기본값 안 씀)
test(0); // 0
6. 스프레드 연산자 (...)와 나머지 파라미터 부터 10. Symbol 타입까지는 다음 편에 이어서 작성하도록 하겠습니다.
'개발 > Frontend' 카테고리의 다른 글
| [Javascript] ES6 기초 문법 정리 (2) (0) | 2025.05.30 |
|---|
