ECMAScript

function example() { console.log(a); // 출력: undefined (호이스팅) var a = 10; console.log(a); // 출력: 10 } function exampleLet() { // console.log(b); // 에러: 초기화되지 않은 변수를 참조할 수 없음 let b = 20; console.log(b); // 출력: 20 } example(); exampleLet();

function exampleVar() { if (true) { var x = 10; } console.log(x); // 출력: 10 } exampleVar();

function exampleLet() { if (true) { let y = 20; } // console.log(y); // 에러: 블록 스코프 변수를 참조할 수 없음 } exampleLet();

const name = 'aloha'; const age = 20; // 템플릿 문자열 사용 const greeting = `Hello, ${name}! You are ${age} years old.`; console.log(greeting);

// 익명 함수 const sum = function (a, b) { return a + b; }; console.log(sum(2, 3)); // 출력: 5

// 화살표 함수 const sumArrow = (a, b) => { return a + b; }; console.log(sumArrow(2, 3)); // 출력: 5

function regularFunction() { console.log(arguments); } regularFunction(1, 'hello', true);

Arguments(3) [1, "hello", true, callee: (...), Symbol(Symbol.iterator): ƒ]

const arrowFunction = () => { // console.log(arguments); // 에러: arguments는 화살표 함수에서 사용 불가 }; arrowFunction(1, 'hello', true);

const array = [1, 2, 3, 4, 5] array.forEach(callback(currentValue, index, array) { // 작업 수행 }, thisArg);

const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number, index) => { console.log(`Element at index ${index}: ${number}`); });

const array = [1, 2, 3, 4, 5] const newArray = array.map(callback(currentValue, index, array) { // 변형 작업 수행 }, thisArg);

const numbers = [1, 2, 3, 4, 5]; const squared = numbers.map((number) => { return number * number; }); console.log(squared); // 출력: [1, 4, 9, 16, 25]

const array = [1, 2, 3, 4, 5] const result = array.reduce(callback(accumulator, currentValue, index, array) { // 축적 작업 수행 }, initialValue);

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, number) => { return accumulator + number; }, 0); console.log(sum); // 출력: 15

const name = 'aloha'; const age = 20; // 기존 방식 const person1 = { name: name, age: age }; // 향상된 객체 문법 const person2 = { name, age }; console.log(person1); // { name: 'aloha', age: 20 } console.log(person2); // { name: 'aloha', age: 20 }

const key = 'gender'; const person = { name: 'aloha', age: 25, [key]: 'female' }; console.log(person); // { name: 'aloha', age: 25, gender: 'female' }

// 기존 방식 const obj1 = { method1: function() { // 메서드 로직 } }; // 향상된 객체 문법 const obj2 = { method1() { // 메서드 로직 } };

const [variable1, variable2, ...rest] = array;

const numbers = [1, 2, 3, 4, 5]; // 배열의 구조 분해 할당 const [first, second, ...rest] = numbers; console.log(first); // 출력: 1 console.log(second); // 출력: 2 console.log(rest); // 출력: [3, 4, 5]

const { property1, property2, ...rest } = object;

const person = { name: 'aloha', age: 25, gender: 'female' }; // 객체의 구조 분해 할당 const { name, age, ...rest } = person; console.log(name); // 출력: 'aloha' console.log(age); // 출력: 25 console.log(rest); // 출력: { gender: 'female' }

// 매개변수에서의 구조 분해 할당 function functionName({ param1, param2, param3}) { console.log(`param1: ${param1}, param2: ${param2}, param3: ${param3}`); } const params = { param1: 1, param2: 2, param3: 3 }; functionName(params);

// 매개변수에서의 구조 분해 할당 function printPersonInfo({ name, age, gender }) { console.log(`Name: ${name}, Age: ${age}, Gender: ${gender}`); } const person = { name: 'aloha', age: 20, gender: 'male' }; printPersonInfo(person); // 출력: Name: aloha, Age: 20, Gender: male

class ClassName { constructor() { // 생성자 } // 메서드 정의 methodName() { // 메서드 로직 } }

class Animal { constructor(name, sound) { this.name = name; this.sound = sound; } makeSound() { console.log(`${this.name} says ${this.sound}`); } } // 상속을 이용한 서브클래스 정의 class Dog extends Animal { constructor(name) { // 부모 클래스의 생성자 호출 super(name, 'Woof'); } } // 클래스를 이용한 객체 생성 const cat = new Animal('Cat', 'Meow'); const dog = new Dog('Dog'); // 객체의 메서드 호출 cat.makeSound(); // 출력: Cat says Meow dog.makeSound(); // 출력: Dog says Woof

// 프로미스 생성 const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 const success = true; if (success) { resolve('Success result'); } else { reject('Error message'); } }); // 프로미스 사용 myPromise .then((result) => { console.log(result); // 성공적으로 완료된 경우의 처리 }) .catch((error) => { console.error(error); // 에러가 발생한 경우의 처리 });

// 프로미스를 사용한 타이머 예시 코드 function delay(ms) { return new Promise((resolve, reject) => { // setTimeout 함수를 사용하여 비동기 작업 모방 setTimeout(() => { // ms 시간이 지난 후, resolve를 호출하여 프로미스 이행 resolve(`Waited for ${ms} milliseconds`); }, ms); }); } // 프로미스를 이용한 타이머 사용 delay(2000) // 2초 동안 기다림 .then((result) => { console.log(result); // 출력: 'Waited for 2000 milliseconds' // 이후의 작업을 이어서 처리할 수 있음 }) .catch((error) => { console.error(error); // 에러가 발생한 경우 처리 });

async function sample() { // 비동기 작업 const result = await test(); console.log(result); }

async function fetchData() { const response = await fetch('https://httpbin.org/get'); const data = await response.json(); return data; } fetchData() .then((result) => { console.log(result); }) .catch((error) => { console.log(error); })

const map = new Map() map.set('key1', 'value1') map.set('key2', 'value2') map.set('key3', 'value3') console.log(map); console.log(map.get('key1')); console.log(map.get('key2')); console.log(map.get('key3')); // 초기 데이터를 가진 Map 생성 const map2 = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); console.log(map2);

map.forEach((value, key) => { console.log(`${key}: ${value}`); }); // Map의 키 순회 for (const key of map.keys()) { console.log(key); } // Map의 값 순회 for (const value of map.values()) { console.log(value); } // Map의 항목(키-값 쌍) 순회 for (const [key, value] of map.entries()) { console.log(`${key}: ${value}`); }

// Set 생성 const set = new Set(); // 원소 추가 set.add('value1'); set.add('value2'); // 원소 조회 console.log(set.has('value1')); // 출력: true // 원소 삭제 set.delete('value1'); // Set 크기 확인 console.log(set.size); // 출력: 1 // 초기 데이터를 가진 Set 생성 const set2 = new Set(['value1', 'value2']); console.log(set2);

// Set 순회 set2.forEach((value) => { console.log(value); }); // Set의 원소 순회 for (const value of set2) { console.log(value); }

const result = 변수 ?? 대체값(기본값);

// 변수가 null 또는 undefined인 경우에 대체값 사용 const userInput = null; const username = userInput ?? 'Guest'; console.log(username); // 출력: 'Guest'

const value = object?.property?.nestedProperty;

const user = { id: 1, username: 'john_doe', profile: { email: 'john@example.com', address: { city: 'New York' } } }; // 중첩된 프로퍼티에 안전하게 접근 const city = user?.profile?.address?.city; console.log(city); // 출력: 'New York' const nonExistentProperty = user?.nonExistentProperty; console.log(nonExistentProperty); // 출력: undefined

// 14_module.mjs // 개별 변수 내보내기 export const myVariable = 42; // 개별 함수 내보내기 export function myFunction() { return 'Hello, world!'; }

// 14_module.mjs // 개별 변수, 함수에 별칭(alias) 사용하여 내보내기 const internalVariable = 42; function internalFunction() { return 'Hello, world!'; } export { internalVariable as myVariable, internalFunction as myFunction };

// 14_module.mjs // 기본 내보내기 const myVariable = 42; export default myVariable;

// 14_module2.mjs // 다른 파일에서 모듈 가져오기 import { myVariable, myFunction } from './14_module.mjs'; console.log(myVariable); // 출력: 42 const result = myFunction(); console.log(result); // 출력: 'Hello, world!'

// 14_module2.mjs // 다른 파일에서 모듈 가져오기 (모든 내용) import * as myModule from './14_module.mjs'; console.log(myModule.myVariable); // 출력: 42 console.log(myModule.myFunction()); // 출력: 'Hello, world!'

// 14_module2.mjs // 다른 파일에서 기본 내보낸 값 가져오기 import myVariable from './14_module.mjs'; console.log(myVariable); // 출력: 42