웹 개발 기초 3 : JavaScript (2)

자바스크립트(JavaScript)는 웹 개발에서 매우 중요한 역할을 하는 프로그래밍 언어입니다. 이번 포스트에서는 자바스크립트의 고급 개념과 심화 기능을 다루어, 자바스크립트의 강력한 기능을 활용할 수 있도록 하겠습니다.

1. 클로저(Closures)

클로저는 함수와 그 함수가 선언된 어휘적 환경의 조합입니다. 클로저를 사용하면 함수가 외부 스코프의 변수를 참조할 수 있습니다.

function makeCounter() {
    let count = 0;
    return function() {
        return count++;
    };
}

let counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

2. 프로미스(Promises)와 비동기 처리(Async/Await)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. async/await 키워드는 비동기 코드를 동기식 코드처럼 작성할 수 있게 도와줍니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data loaded'), 1000);
    });
}

async function getData() {
    try {
        let data = await fetchData();
        console.log(data); // Data loaded
    } catch (error) {
        console.error(error);
    }
}

getData();

3. 객체지향 프로그래밍(OOP)과 클래스(Class)

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원합니다. ES6부터는 class 문법을 통해 더욱 직관적으로 객체지향 프로그래밍을 할 수 있습니다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

let john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

4. 모듈 시스템(Modules)

자바스크립트는 모듈을 사용하여 코드의 재사용성과 유지보수성을 높일 수 있습니다. ES6 모듈 시스템을 사용하면 import와 export 키워드를 통해 모듈을 관리할 수 있습니다.

// math.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2

5. 고차 함수(Higher-Order Functions)

고차 함수는 함수를 인자로 받거나, 함수를 반환하는 함수입니다. 이를 통해 코드의 추상화와 재사용성을 높일 수 있습니다.

function withLogging(func) {
    return function(...args) {
        console.log(`Arguments: ${args}`);
        return func(...args);
    };
}

function add(a, b) {
    return a + b;
}

const loggedAdd = withLogging(add);
console.log(loggedAdd(5, 3)); // Arguments: 5,3 \n 8

6. 제너레이터(Generators)

제너레이터는 이터러블 객체를 생성하는 함수로, function* 키워드와 yield 키워드를 사용합니다.

function* generateSequence() {
    yield 1;
    yield 2;
    yield 3;
}

let generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3

7. 심볼(Symbols)

심볼은 객체의 고유한 프로퍼티 키를 생성하기 위한 원시 타입입니다.

let symbol = Symbol('description');
let obj = {
    [symbol]: 'value'
};

console.log(obj[symbol]); // value

8. 프로토타입 상속(Prototype Inheritance)

자바스크립트는 프로토타입을 기반으로 상속을 구현합니다. 모든 객체는 [[Prototype]]으로 다른 객체를 참조할 수 있습니다.

let animal = {
    eats: true
};

let dog = {
    barks: true,
    __proto__: animal
};

console.log(dog.eats); // true
console.log(dog.barks); // true

9. 태스크 큐(Task Queue)와 이벤트 루프(Event Loop)

자바스크립트는 싱글 스레드 언어지만, 비동기 처리를 위해 이벤트 루프를 사용합니다. 이벤트 루프는 태스크 큐에서 작업을 가져와 실행합니다.

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

console.log('End');
// Start \n End \n Timeout