JavaScript - 코어 자바스트립트 정리 (4~7장, 콜백함수,클로저,프로토타입,클래스)

1. 콜백 함수 (Callback Function)

콜백 함수란 다른 함수의 인자로 전달되어, 그 함수 내부에서 호출되는 함수를 의미한다. 주로 비동기 처리나 이벤트 기반 프로그래밍에서 자주 사용되며, 코드의 실행 흐름을 제어하는 데 유용하다.

function fetchData(callback) {
    // 데이터를 가져오는 비동기 작업 (예: 서버 요청)
    setTimeout(function() {
        let data = "Fetched Data";
        callback(data);  // 작업 완료 후 콜백 함수 호출
    }, 1000);
}

function displayData(data) {
    console.log("Data: " + data);
}

fetchData(displayData);  // 1초 후 "Data: Fetched Data" 출력

 

위 코드에서는 fetchData 함수가 완료된 후 displayData 콜백 함수를 호출하여 데이터를 처리한다. 이 방식은 비동기 작업을 처리할 때 매우 유용하다.

콜백 함수의 장점

• 비동기 작업을 효과적으로 처리할 수 있다.
• 함수의 실행 순서를 유연하게 제어할 수 있다.

콜백 함수의 단점

• 콜백 지옥: 콜백을 중첩해서 사용할 경우 코드가 복잡해지고 가독성이 떨어지기 쉽다. 이를 개선하기 위해 **프로미스(Promise)**와 async/await가 등장했다.

1. 인자(Parameter):

• 함수의 정의 시에 사용되는 변수.

function greet(name) {
  console.log("Hello, " + name);
}

2. 인수(Argument):

• 함수 호출 시에 실제로 전달되는 값을 의미합니다.

greet("Alice");

2. 클로저 (Closure)

 

클로저(Closure)는 함수가 선언될 때 그 함수가 속한 렉시컬 환경(lexical environment)을 기억하여, 함수 외부에서 선언된 변수를 참조할 수 있는 특성이다. 클로저는 함수가 외부 함수의 실행이 종료된 후에도 그 외부 함수의 변수에 접근할 수 있게 한다.

function outerFunction() {
    let count = 0;
    
    return function innerFunction() {
        count++;
        console.log("Count: " + count);
    };
}

const counter = outerFunction();
counter();  // "Count: 1"
counter();  // "Count: 2"

 

위 코드에서 innerFunction은 외부 함수인 outerFunction의 변수 count에 접근할 수 있다. 이처럼 클로저는 상태를 유지하거나 캡슐화할 때 유용하게 사용할 수 있다.

클로저의 장점

• 함수 외부의 변수를 기억하고, 나중에 사용할 수 있다.
• 데이터 은닉을 가능하게 하여, 변수를 외부에서 직접 접근하지 못하게 할 수 있다.

클로저의 단점

• 클로저가 메모리 누수를 유발할 수 있으므로, 필요 없는 클로저는 사용 후 제거하는 것이 좋다.

 

3. 프로토타입 (Prototype)

프로토타입(Prototype)은 자바스크립트의 객체 지향 모델에서 중요한 역할을 한다. 모든 자바스크립트 객체는 프로토타입을 가지고 있으며, 이를 통해 객체 간의 상속을 구현할 수 있다. 자바스크립트는 클래스 기반 상속이 아닌 프로토타입 기반 상속을 사용한다.

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice", 25);
person1.sayHello();  // "Hello, my name is Alice"

 

위 코드에서 Person 생성자 함수는 sayHello 메서드를 프로토타입에 정의했다. 이로 인해 Person 객체를 생성하는 모든 인스턴스는 sayHello 메서드를 공유하게 된다. 이는 메모리 사용을 최적화하고, 공통된 기능을 공유하는 데 유용하다.

프로토타입의 장점

• 메서드를 객체 간에 공유하여 메모리 사용을 절약할 수 있다.
• 상속을 구현할 수 있어, 객체의 동작을 확장하는 데 유리하다.

프로토타입의 단점

• 프로토타입 체인을 따라가야 하므로 코드가 복잡해질 수 있다.
• 최근에는 ES6의 클래스 문법이 등장하면서 프로토타입 기반의 상속이 덜 직관적으로 보일 수 있다.

 

4. 클래스 (Class)

 

클래스(Class)는 ES6(ECMAScript 2015)에서 도입된 문법으로, 자바스크립트의 기존 프로토타입 기반 상속을 더 직관적이고 객체 지향적인 방식으로 사용할 수 있게 해준다. 

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

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const person1 = new Person("Alice", 25);
person1.sayHello();  // "Hello, my name is Alice"

 

위의 예시에서 Person 클래스는 생성자 함수 constructor와 sayHello 메서드를 가지고 있다. 이 클래스 기반 문법 덕분에 객체 지향 프로그래밍 방식이 훨씬 직관적이고 읽기 쉬워졌다.

클래스의 장점

• 기존 프로토타입 기반 상속보다 더 직관적이고 객체 지향적인 코드를 작성할 수 있다.
• 상속, 생성자, 정적 메서드, 접근자 등의 다양한 기능을 더 쉽게 구현할 수 있다.

클래스의 단점

• 클래스는 자바스크립트의 문법적 설탕일 뿐, 본질적으로는 여전히 프로토타입 기반이라는 점을 이해해야 한다.
• new 키워드 없이 클래스를 호출할 경우 오류가 발생한다. 이는 생성자 함수에서는 문제가 되지 않았다.