자바스크립트의 함수와 클래스

자바스크립트는 웹 개발에서 필수적인 프로그래밍 언어로, 함수형 프로그래밍과 객체 지향 프로그래밍을 지원합니다. 이번 포스트에서는 자바스크립트의 함수와 클래스에 대해 살펴보겠습니다.

1. 함수 (Functions)

1.1. 함수 정의

function 함수이름(매개변수1, 매개변수2) {
    // 실행할 코드
    return 반환값;
}

1.2. 함수 호출

함수이름(값1, 값2);

1.3. 익명 함수와 화살표 함수

1.3.1. 익명 함수

const 익명함수 = function(매개변수) {
    // 실행할 코드
};

1.3.2. 화살표 함수

const 화살표함수 = (매개변수) => {
    // 실행할 코드
};

1.3.3. 화살표 함수의 특징

1. 문법적 간결성: 화살표 함수는 function 키워드를 생략할 수 있어 코드가 더 간결해집니다.
2. this 바인딩: 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 그대로 사용합니다.

1.4. 즉시 실행 함수 (IIFE)

(function() {
    // 실행할 코드
    console.log("즉시 실행 함수");
})();

(() => {
    console.log("화살표 즉시 실행 함수");
})();

1.5. 콜백 함수 (Callback Functions)

function 콜백함수() {
    console.log("콜백 함수가 실행되었습니다.");
}

function 함수에콜백전달(콜백) {
    console.log("기타 작업 수행 중...");
    콜백(); // 콜백 함수 호출
}

함수에콜백전달(콜백함수);

1.6. 호이스팅 (Hoisting)

console.log(함수이름()); // "호이스팅 예제"

function 함수이름() {
    return "호이스팅 예제";
}

반면 화살표 함수는 변수에 할당되므로 호이스팅되지 않습니다.

console.log(화살표함수()); // TypeError: 화살표함수 is not a function

const 화살표함수 = () => {
    return "호이스팅 예제";
};

2. 클래스 (Classes)

2.1. 클래스 정의

class 클래스이름 {
    constructor(매개변수) {
        this.속성 = 매개변수;
    }

    메서드이름() {
        // 실행할 코드
    }
}

2.2. 클래스 인스턴스 생성

const 인스턴스 = new 클래스이름(값);

2.3. 상속

class 부모클래스 {
    constructor() {
        this.부모속성 = "부모 속성";
    }
}

class 자식클래스 extends 부모클래스 {
    constructor() {
        super(); // 부모 클래스의 생성자 호출
        this.자식속성 = "자식 속성";
    }

    메서드이름() {
        console.log(this.부모속성, this.자식속성);
    }
}

const 자식인스턴스 = new 자식클래스();
자식인스턴스.메서드이름(); // "부모 속성 자식 속성"

3. 함수와 클래스의 차이점

• 기능: 함수는 특정 작업을 수행하기 위한 것이며, 클래스는 객체를 생성하고 그 객체의 상태와 행동을 정의하는 설계도입니다.
• 재사용성: 함수는 단순한 작업을 반복적으로 수행하기 위한 것이고, 클래스는 객체 지향 프로그래밍을 통해 더 복잡한 구조를 만들 수 있습니다.

결론

자바스크립트에서 함수와 클래스는 각각의 목적과 특성을 가지고 있으며, 적절히 활용하면 더 효율적이고 유지보수가 쉬운 코드를 작성할 수 있습니다. 즉시 실행 함수와 콜백 함수, 화살표 함수의 특징 및 호이스팅 개념을 이해하는 것은 더욱 중요합니다. 웹 개발에서 이 두 가지 개념을 잘 이해하고 활용하는 것이 중요합니다.