JavaScript - ECMAScript 2017: 초보자 가이드

안녕하세요, 미래의 프로그래머 여러분! ECMAScript 2017의 흥미로운 여정을 안내해드리게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 경험을 가진 저는 JavaScript를 배우는 것은 디지털 시대에서 슈퍼파워를 풀어주는 것과 같다고 말씀드릴 수 있습니다. 그麼, 함께 ECMAScript 2017의 놀라운 기능을 탐구해봅시다!

ECMAScript 2017에 추가된 새로운 기능

ECMAScript 2017, 또는 ES8는 JavaScript에 몇 가지 게임 체인저 기능을 추가했습니다. 이를 통해 코딩 도구 상자에 새로운 도구가 추가된 것입니다. 이 기능들은 우리의 개발자 생활을 더 쉽게 만들고, 코드를 더 효율적으로 만듭니다. 하나씩 알아보겠습니다!

문자열 채우기: padStart()와 padEnd() 메서드

문자열의 시작이나 끝에 추가 문자를 추가해 특정 길이로 만들어야 할 적이 있으셨나요? 그렇다면 ECMAScript 2017의 padStart()과 padEnd() 메서드가 도와드립니다!

padStart()

padStart() 메서드는 현재 문자열을 다른 문자열로 채우直到 결과 문자열이 주어진 길이에 도달할 때까지입니다. 채우기는 현재 문자열의 시작 부분부터 적용됩니다.

let str = '5';
console.log(str.padStart(3, '0')); // 출력: '005'

이 예제에서는 문자열 '5'를 영어로 채우直到它变成3자리 길이입니다. 이는 숫자에 이어지는 영어를 추가하는 것과 같습니다!

padEnd()

동일하게, padEnd()는 현재 문자열을 끝에서 채웁니다.

let price = '99';
console.log(price.padEnd(5, '.00')); // 출력: '99.00'

여기서는 '99'의 끝에 '.00'를 추가하여 가격에 센트를 보이게 합니다.

이 메서드들은 문자열을 표시하거나 특정 방식으로 텍스트를 정렬할 때 매우 유용합니다.

Object.entries() 메서드

이제 Object.entries()에 대해 이야기해보겠습니다. 이 메서드는 객체를 키-값 쌍의 배열로 변환하는 마법사입니다. 객체의 속성을 반복할 때 매우 유용합니다.

let person = {
name: 'Alice',
age: 30,
city: 'New York'
};

console.log(Object.entries(person));
// 출력: [['name', 'Alice'], ['age', 30], ['city', 'New York']]

이 예제에서 Object.entries()는 person 객체를 키-값 쌍의 배열로 변환합니다. 이는 짐을 풀고 모든 내용을 펼쳐놓는 것과 같습니다!

Object.values() 메서드

Object.values()는 Object.entries()의 사촌입니다. 키-값 쌍 대신, 객체의 값 배열만을 반환합니다.

let fruits = {
apple: 5,
banana: 3,
orange: 2
};

console.log(Object.values(fruits)); // 출력: [5, 3, 2]

이 메서드는 객체의 값에만 관심이 있을 때 유용합니다. 이는 가격 없는 쇼핑리스트와 같습니다!

JavaScript async와 await

이제 비동기 JavaScript의 세계로 들어가 async와 await를 사용해보겠습니다. 이 키워드들은 Promise(비동기 연산을 처리하는 방법)를 더 간단하고 가독성 있게 작업할 수 있게 해줍니다.

async function fetchUserData() {
try {
let response = await fetch('https://api.example.com/user');
let userData = await response.json();
console.log(userData);
} catch (error) {
console.error('사용자 데이터를 가져오는 데 실패했습니다:', error);
}
}

fetchUserData();

이 예제에서 async는 이 함수가 비동기 코드를 작동할 것이라고 JavaScript에게 알립니다. await 키워드는 Promise가 해결될 때까지 함수의 실행을 중지합니다. 이는 JavaScript에게 "이 작업이 완료되기를 기다려라"고 말하는 것과 같습니다.

이렇게 하면 비동기 코드가 동기 코드처럼 보이고 이해하기 쉬워집니다!

Object.getOwnPropertyDescriptors() 메서드

이 메서드는 조금 두려울 수 있지만, 매우 유용합니다! 주어진 객체의 모든 자체 프로퍼티 기술자를 반환합니다.

let obj = {
name: 'John',
get age() { return 30; }
};

console.log(Object.getOwnPropertyDescriptors(obj));
/* 출력:
{
name: {
value: 'John',
writable: true,
enumerable: true,
configurable: true
},
age: {
get: [Function: get age],
set: undefined,
enumerable: true,
configurable: true
}
}
*/

이 메서드는 하나의 객체에서 다른 객체로 프로퍼티를 복사할 때 특히 유용합니다.

JavaScript 공유 메모리와 Atomics

마지막으로, 공유 메모리와 Atomics에 대해 간단히 다룹니다. 이 기능들은 JavaScript의 다른 스레드들이 같은 메모리 공간을 공유하고 원자적으로 연산을 수행할 수 있게 합니다.

// 공유 버퍼 생성
let sharedBuffer = new SharedArrayBuffer(4);
let sharedArray = new Int32Array(sharedBuffer);

// 원자적 연산 수행
Atomics.store(sharedArray, 0, 42);
console.log(Atomics.load(sharedArray, 0)); // 출력: 42

이는 높은 성능의 컴퓨팅이 필요한 시나리오에서 주로 사용됩니다. 여러 셰프가 같은 주방에서 재료를 공유하며 서로 방해하지 않는 것과 같습니다!

새로운 메서드 요약

다음은 우리가 논의한 새로운 메서드의 빠른 참조 표입니다:

메서드	설명
String.prototype.padStart()	주어진 문자열로 문자열의 시작 부분을 채웁니다
String.prototype.padEnd()	주어진 문자열로 문자열의 끝 부분을 채웁니다
Object.entries()	주어진 객체의 자체 문자열 키와 값을 가진 [key, value] 쌍의 배열을 반환합니다
Object.values()	주어진 객체의 자체 속성 값을 배열로 반환합니다
Object.getOwnPropertyDescriptors()	주어진 객체의 모든 자체 프로퍼티 기술자를 반환합니다
Atomics 메서드	Atomics 객체의 정적 메서드로 원자적 연산을 제공합니다

이제 ECMAScript 2017의 주요 기능을 다루었습니다. 코드를 배우는 것은 여정이 아니라 목적지가 아닙니다. 계속 연습하고, 탐구하고, 가장 중요한 것은 즐기세요! 행복한 코딩을 기원합니다!

Credits: Image by storyset