JAVASCRIPT) es6 문법 특징과 차이
안녕하세요! 오늘은 JavaScript ES6(ECMAScript 2015)의 주요 특징과 새로운 문법에 대해 알아보겠습니다. ES6는 JavaScript의 큰 전환점이 된 버전으로, 코드의 가독성과 유지보수성을 향상시키는 여러 가지 새로운 기능과 문법을 도입했습니다. 이번 글에서는 ES6의 정의와 주요 특징, 사용 방법, 그리고 코드 예시를 통해 ES6에 대해 자세히 설명하겠습니다.
ES6란?
ES6(ECMAScript 2015)는 JavaScript 언어 사양의 여섯 번째 판으로, 2015년에 발표되었습니다. 이 버전에서는 많은 새로운 기능과 개선된 문법이 도입되어 개발자들이 더 쉽고 효율적으로 코드를 작성할 수 있게 되었습니다.
ES6의 주요 특징
1. let과 const
ES6에서는 변수 선언을 위해 var 대신 let과 const 키워드를 도입했습니다. let은 블록 스코프를 가지며, 재할당이 가능합니다. const는 블록 스코프를 가지며, 선언과 동시에 초기화되어야 하고 재할당이 불가능합니다.
1
2
3
4
5
6
7
// let 예시
let name = 'John';
name = 'Doe'; // 재할당 가능
// const 예시
const age = 30;
// age = 31; // 오류: 재할당 불가
2. 화살표 함수
화살표 함수는 간결한 문법과 더불어 this 바인딩이 정적으로 결정된다는 특징을 가지고 있습니다.
1
2
3
4
5
6
7
// 기존 함수 표현식
const add = function(a, b) {
return a + b;
};
// 화살표 함수
const add = (a, b) => a + b;
3. 템플릿 리터럴
템플릿 리터럴은 문자열 내에 변수와 표현식을 포함할 수 있는 기능을 제공합니다. 이는 백틱(backtick, `)을 사용하여 정의합니다.
1
2
3
const name = 'John';
const message = `Hello, ${name}!`;
console.log(message); // "Hello, John!"
4. 디스트럭처링 할당
디스트럭처링 할당은 배열이나 객체의 값을 쉽게 추출할 수 있는 문법입니다.
1
2
3
4
5
6
7
// 배열 디스트럭처링
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
// 객체 디스트럭처링
const person = { name: 'John', age: 30 };
const { name, age } = person;
5. 기본 매개변수
ES6에서는 함수의 매개변수에 기본값을 설정할 수 있습니다.
1
2
3
4
5
6
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('John')); // "Hello, John!"
6. Rest 파라미터와 스프레드 연산자
Rest 파라미터는 함수 매개변수에서 나머지 인수를 배열로 받을 수 있게 합니다. 스프레드 연산자는 배열이나 객체를 개별 요소로 확장할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
// Rest 파라미터
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // 6
// 스프레드 연산자
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]
7. 클래스
ES6에서는 객체 지향 프로그래밍을 위한 클래스를 도입했습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const john = new Person('John', 30);
john.greet(); // "Hello, my name is John and I am 30 years old."
8. 모듈
ES6 모듈은 import와 export 키워드를 사용하여 모듈을 정의하고 불러올 수 있게 합니다.
1
2
3
4
5
6
7
8
9
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2
ES6의 다른 유용한 기능들
1. 향상된 객체 리터럴
ES6에서는 객체 리터럴을 작성할 때 속성과 메서드를 간결하게 정의할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
const name = 'John';
const age = 30;
const person = {
name,
age,
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};
person.greet(); // "Hello, my name is John and I am 30 years old."
2. 프로미스
프로미스는 비동기 작업을 처리하기 위한 새로운 방법을 제공합니다.
1
2
3
4
5
6
7
8
9
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data fetched');
}, 2000);
});
};
fetchData().then(data => console.log(data)); // "Data fetched"
ES6의 차이점과 이점
- 가독성 향상: 새로운 문법은 코드의 가독성을 높여줍니다.
- 유지보수성 향상: 블록 스코프와 상수의 도입으로 코드의 유지보수성이 향상됩니다.
- 비동기 처리 간소화: 프로미스와 async/await 문법으로 비동기 처리가 간소화됩니다.
- 객체 지향 프로그래밍 지원: 클래스 문법 도입으로 객체 지향 프로그래밍이 용이해졌습니다.
결론
ES6는 JavaScript에 많은 새로운 기능과 개선된 문법을 도입하여 개발자들이 더 쉽고 효율적으로 코드를 작성할 수 있게 합니다. 이 블로그 글이 ES6의 주요 특징과 새로운 문법을 이해하는 데 도움이 되었기를 바랍니다. 추가적인 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요. 여러분의 JavaScript 여정을 응원합니다!
감사합니다! 다음에 더 유익한 정보로 찾아뵙겠습니다.