es6 문법 특징과 차이
ES6 문법 특징과 차이
ECMAScript 6 (ES6) 또는 ECMAScript 2015는 자바스크립트의 주요 업데이트로, 많은 새로운 기능과 문법을 도입하여 개발자 경험을 크게 향상시켰습니다. ES6는 이전 버전(ES5)과 비교하여 여러 면에서 코드 작성 방식을 변화시켰습니다. 여기서는 ES6의 주요 특징과 이를 통해 어떻게 자바스크립트가 발전했는지를 살펴보겠습니다.
ES6의 주요 특징
1. 블록 스코프 변수 선언 (let과 const)
ES5에서는 var 키워드를 사용하여 변수를 선언했지만, 이는 함수 스코프를 가집니다. ES6는 블록 스코프를 가진 let과 const를 도입하여 변수를 선언합니다
1
2
3
4
5
6
7
8
9
if (true) {
let x = 10;
const y = 20;
console.log(x); // 출력: 10
console.log(y); // 출력: 20
}
// console.log(x); // ReferenceError
// console.log(y); // ReferenceError
2. 화살표 함수
화살표 함수는 더 간결한 함수 표현식입니다. this 바인딩이 함수 선언 시 상위 스코프를 상속받는다는 중요한 특징이 있습니다.
1
2
3
const add = (a, b) => a + b;
console.log(add(2, 3)); // 출력: 5
3. 템플릿 리터럴
백틱(`)을 사용하여 문자열을 표현하며, ${expression} 구문을 통해 문자열 내에서 표현식을 삽입할 수 있습니다.
1
2
3
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 출력: Hello, Alice!
4. 디스트럭처링 할당
배열이나 객체의 값을 개별 변수에 쉽게 할당할 수 있습니다.
배열 디스트럭처링
1
2
3
4
const [a, b] = [1, 2];
console.log(a); // 출력: 1
console.log(b); // 출력: 2
객체 디스트럭처링
1
2
3
4
const {name, age} = {name: 'Bob', age: 25};
console.log(name); // 출력: Bob
console.log(age); // 출력: 25
5. 기본 매개변수
1
2
3
4
5
6
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // 출력: Hello, Guest!
greet('Alice'); // 출력: Hello, Alice!
6. 스프레드 연산자와 나머지 매개변수
스프레드 연산자
1
2
const arr = [1, 2, 3];
console.log(...arr); // 출력: 1 2 3
나머지 매개변수
1
2
3
4
5
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 출력: 6
7. 클래스
1
2
3
4
5
6
7
8
9
10
11
12
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
const person = new Person('Alice');
person.greet(); // 출력: Hello, Alice
ES6의 도입 배경과 중요성
ES6는 자바스크립트의 생산성과 유지 보수성을 크게 향상시켰습니다. 다음과 같은 이유로 ES6는 중요한 업데이트입니다:
더 간결하고 읽기 쉬운 코드: 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당 등은 코드를 더 간결하고 직관적으로 만듭니다.
모듈화: 모듈 시스템은 코드의 재사용성과 유지 보수성을 높입니다.
비동기 처리: 프로미스와 같은 비동기 처리 방식은 비동기 코드의 가독성을 크게 향상시킵니다.
객체 지향 프로그래밍: 클래스 문법을 통해 객체 지향 프로그래밍이 더욱 쉬워졌습니다.
강력한 기능: 심볼, 스프레드 연산자, 나머지 매개변수 등은 복잡한 작업을 간단하게 처리할 수 있게 해줍니다.