12. JavaScript 함수의 모든 것 | 웹 개발 기초

얼음 스타일, dall-e

 

JavaScript 함수의 모든 것: 정의, 호출 및 고급 사용법

 

01. 함수 정의하기

1) 함수 선언

함수 선언은 JavaScript에서 함수를 정의하는 가장 기본적인 방법입니다. 함수 선언은 function 키워드를 사용하여 함수의 이름과 본문을 정의합니다. 함수 선언은 코드가 실행되기 전에 함수가 정의되므로, 함수 선언 후 어디서든 해당 함수를 호출할 수 있습니다.

예시 1: 간단한 함수 선언

function greet() {
    console.log('Hello, World!');
}

greet();

출력 결과:

Hello, World!

위 예시에서는 greet라는 함수를 선언하고, console.log를 사용하여 'Hello, World!'를 출력합니다. 함수가 호출될 때마다 동일한 메시지가 출력됩니다.

예시 2: 인자를 사용하는 함수

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

greet('Alice');
greet('Bob');

출력 결과:

Hello, Alice!
Hello, Bob!

이 예시에서는 name이라는 매개변수를 받아서, 각각 다른 이름을 가진 인사말을 출력합니다.

2) 함수 표현식

함수 표현식은 변수를 사용하여 함수를 정의하는 방법입니다. 함수 표현식은 function 키워드를 사용하여 이름 없는 함수를 정의한 다음, 이를 변수에 할당합니다. 함수 표현식은 할당된 이후에만 호출할 수 있습니다.

예시 1: 간단한 함수 표현식

const greet = function() {
    console.log('Hello, World!');
};

greet();

출력 결과:

Hello, World!

위 예시에서는 이름 없는 함수를 greet 변수에 할당하고, 이를 호출하여 메시지를 출력합니다.

예시 2: 인자를 사용하는 함수 표현식

const greet = function(name) {
    console.log('Hello, ' + name + '!');
};

greet('Alice');
greet('Bob');

출력 결과:

Hello, Alice!
Hello, Bob!

이 예시에서는 함수 표현식을 사용하여 name 매개변수를 받아서 인사말을 출력합니다. 함수 선언과 동일한 방식으로 동작하지만, 할당된 변수 이름을 사용하여 호출합니다.

 

02. 함수 호출하기

1) 기본적인 함수 호출

함수 호출은 정의된 함수를 실행하는 과정입니다. 함수 호출 시 함수 이름을 사용하고, 괄호 안에 필요한 인자를 전달합니다. 함수는 호출될 때마다 정의된 코드를 실행합니다.

예시 1: 간단한 함수 호출

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

console.log(add(3, 4)); // 출력: 7

위 예시에서는 add 함수를 정의하고, 두 개의 숫자를 더한 결과를 반환합니다. add(3, 4) 호출 시 7을 반환합니다.

예시 2: 여러 번 함수 호출

function square(num) {
    return num * num;
}

console.log(square(2)); // 출력: 4
console.log(square(5)); // 출력: 25

이 예시에서는 square 함수를 사용하여 주어진 숫자의 제곱을 계산합니다. 각각의 호출에서 다른 결과를 출력합니다.

2) 재귀 함수 호출

재귀 함수는 자기 자신을 호출하는 함수입니다. 재귀 함수는 일반적으로 종료 조건을 포함하여 무한 반복을 방지합니다. 재귀 함수는 복잡한 문제를 간단한 하위 문제로 분할하여 해결하는 데 유용합니다.

예시 1: 팩토리얼 계산

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 출력: 120

위 예시에서는 factorial 함수가 재귀적으로 자기 자신을 호출하여 주어진 숫자의 팩토리얼을 계산합니다. factorial(5)는 5 * 4 * 3 * 2 * 1을 계산하여 120을 반환합니다.

예시 2: 피보나치 수열 계산

function fibonacci(n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(6)); // 출력: 8

이 예시에서는 fibonacci 함수가 재귀적으로 자기 자신을 호출하여 피보나치 수열의 n번째 숫자를 계산합니다. fibonacci(6)은 피보나치 수열의 6번째 숫자인 8을 반환합니다.

재귀 함수는 복잡한 문제를 간단한 하위 문제로 분할하여 해결하는 데 유용하지만, 잘못 사용하면 무한 루프에 빠질 수 있으므로 주의가 필요합니다.

 

03. 함수 스코프와 클로저

1) 스코프의 개념

스코프(Scope)는 변수와 함수가 유효한 범위를 의미합니다. JavaScript에는 두 가지 주요 스코프가 있습니다: 전역 스코프와 지역 스코프.

• 전역 스코프(Global Scope): 전역 스코프에 선언된 변수는 코드 전체에서 접근할 수 있습니다.
• 지역 스코프(Local Scope): 함수 내부에서 선언된 변수는 해당 함수 내부에서만 접근할 수 있습니다. 이를 함수 스코프(Function Scope)라고도 합니다.

예시 1: 전역 스코프

var globalVar = "I am global";

function showGlobalVar() {
    console.log(globalVar);
}

showGlobalVar(); // 출력: I am global

위 예시에서는 globalVar 변수가 전역 스코프에 선언되었기 때문에 함수 내에서도 접근할 수 있습니다.

예시 2: 지역 스코프

function localScopeExample() {
    var localVar = "I am local";
    console.log(localVar);
}

localScopeExample(); // 출력: I am local
console.log(localVar); // 오류: localVar is not defined

위 예시에서는 localVar 변수가 함수 내부에서 선언되었기 때문에 함수 외부에서는 접근할 수 없습니다.

2) 클로저의 이해

클로저(Closure)는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 클로저는 함수가 생성될 당시의 스코프를 기억하고, 그 스코프에 접근할 수 있는 함수를 의미합니다. 클로저를 사용하면 함수 외부에서 내부 변수를 참조하거나 조작할 수 있습니다.

예시 1: 클로저의 기본 개념

function outerFunction() {
    var outerVar = "I am outside!";
    
    function innerFunction() {
        console.log(outerVar);
    }
    
    return innerFunction;
}

const inner = outerFunction();
inner(); // 출력: I am outside!

위 예시에서는 innerFunction이 outerFunction 내에서 선언되었기 때문에 outerFunction의 변수 outerVar에 접근할 수 있습니다. 이는 클로저의 기본 개념을 보여줍니다.

예시 2: 클로저를 사용한 데이터 은닉

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 출력: 1
console.log(counter()); // 출력: 2
console.log(counter()); // 출력: 3

위 예시에서는 클로저를 사용하여 count 변수를 은닉하고, 함수 외부에서 직접 접근하지 못하게 합니다. createCounter 함수가 반환하는 내부 함수는 count 변수에 접근하고, 값을 증가시킵니다.

 

04. 매개변수와 인자

1) 기본 매개변수

기본 매개변수(Default Parameters)는 함수 호출 시 인자가 전달되지 않았을 때 사용할 기본값을 설정하는 기능입니다. ES6부터 도입된 이 기능을 사용하면 함수의 유연성을 높일 수 있습니다.

예시 1: 기본 매개변수 설정

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

greet(); // 출력: Hello, Guest!
greet("Alice"); // 출력: Hello, Alice!

위 예시에서는 name 매개변수에 기본값 "Guest"를 설정하여, 인자가 전달되지 않았을 때 기본값을 사용합니다.

2) 나머지 매개변수

나머지 매개변수(Rest Parameters)는 함수의 인자를 배열로 수집하는 기능입니다. 이를 통해 함수가 가변 인자를 처리할 수 있습니다. 나머지 매개변수는 ...을 사용하여 정의합니다.

예시 1: 나머지 매개변수 사용

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

console.log(sum(1, 2, 3)); // 출력: 6
console.log(sum(4, 5, 6, 7)); // 출력: 22

위 예시에서는 sum 함수가 가변 인자를 받아서 모든 숫자의 합을 계산합니다. 나머지 매개변수 numbers는 함수 호출 시 전달된 모든 인자를 배열로 수집합니다.

예시 2: 나머지 매개변수와 다른 매개변수 함께 사용

function introduce(name, age, ...hobbies) {
    console.log(`Name: ${name}, Age: ${age}`);
    console.log(`Hobbies: ${hobbies.join(", ")}`);
}

introduce("Alice", 25, "Reading", "Traveling", "Cooking");
// 출력:
// Name: Alice, Age: 25
// Hobbies: Reading, Traveling, Cooking

위 예시에서는 introduce 함수가 이름과 나이, 그리고 여러 개의 취미를 인자로 받습니다. 나머지 매개변수 hobbies는 취미 목록을 배열로 수집합니다.

 

05. 화살표 함수

1) 화살표 함수의 정의

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 선언 방식입니다. 화살표 함수는 간결한 문법과 함께 function 키워드 대신 => 문법을 사용합니다. 특히, 화살표 함수는 this 바인딩 방식이 다르기 때문에 콜백 함수나 메서드 내에서 자주 사용됩니다.

예시 1: 기본적인 화살표 함수

const add = (a, b) => a + b;
console.log(add(2, 3)); // 출력: 5

위 예시에서는 두 개의 매개변수를 받아 더한 결과를 반환하는 화살표 함수를 정의합니다. return 키워드를 생략하고 한 줄로 작성할 수 있습니다.

예시 2: 인자가 없는 화살표 함수

const greet = () => console.log('Hello, World!');
greet(); // 출력: Hello, World!

인자가 없는 경우 빈 괄호 ()를 사용하여 화살표 함수를 정의할 수 있습니다.

예시 3: 한 개의 인자를 받는 화살표 함수

const square = x => x * x;
console.log(square(4)); // 출력: 16

매개변수가 하나일 때는 괄호를 생략할 수 있습니다.

2) 화살표 함수와 this

화살표 함수는 기존의 함수 선언과 달리 자신만의 this 바인딩을 가지지 않습니다. 대신, 화살표 함수는 자신이 정의된 외부 스코프의 this 값을 상속받습니다. 이러한 특징은 콜백 함수나 메서드 내에서 this 문제를 해결하는 데 유용합니다.

예시 1: 화살표 함수와 기존 함수의 this 바인딩 비교

function Person() {
    this.age = 0;

    setInterval(function growUp() {
        this.age++;
        console.log(this.age);
    }, 1000);
}

const p = new Person();
// 예상 출력: NaN

위 예시에서는 growUp 함수 내에서 this가 전역 객체를 참조하게 되므로 this.age는 undefined이고, 결과적으로 NaN이 출력됩니다.

예시 2: 화살표 함수를 사용한 this 바인딩

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}

const p = new Person();
// 예상 출력: 1, 2, 3, ...

화살표 함수를 사용하면 this는 Person 객체를 참조하게 되어 올바르게 age 값을 증가시킵니다.

 

06. 함수의 고급 사용법

1) 함수 호이스팅

함수 호이스팅(Function Hoisting)은 함수 선언이 코드의 최상위로 끌어올려지는(JavaScript 엔진에 의해) 동작을 의미합니다. 함수 선언은 실제 코드의 위치와 관계없이 함수 호출 전에 사용할 수 있습니다.

예시 1: 함수 호이스팅 예시

console.log(greet()); // 출력: Hello!

function greet() {
    return 'Hello!';
}

위 예시에서는 함수 선언 greet이 코드의 맨 아래에 있지만, 함수 호출이 문제없이 작동합니다. 이는 함수 선언이 호이스팅되기 때문입니다.

예시 2: 함수 표현식과 호이스팅

console.log(greet); // 출력: undefined
console.log(greet()); // 오류: greet is not a function

var greet = function() {
    return 'Hello!';
};

위 예시에서는 함수 표현식이 호이스팅되지 않기 때문에 greet 변수는 초기화되지 않은 상태로 undefined가 출력되고, 함수를 호출하면 오류가 발생합니다.

2) arguments 객체 사용

arguments 객체는 함수 내부에서 사용할 수 있는 유사 배열 객체로, 함수 호출 시 전달된 모든 인자에 접근할 수 있습니다. 이를 통해 함수 정의 시 명시되지 않은 인자에도 접근할 수 있습니다.

예시 1: arguments 객체 사용

function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3)); // 출력: 6
console.log(sum(4, 5, 6, 7)); // 출력: 22

위 예시에서는 arguments 객체를 사용하여 모든 인자를 합산하는 sum 함수를 정의합니다.

예시 2: arguments 객체와 나머지 매개변수 비교

function showArguments() {
    console.log(arguments);
}

showArguments(1, 'a', true); // 출력: [Arguments] { '0': 1, '1': 'a', '2': true }

const showRest = (...args) => {
    console.log(args);
};

showRest(1, 'a', true); // 출력: [ 1, 'a', true ]

arguments 객체는 함수 내부에서 암묵적으로 제공되며, Rest Parameters는 명시적으로 정의하여 배열로 받을 수 있습니다. arguments 객체는 화살표 함수에서 사용할 수 없으므로, 화살표 함수에서는 나머지 매개변수를 사용해야 합니다.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.05 - [Study] - 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초

2024.07.04 - [Study] - 08. CSS Layout 종합 학습 | 웹 개발 기초

08. CSS Layout 종합 학습 | 웹 개발 기초

2024.07.04 - [Study] - 07. CSS Grid Layout 가이드 | 웹 개발 기초

07. CSS Grid Layout 가이드 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)