JS

Javascript ES8 문법정리

Kir93 2023. 10. 6. 13:43
728x90
반응형

2017년에 출시된 ECMAScript 8 (ES8)은 언어에 중요한 향상 및 추가 사항을 가져왔습니다.

이전 ES7일 때 변경사항이 적었던 것이 이것을 위해서라는 생각이 들 정도로 지금도 많이 사용하는 중요한 문법들이 추가된 버전이라고 생각합니다.

1. Async/Await

ES8은 async 및 await 키워드를 도입하여 자바스크립트에서 비동기 프로그래밍을 혁신적으로 개선했습니다.

이러한 기능은 프로미스(Promises) 작업을 더 직관적으로 처리하며 코드를 더 깨끗하고 가독성 있게 만듭니다.

// 이전
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('에러:', error);
  });

// ES8
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('에러:', error);
  }
}

2. Object.values() 및 Object.entries()

ES8는 객체에서 값 및 키-값 쌍을 추출하는 메서드인 Object.values() 및 Object.entries()를 도입했습니다.

이를 통해 객체 조작이 더 쉬워졌습니다.

// 이전
const person = { name: 'John', age: 30 };
const values = Object.keys(person).map(key => person[key]);
console.log(values);

const entries = [];
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    entries.push([key, person[key]]);
  }
}
console.log(entries);

// ES8
const person = { name: 'John', age: 30 };
const values = Object.values(person);
console.log(values);

const entries = Object.entries(person);
console.log(entries);

3. String Padding

ES8는 문자열의 시작 또는 끝에 패딩을 추가하는 메서드인 String.padStart() 및 String.padEnd()를 도입했습니다.

// 이전
const str = '5';
const paddedStr = '0'.repeat(2 - str.length) + str;
console.log(paddedStr);

// ES8
const str = '5';
const paddedStr = str.padStart(2, '0');
console.log(paddedStr);

4. Object.getOwnPropertyDescriptors()

ES8에서는 Object.getOwnPropertyDescriptors() 메서드가 도입되어 객체 속성의 자세한 설명자를 검색할 수 있게 되었습니다.

이를 통해 객체 속성의 자세한 정보를 더 쉽게 얻을 수 있습니다.

// 이전
const obj = {
  name: 'John',
};

const descriptor = Object.getOwnPropertyDescriptor(obj, 'name');
console.log(descriptor);

// ES8
const obj = {
  name: 'John',
};

const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.name);

5. Shared Memory 및 Atomics

ES8는 SharedArrayBuffer 및 Atomics와 같은 고급 동시성 제어 도구를 도입했습니다.

이 도구는 웹 워커 및 성능 중요한 애플리케이션에 중요한 역할을 합니다.

물론 이런 도구는 특수한 사용 사례를 위한 것이기 때문에 거의 사용할 일은 없습니다.

반응형