ECMAScript 2022: 초보자를 위한 최신 JavaScript 기능 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? 저는 ECMAScript 2022의最新하고 최고의 기능을 탐험하는 흥미로운 여정에서 당신의 가이드가 되어 기쁩니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 우리는 단계별로 진행하며, 가능한 한 재미있고 쉽게 이해할 수 있도록 하겠습니다. 그러니 좋아하는 음료를 마시며 편안하게 앉아, 함께 들어보겠습니다!

ECMAScript 2022는 무엇인가요?

새로운 기능에 뛰어들기 전에 잠시 ECMAScript에 대해 이야기해 보겠습니다. ECMAScript는 JavaScript의 멋지고 공식적인 이름입니다. 매년 JavaScript 언어는 새로운 기능을 얻게 되며, ECMAScript 2022(또는 ES13)은 가장 최신 버전입니다. JavaScript가 반짝이는 새 옷을 입고 초능력을 얻은 것 같은 느낌입니다!

ECMAScript 2022에서 추가된 새로운 기능

ECMAScript 2022는 우리의 코딩 생활을 더 쉽고 재미있게 만들어주는 몇 가지 흥미로운 새로운 기능을 제공합니다. 이제 각각의 기능을 예제와 함께 탐구해 보겠습니다. 할머니조차도 이해할 수 있을 만큼 간단하게 설명하겠습니다(할머니가 기술에 능숙한 경우를 대비해요!).

Array at() 메서드

색다른 연필이 가득 찬 상자가 있다고 상상해 보세요. 그 중 특정 연필을 선택하기 위해 시작점부터 계산할 필요 없이 꺼내고 싶습니다. at() 메서드가 바로 그 일을 수행합니다!

const crayons = ['red', 'blue', 'green', 'yellow', 'purple'];

console.log(crayons.at(2)); // 출력: 'green'
console.log(crayons.at(-1)); // 출력: 'purple'

이 예제에서 crayons.at(2)는 세 번째 연필('green')을 반환합니다(프로그래밍에서는 0부터 시작합니다). 멋진 점은 음수를 사용하여 끝에서부터 계산할 수 있다는 점입니다. 따라서 crayons.at(-1)은 마지막 연필 'purple'을 반환합니다.

String at() 메서드

at() 메서드는 배열에만 해당되는 것이 아니라 문자열도 함께 축제에 참여합니다! 동일한 방식으로 작동하여 문자열에서 특정 문자를 선택할 수 있습니다.

const greeting = 'Hello, World!';

console.log(greeting.at(0)); // 출력: 'H'
console.log(greeting.at(-1)); // 출력: '!'

여기서 greeting.at(0)는 첫 번째 문자 'H'를 반환하고, greeting.at(-1)는 마지막 문자 '!'를 반환합니다. 마치 문자열의 어디든 점프할 수 있는 마법의 포인터처럼입니다!

私 메서드와 필드

이제 우리가 초능력이 숨겨진 슈퍼 비밀 스파이 기기를 만들고 있다고 상상해 보세요. 기기의 일부를 탐내는 눈에서 숨기고 싶습니다. 이때 私 메서드와 필드가 유용하게 사용됩니다!

class SpyGadget {
#secretCode = '007'; // 私 필드

#activateInvisibility() { // 私 메서드
console.log('Invisibility activated!');
}

useGadget() {
console.log(`Using gadget with code: ${this.#secretCode}`);
this.#activateInvisibility();
}
}

const gadget = new SpyGadget();
gadget.useGadget();
// 출력:
// Using gadget with code: 007
// Invisibility activated!

// 이하 오류를 발생시킵니다:
// console.log(gadget.#secretCode);
// gadget.#activateInvisibility();

이 예제에서 #secretCode와 #activateInvisibility()은 私으로 되어 있으며, SpyGadget 클래스 내에서만 사용할 수 있습니다. 마치 슈퍼 스파이 기기에 숨겨진 비밀 칸을 가지고 있는 것과 같습니다!

Object.hasOwn() 메서드

당신이 혐의자를 조사하고 특정 물건을 소유하고 있는지 확인하려고 할 때를 상상해 보세요. Object.hasOwn() 메서드는 당신의 신뢰할 수 있는放大鏡처럼, 객체가 특정 프로퍼티를 가지고 있는지 빠르고 쉽게 확인해줍니다.

const suspect = {
name: 'John Doe',
age: 30
};

console.log(Object.hasOwn(suspect, 'name')); // 출력: true
console.log(Object.hasOwn(suspect, 'address')); // 출력: false

이 경우, suspect 객체는 name 프로퍼티를 가지고 있지만 address 프로퍼티는 가지고 있지 않습니다. Object.hasOwn()을 통해 이를 빠르고 쉽게 확인할 수 있습니다.

error.cause 프로퍼티

코드에서 문제가 발생할 때(그리고 확실하게 발생할 것입니다), 그 이유를 알고 싶어집니다. error.cause 프로퍼티는 탐정의 노트처럼, 오류의 원인에 대한 추가 정보를 제공합니다.

function fetchData() {
throw new Error('Failed to fetch data', { cause: 'Network disconnected' });
}

try {
fetchData();
} catch (error) {
console.log(error.message); // 출력: 'Failed to fetch data'
console.log(error.cause); // 출력: 'Network disconnected'
}

여기서 우리는 일반적인 오류를 던지는 것이 아니라, 오류의 원인에 대한 추가 정보를 제공하여 디버깅을 더 쉽게 만듭니다. 마치 자신의 미래 자신에게 남긴 힌트와 같습니다!

The Await Import

마지막으로, 새로운 await import() 기능에 대해 이야기해 보겠습니다. 이는 마치 피자 주문처럼 - 필요한 모듈(또는 토핑)이 도착하기 전까지 기다릴 수 있습니다.

const button = document.querySelector('button');

button.addEventListener('click', async () => {
const module = await import('./api-module.js');
module.callAPI();
});

이 예제에서 우리는 버튼이 클릭된 후에야 api-module.js를 로드합니다. 이는 우리의 웹 페이지가 더 빠르게 로드되도록 도와줍니다. 마치 우리의 코드에 맞춰 피자를 배달받는 것과 같은 느낌입니다!

결론

이제 여러분은 ECMAScript 2022의 흥미로운 새로운 기능을 둘러보는 풍덩이 여정을 마친 것입니다. 기억해 두세요, 코딩을 배우는 것은 여정이고 목적지가 아닙니다. 모든 것이 일시적으로 이해되지 않아도 걱정하지 마세요 - 계속 연습하고, 실험하고, 가장 중요한 것은 즐겁게 만들어 보세요!

여기서 배운 메서드와 기능을 간단한 표 형식으로 요약해 보겠습니다:

메서드/기능	설명
Array.at()	양수와 음수 정수를 사용하여 배열 요소에 접근
String.at()	양수와 음수 정수를 사용하여 문자열 문자에 접근
Private 메서드와 필드	# 접두사를 사용하여 私 클래스 멤버 생성
Object.hasOwn()	객체가 특정 자체 프로퍼티를 가지고 있는지 확인
error.cause	오류의 원인에 대한 추가 정보 제공
await import()	비동기 문맥에서 모듈을 동적으로 임포트

계속 코딩하고, 계속 배우고, 언제든지 놀라운 것을 만들 수 있을 것입니다. 다음 번에 다시 만납시다, 행복한 코딩! ??

Credits: Image by storyset