애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Javascript ES8 문법정리
    JS 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와 같은 고급 동시성 제어 도구를 도입했습니다.

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

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

    반응형

    'JS' 카테고리의 다른 글

    Javascript ES11 문법정리  (2) 2023.11.24
    Javascript ES10 문법정리  (2) 2023.11.08
    Javascript ES9 문법정리  (2) 2023.10.16
    Javascript ES7 문법정리  (0) 2023.09.28
    Javascript ES6 문법 정리  (0) 2023.09.11

    댓글

Designed by Tistory.