▶ JavaScript Functions

JavaScript Function Definitions

JavaScript Function Definitions: 함수 정의 방법

JavaScript 함수는 코드의 재사용성을 높이고, 코드를 구조화하는 데 중요한 역할을 합니다. 함수는 특정 작업을 수행하는 코드 블록을 정의하고, 필요할 때마다 실행할 수 있습니다. JavaScript에서는 함수를 정의하는 여러 가지 방법이 있으며, 각각의 방법은 상황에 따라 적합하게 사용할 수 있습니다.

이 가이드는 JavaScript에서 함수 정의하는 다양한 방법을 설명하고, 각 방법의 특징을 다룹니다.

1. 함수 선언 (Function Declaration)

함수 선언은 JavaScript에서 가장 일반적인 함수 정의 방법입니다. function 키워드를 사용하여 함수를 정의하며, 함수 이름이 반드시 있어야 합니다. 함수 호이스팅에 의해 함수 선언은 코드의 어디서든 호출할 수 있습니다.

1.1. 함수 선언 구문

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

1.2. 특징

호이스팅: 함수 선언은 스코프의 최상단으로 호이스팅되므로, 함수 정의 전에 호출이 가능합니다.
명시적 함수 이름: 함수 이름을 명시하기 때문에 재귀 호출에도 적합합니다.

1.3. 사용 예시

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

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

2. 함수 표현식 (Function Expression)

함수 표현식은 변수에 함수 정의를 할당하는 방식입니다. 함수가 변수에 저장되므로, 함수 이름이 없을 경우 익명 함수가 됩니다. 함수 표현식은 코드가 실행될 때까지 평가되지 않으므로, 호이스팅되지 않습니다.

2.1. 함수 표현식 구문

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

2.2. 특징

호이스팅되지 않음: 함수 표현식은 코드에서 정의된 위치 이후에만 호출 가능합니다.
익명 함수 가능: 함수 이름을 명시하지 않을 수 있으며, 변수 이름이 함수 호출에 사용됩니다.

2.3. 사용 예시

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

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

3. 화살표 함수 (Arrow Functions)

*화살표 함수(Arrow Functions)**는 짧고 간결한 구문으로 함수 표현식을 정의할 수 있는 방법입니다. 특히 this 키워드의 상위 스코프를 유지하는 점이 중요한 특징입니다. 이는 이벤트 핸들러나 비동기 작업에서 자주 사용됩니다.

3.1. 화살표 함수 구문

const multiply = (a, b) => a * b;

3.2. 특징

간결한 문법: 중괄호 없이 한 줄로 작성 가능. 복잡한 함수의 경우 중괄호와 return을 명시적으로 사용해야 함.
this 바인딩: **this*는 상위 스코프에 묶여 있어서, 함수 내부에서 별도로 바인딩하지 않음.
익명 함수: 화살표 함수는 항상 익명 함수이며, 함수 표현식에서 사용됩니다.

3.3. 사용 예시

const multiply = (a, b) => a * b;
console.log(multiply(3, 4));  // 12

3.4. 화살표 함수와 `this`

const person = {
    name: 'Alice',
    greet: function() {
        setTimeout(() => {
            console.log(`Hello, my name is ${this.name}`);
        }, 1000);
    }
};

person.greet();  // Hello, my name is Alice

4. 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

*즉시 실행 함수(IIFE)**는 정의되자마자 실행되는 함수입니다. 주로 모듈 패턴에서 변수의 스코프를 제한하거나, 코드의 전역 오염을 방지할 때 사용됩니다.

4.1. IIFE 구문

(function() {
    console.log('This is an IIFE');
})();

4.2. 특징

즉시 실행: 함수가 정의되면 바로 실행되며, 반복 호출되지 않음.
스코프 보호: 전역 변수를 사용하지 않기 위해 지역 변수를 캡슐화하는 용도로 자주 사용.

4.3. 사용 예시

(function() {
    const message = 'Hello IIFE';
    console.log(message);
})();
// 'Hello IIFE'

// message는 외부에서 접근 불가
console.log(typeof message);  // undefined

5. 생성자 함수 (Constructor Function)

*생성자 함수(Constructor Function)**는 객체를 생성하기 위한 함수입니다. 생성자 함수는 new 키워드와 함께 사용되며, 함수의 내부에서 **this*가 새로 생성되는 객체를 가리킵니다. ES6에서 등장한 클래스와 유사한 역할을 하지만, 구문이 다릅니다.

5.1. 생성자 함수 구문

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

const alice = new Person('Alice', 30);
console.log(alice.name);  // 'Alice'

5.2. 특징

new 키워드: **new*를 사용해 생성자 함수를 호출할 때, 함수 내부에서 새로운 객체가 생성되고 **this*가 그 객체를 가리킴.
프로토타입: 생성된 객체는 함수의 prototype 속성에 연결되어, 객체에서 공통 메서드를 공유할 수 있음.

5.3. 사용 예시

function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.brand);  // 'Toyota'

6. 클래스(Class)와 메서드

ES6에서 도입된 **클래스(Class)**는 객체 지향 프로그래밍(OOP)을 위해 설계된 문법적 설탕입니다. 내부적으로는 프로토타입 기반으로 동작하지만, 더 직관적인 문법으로 객체와 상속을 정의할 수 있습니다.

6.1. 클래스 정의 구문

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

6.2. 특징

생성자 함수와 유사: constructor 메서드를 통해 객체의 초기 상태를 정의.
상속 지원: extends 키워드를 통해 클래스 상속 가능.
메서드 정의: 메서드는 클래스 내부에 정의되며, 객체 메서드로 동작.

6.3. 사용 예시

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const myDog = new Dog('Rex');
myDog.speak();  // 'Rex barks.'

요약

JavaScript에서 함수는 여러 가지 방법으로 정의될 수 있으며, 각 방식은 상황과 필요성에 따라 적합하게 선택됩니다.

함수 선언: 가장 일반적인 방식으로, 호이스팅을 지원합니다.
함수 표현식: 변수에 함수를 할당하며, 익명 함수로 정의할 수 있습니다.
화살표 함수: 간결한 구문과 this 바인딩의 특징을 가지고 있어, 비동기 코드에서 자주 사용됩니다.
즉시 실행 함수(IIFE): 함수 정의 즉시 실행되며, 스코프 보호를 위해 사용됩니다.
생성자 함수: 객체 생성을 위한 함수로, new 키워드와 함께 사용됩니다.
클래스: 객체 지향 프로그래밍을 위해 객체와 상속을 정의할 수 있는 구조입니다.

이 함수 정의 방식들을 이해하고 적절하게 사용하는 것은 JavaScript 개발에서 매우 중요합니다.

코딩 스쿨 JavaScript