JS) 33번째 회고

---

1. Function

자바스크립트에서 함수는 특정 작업을 수행하기 위해 정의된 코드 블록이다.
함수는 재사용 가능하며, 다양한 작업을 모듈화 하여 코드의 가독성과 유지보수성을 향상시킬 수 있다.
자바스크립트에서는 여러 가지 방법으로 함수를 정의하고 사용할 수 있다.

 

💡 함수 정의

 

1️⃣ 함수 선언 (Function Declaration)
기본적인 함수 정의 방식이다. 함수 선언은 호이스팅 되므로 함수 선언 이전에 호출할 수 있다.

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('Alice'));  // Hello, Alice!

 

2️⃣ 함수 표현식 (Function Expression)

함수가 변수에 할당된다. 함수 표현식은 호이스팅 되지 않으므로 함수 선언 이후에 호출해야 한다.

const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet('Bob'));  // Hello, Bob!

 

3️⃣ 화살표 함수 (Arrow Function)

간결한 함수 표현식이다. this 키워드가 상위 스코프를 참조한다.

const greet = (name) => `Hello, ${name}!`;

console.log(greet('Charlie'));  // Hello, Charlie!

 

4️⃣ 즉시 실행 함수 표현식 (Immediately Invoked Function Expression, IIFE)

함수가 정의됨과 동시에 실행된다. 주로 전역 스코프의 오염을 방지하기 위해 사용된다.

(function() {
    console.log('This function runs immediately.');
})();

 

함수 - JavaScript | MDN

- 출처 : developer.mozilla

---

2. 사용자 정의 함수 (User-Defined Function)

사용자 정의 함수는 개발자가 특정 작업을 수행하기 위해 정의한 함수이다.
이는 자주 사용하는 코드를 함수로 묶어 재사용성을 높이는 데 사용된다.

 

1️⃣ 매개변수 (Parameters)와 인수 (Arguments)

함수는 매개변수를 통해 값을 입력받을 수 있다. 함수 호출 시 인수를 매개변수로 전달한다.

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

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

 

2️⃣ 기본 매개변수 (Default Parameters)

매개변수에 기본값을 설정할 수 있다.

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

console.log(greet());        // Hello, Guest!
console.log(greet('Dave'));  // Hello, Dave!

 

3️⃣ Rest 매개변수 (Rest Parameters)

매개변수의 수가 정해지지 않은 경우 사용한다.

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

 

4️⃣ 반환 값 (Return Value)

함수는 return 문을 사용하여 값을 반환할 수 있다. 반환 값을 지정하지 않으면 undefined를 반환한다.

function multiply(a, b) {
    return a * b;
}

console.log(multiply(4, 5));  // 20

---

3. 일급 객체 (First-Class Citizen)

자바스크립트에서 함수는 일급 객체이다. 이는 함수를 변수에 할당하거나, 함수의 인수로 전달하거나, 함수에서 반환값으로 사용할 수 있음을 의미한다. 이러한 특성은 자바스크립트의 강력한 기능 중 하나로, 함수형 프로그래밍 패러다임을 구현할 수 있게 한다.

 

💡 일급 객체로서의 함수

 

1️⃣ 변수에 할당 가능

함수는 변수에 할당될 수 있다.

const sayHello = function(name) {
    return `Hello, ${name}!`;
};

console.log(sayHello('Alice'));  // Hello, Alice!

 

2️⃣ 함수의 인수로 전달 가능

함수는 다른 함수의 인수로 전달될 수 있다.

function greet(callback, name) {
    return callback(name);
}

const sayHello = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet(sayHello, 'Bob'));  // Hello, Bob!

 

3️⃣ 함수의 반환값으로 사용 가능

함수는 다른 함수에서 반환될 수 있다.

function createGreeter(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHi = createGreeter('Hi');
console.log(sayHi('Charlie'));  // Hi, Charlie!

 

4️⃣ 데이터 구조에 저장 가능

함수는 객체, 배열 등의 데이터 구조에 저장될 수 있다.

const actions = {
    sayHello: function(name) {
        return `Hello, ${name}!`;
    },
    sayGoodbye: function(name) {
        return `Goodbye, ${name}!`;
    }
};

console.log(actions.sayHello('Dave'));  // Hello, Dave!
console.log(actions.sayGoodbye('Eve'));  // Goodbye, Eve!

 

📍 일급 객체로서의 이점

1. 재사용성 : 함수를 변수나 데이터 구조에 할당하고 재사용할 수 있다.
2. 모듈화 : 함수를 인수로 전달하거나 반환값으로 사용하여 코드의 모듈화를 촉진한다.
3. 유연성 : 함수를 콜백으로 사용하여 다양한 상황에 맞게 동작을 정의할 수 있다.
4. 함수형 프로그래밍 : 고차 함수와 같은 함수형 프로그래밍 패러다임을 활용할 수 있다.

JavaScript - 일급 객체(First Class Object) & 일급 함수(First Class Function)

- 출처 : bitkunst