JavaScript 2017
JavaScript 2017 (ES8): ECMAScript 2017의 주요 기능
- *ECMAScript 2017 (ES8)**은 2017년에 발표된 JavaScript 표준으로, 비동기 처리를 더 간편하게 관리할 수 있는
**
async/await*를 도입하여 JavaScript의 비동기 작업을 크게 개선했습니다. 이외에도 객체와 문자열에 유용한 메서드들이 추가되었습니다.
이 가이드는 **ES8(ECMAScript 2017)**에서 추가된 주요 기능과 사용 예시를 설명합니다.
1. async / await: 비동기 함수 처리
- *
async*와 **await*는 프로미스(Promise) 기반의 비동기 작업을 더 간편하고 직관적으로 처리할 수 있게 해주는 새로운 구문입니다.async함수는 항상 프로미스를 반환하며,await키워드를 사용하면 프로미스가 해결될 때까지 기다린 후에 코드를 실행할 수 있습니다. 이는 비동기 코드를 마치 동기 코드처럼 읽기 쉽게 만들어 줍니다.
1.1. 기본 구문
async function fetchData() {
const response = await fetch('<https://api.example.com/data>');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));
1.2. async / await의 특징
async함수는 항상 프로미스를 반환합니다.- *
await*은 프로미스가 해결될 때까지 대기하며, 그 결과를 반환합니다. - 비동기 작업을 더 간단하게 처리할 수 있으며, **콜백 지옥(callback hell)**을 피할 수 있습니다.
2. Object.entries()와 Object.values()
ES8에서는 객체의 키와 값을 다루는 새로운 메서드들이 추가되었습니다. **Object.entries()**와
**Object.values()**를 사용하면 객체의 키-값 쌍 또는 값을 배열 형태로 쉽게 추출할 수 있습니다.
2.1. Object.entries()
- *
Object.entries()*는 객체의 키-값 쌍을 배열로 반환합니다. 배열의 첫 번째 요소는 키이고, 두 번째 요소는 값입니다.
const person = { name: 'Alice', age: 25 };
const entries = Object.entries(person);
console.log(entries);
// [['name', 'Alice'], ['age', 25]]
2.2. Object.values()
- *
Object.values()*는 객체의 값만을 배열로 반환합니다.
const person = { name: 'Alice', age: 25 };
const values = Object.values(person);
console.log(values); // ['Alice', 25]
3. String.prototype.padStart()와 padEnd()
문자열 패딩 메서드는 문자열의 길이를 맞추기 위해 앞이나 뒤에 특정 문자를 추가하는 기능을 제공합니다.
**padStart()**는 문자열의 앞에 패딩을 추가하고, **padEnd()**는 문자열의 뒤에
패딩을 추가합니다.
3.1. padStart()
const str = '5';
console.log(str.padStart(3, '0')); // '005'
3.2. padEnd()
const str = '5';
console.log(str.padEnd(3, '0')); // '500'
이 메서드는 숫자 형식을 맞추거나 포맷팅을 할 때 유용하게 사용할 수 있습니다.
4. Object.getOwnPropertyDescriptors()
- *
Object.getOwnPropertyDescriptors()*는 객체의 모든 속성 설명자를 반환하는 메서드입니다. 속성 설명자는 값, writable(수정 가능 여부), enumerable(열거 가능 여부), configurable(구성 가능 여부) 등의 정보를 포함합니다. 이 메서드는 주로 객체의 속성을 복사하거나 병합할 때 유용하게 사용됩니다.
4.1. Object.getOwnPropertyDescriptors() 사용 예시
const person = {
name: 'Alice',
get age() {
return 25;
}
};
const descriptors = Object.getOwnPropertyDescriptors(person);
console.log(descriptors);
// {
// name: { value: 'Alice', writable: true, enumerable: true, configurable: true },
// age: { get: [Function: get age], set: undefined, enumerable: true, configurable: true }
// }
5. 옵셔널 catch 바인딩
옵셔널 catch 바인딩은 catch 구문에서 오류 객체를 생략할 수 있는 기능입니다. 기존에는
catch 블록에서 항상 에러 객체를 선언해야 했지만, ES8부터는 에러 객체가 필요하지 않으면
생략할 수 있습니다. 이는 에러 객체를 사용하지 않는 경우 코드를 더 간결하게 만들어 줍니다.
5.1. 기존의 catch 구문
try {
// 코드 실행
} catch (error) {
console.log('오류 발생');
}
5.2. 옵셔널 catch 바인딩
try {
// 코드 실행
} catch {
console.log('오류 발생');
}
에러 객체가 필요 없을 때 더 간단하게 작성할 수 있습니다.
요약
- *ES8(ECMAScript 2017)**은 JavaScript의 비동기 처리와 객체 처리를 간편하게 만드는 몇 가지 중요한 기능을 추가했습니다.
async/await: 비동기 코드를 동기 코드처럼 작성할 수 있어, 프로미스 처리를 더 쉽게 만듭니다.- *
Object.entries()*와Object.values(): 객체의 키-값 쌍 또는 값만을 배열로 반환하는 메서드로, 객체의 데이터를 쉽게 다룰 수 있습니다. padStart()와padEnd(): 문자열의 길이를 맞추기 위해 패딩을 추가하는 메서드로, 숫자 포맷팅이나 문자열 정렬에 유용합니다.Object.getOwnPropertyDescriptors(): 객체의 모든 속성 설명자를 반환하여, 객체 속성 복사 및 병합 작업에 유용하게 사용됩니다.- 옵셔널
catch바인딩:catch블록에서 에러 객체를 생략할 수 있어, 불필요한 변수를 선언하지 않아도 됩니다.
ES8의 기능들은 JavaScript 개발자들이 더 직관적이고 효율적으로 코드를 작성할 수 있도록 도와줍니다.