Javascript 비동기 프로그래밍, 클로저와 스코프, 모듈화, ES6

JavaScript 심화 개념 정리

이번 글에서는 JavaScript에서 중요한 심화 개념들을 다룹니다. 비동기 프로그래밍, 클로저와 스코프, 모듈화, 최신 문법(ES6+)을 포함한 각 개념을 예제와 함께 설명합니다.

---

1. 비동기 프로그래밍

JavaScript는 기본적으로 싱글 스레드로 동작하며, 이로 인해 비동기 프로그래밍이 필요합니다. 콜백, 프로미스(Promises), async/await을 활용해 비동기적인 작업을 효율적으로 처리할 수 있습니다.

1.1 콜백

콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수입니다. 하지만 중첩된 콜백을 사용할 경우 콜백 지옥이 발생할 수 있습니다.

function fetchData(callback) {
    setTimeout(() => {
        callback("데이터 수신 완료");
    }, 1000);
}

fetchData(result => {
    console.log(result); // "데이터 수신 완료" 출력
});

1.2 프로미스 (Promise)

프로미스는 콜백의 단점을 보완하기 위해 등장한 객체입니다. then() 메서드로 순차적으로 처리가 가능합니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("데이터 수신 완료");
        }, 1000);
    });
}

fetchData()
    .then(result => console.log(result)) // "데이터 수신 완료"
    .catch(error => console.error(error));

1.3 async/await

async/await는 프로미스 기반의 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있도록 도와줍니다.

async function fetchData() {
    return "데이터 수신 완료";
}

async function getData() {
    const result = await fetchData();
    console.log(result); // "데이터 수신 완료"
}

getData();

2. 클로저와 스코프

클로저(Closure)는 함수가 자신이 선언될 때의 렉시컬 스코프를 기억하여 외부 함수의 변수를 참조할 수 있는 개념입니다.

2.1 클로저 예제

아래 예제에서 innerFunction은 outerFunction의 count 변수를 기억합니다.

function outerFunction() {
    let count = 0;

    function innerFunction() {
        count++;
        console.log(count);
    }

    return innerFunction;
}

const counter = outerFunction();
counter(); // 1
counter(); // 2
counter(); // 3

2.2 스코프 (Scope)

스코프는 변수가 접근 가능한 범위를 의미합니다. JavaScript의 스코프는 크게 전역 스코프와 함수 스코프, 블록 스코프로 나뉩니다.

3. 모듈화

JavaScript의 모듈화는 코드의 재사용성을 높이고, 전역 네임스페이스 오염을 방지하는 방식입니다. ES6부터는 export와 import 구문을 통해 모듈화를 지원합니다.

3.1 모듈 내보내기 (export)

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

3.2 모듈 가져오기 (import)

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

console.log(add(2, 3)); // 5
console.log(pi); // 3.14159

4. 최신 문법 (ES6+)

ES6 이후로 JavaScript에는 다양한 문법이 추가되었습니다. 주요 문법을 간략히 정리합니다.

4.1 화살표 함수 (Arrow Function)

간결한 함수 문법을 제공합니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

4.2 구조 분해 할당 (Destructuring)

객체와 배열의 값을 쉽게 추출할 수 있습니다.

const person = { name: 'Ji-hyun', age: 30 };
const { name, age } = person;
console.log(name); // "Ji-hyun"

4.3 템플릿 리터럴 (Template Literals)

백틱(`)을 사용하여 문자열을 작성하며, 변수 삽입이 가능합니다.

const name = 'Ji-hyun';
console.log(`Hello, ${name}!`); // "Hello, Ji-hyun!"

4.4 스프레드 연산자 (Spread Operator)

배열과 객체의 복사, 병합에 유용합니다.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]