12장. 함수

"모던 자바스크립트 Deep Dive" 자바스크립트의 기본 개념과 동작 원리

 

🔶 함수란?

---

function add(x, y) {
    return x + y;
}

add(2, 5); // 7

함수는 입력을 받아 출력으로 변환하는 일련의 과정을 정의한 코드입니다. 함수를 통해 동일한 작업을 여러 번 반복하지 않고 재사용할 수 있어 코드의 효율성을 높일 수 있습니다. 함수는 일반적으로 입력값(인수)를 매개변수로 받아 처리하고, 결과를 반환값으로 반환합니다. 함수는 정의되기만 하고 호출되지 않으면 실행되지 않으며, 함수 호출을 통해 실제로 동작 합니다.

 

🔶 함수를 사용하는 이유

---

 

• 코드 재사용성 : 동일한 작업을 반복해서 작성할 필요가 없습니다.
• 유지보수의 용의성 : 코드 수정 시, 함수 내부만 수정하면 되어 관리가 용이합니다.
• 가독성 향상 : 복잡한 코드가 함수화되면 읽기 쉽게 됩니다.
• 신뢰성 : 코드의 동작을 함수별로 명확히 정의하여 안정성을 높일 수 있습니다.

 

🔶 함수 리터럴

---

함수는 객체 타입의 값 입니다. 즉, 함수는 함수 리터럴로 생성될 수 있으며, 이는 ``function`` 키워드와 매개변수 목록, 함수 몸체로 구성됩니다. 함수 리터럴로 생성된 함수는 값처럼 다른 변수에 할당할 수 있습니다.

 

🔶 함수 정의

---

함수 정의는 함수가 실행될 때 필요한 매개변수와 함수 몸체, 반환값을 설정하는 과정입니다. 함수는 여러 가지 방식으로 정의할 수 있습니다.

• 함수 선언문 :``function`` 키워드를 사용하여 정의합니다.
• 함수 표현식 : 함수 리터럴을 변수에 할당하는 방식입니다.
• Function 생성자 함수 : 자바스크립트 내장 생성자 함수인 ``Function``을 사용하여 동적으로 함수를 생성할 수 있습니다.
• 화살표 함수 : ES6에서 도입된 간결한 함수 정의 방식입니다.

함수 선언문

function foo() {
    console.log("foo");
}

foo(); // "foo"

함수 선언문은 함수를 정의할 때 이름을 반드시 지정해야 하며, 코드 실행 시 함수 선언이 먼저 처리됩니다. 그래서 선언문 이전에 호출할 수 있습니다. 자바스크립트 엔진이 암묵적으로 함수 이름을 식별자로 생성하여 참조할 수 있게 합니다.

함수 표현식

var foo = function () {
    console.log("foo");
}

console.log(foo()); // "foo"

함수는 변수의 할당할 수 있는 객체입니다. 함수 표현식에서는 주로 익명 함수(이름이 없는 함수)를 사용하며, 함수가 변수의 할당되기 때문에 함수의 생성 시점은 변수 선언과 관련이 있습니다.

함수 생성 시점과 호이스팅

// 함수 참조
console.dir(add); // f add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
    return x + y;
}

// 함수 표현식
var sub = function (x, y) {
    return x - y;
}

함수 선언문은 코드 실행 전에 함수가 정의되고 호출할 수 있지만, 함수 표현식은 런타임 시점에 함수가 생성됩니다. 이로 인해 호이스팅의 차이가 발생합니다.

화살표 함수

const foo = () => console.log("foo");

foo(); // "foo"

화살표 함수는 ``=>`` 구문을 사용하여 함수를 정의하는 방식으로, 더 간결한 표현이 가능합니다. 화살표 함수는 익명 함수로만 정의됩니다.

 

🔶 함수 호출

---

함수 호출은 함수의 이름과 소괄호인 함수 호출 연산자를 이용해 호출됩니다. 함수가 실행되면, 실행 흐름은 함수로 넘어가고, 그 안의 코드가 실행된 후 결과를 반환합니다.

매개변수와 인수

매개변수는 함수 내부에서 사용할 변수로, 함수를 호출할 때 전달되는 값은 인수입니다. 자바스크립트에서는 매개변수와 인수가 일치하는지 검사하지 않으며, 인수가 부족하면 ``undefined``를 반환하고, 초과된 인수는 무시됩니다.

반환문

``return`` 키워드를 사용하면 함수의 실행을 종료하고 결과를 반환합니다. ``return``이 없는 경우, 함수는 ``undefined``를 반환합니다.

 

🔶 참조의 의한 전달과 외부 상태의 변경

---

자바스크립트에서 매개변수는 값에 의한 전달과 참조에 의한 전달을 모두 지원합니다. 원시 값은 값에 의한 전달이지만, 객체는 참조에 의한 전달이므로 함수 내부에서 객체 상태를 변경할 수 있습니다.

 

🔶 다양한 함수의 형태

---

즉시 실행 함수

(function () {
    var a = 3;
    var b = 5;
    return a * b;
}());

즉시 실행 함수는 정의된 직후 바로 실행되는 함수입니다. 주로 한 번만 실행될 코드를 포함할 때 사용됩니다.

재귀 함수

function countdown(n) {
    if (n < 0) return;
    console.log(n);
    coundown(n - 1);
}

countdown(10);

재귀 함수는 자기 자신을 호출하는 함수입니다. 반복적인 작업을 처리할 때 유용하며, 탈출 조건을 명확히 정의해야 무한 루프를 방지할 수 있습니다.

중첩 함수

function outer() {
    var x = 1;
    
    function inner() {
        var y = 2;
        console.log(x + y);
    }
 	
    inner();
}

outer();

중첩 함수는 함수 내부의 정의된 다른 함수입니다. 중첩된 함수는 외부 함수 내부에서만 호출할 수 있습니다.

콜백 함수

function repeat(n f) {
    for (var i = 0; i < n; i++) {
        f(i);
    }
}

var logAll = function (i) {
    console.log(i);
};

repeat(5, logAll); // 0 1 2 3 4

var logOdds = function (i) {
    if (i % 2) console.log(i);
};

repeat(5, logOdds); // 1 3

콜백 함수는 다른 함수의 인수로 전달되어 해당 함수 내에서 호출되는 함수입니다. 콜백 함수는 함수의 동작을 동적으로 변경할 때 유용합니다.

순수 함수와 비순수 함수

순수 함수는 외부 상태에 의존하거나 변경하지 않으며, 동일한 인수에 대해서는 항상 동일한 값을 반환합니다. 부수효과가 없는 함수입니다. 비순수 함수는 외부상태에 의존하거나 그 상태를 변경하는 함수입니다. 이런 함수는 프로그램 예측 가능성을 낮출 수 있기 때문에 가급적 순수 함수를 사용하는 것이 좋습니다. 함수형 프로그래밍은 순수 함수와 불변성을 중시하는 프로그래밍 패러다임입니다. 이 방식은 외부 상태를 변경하지 않고, 부수효과를 최소화하며, 프로그램이 안정성을 높이는 데 기여합니다.