JavaScript의 함수

이 기사는 JavaScript의 함수에 대해 설명합니다.

YouTube Video

JavaScript의 함수

JavaScript의 함수는 특정 작업을 수행하기 위해 재사용 가능한 코드 블록입니다. 함수를 사용하면 코드의 가독성이 향상되고 유지 관리가 용이해집니다. 함수는 여러 가지 방식으로 정의될 수 있으며, 매개변수와 반환 값을 사용해 유연하게 조작할 수 있습니다.

함수를 정의하는 방법

함수 선언

function 키워드를 사용하여 함수를 정의할 수 있습니다. 함수 선언은 코드 실행 전에 호이스팅되므로 정의되기 전에 호출할 수 있습니다.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

이 예제에서는 greet 함수가 선언되기 전에 호출되었기 때문에 Hello, Everyone과 Hello, Alice가 출력됩니다.

함수 표현식

함수는 변수에 할당하여 정의할 수도 있습니다. 이 경우 함수는 호이스팅되지 않으며 정의된 이후에만 호출할 수 있습니다.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

이 예제에서는 Hello, Bob이 출력됩니다.

화살표 함수

화살표 함수는 더 간단한 문법으로 함수를 정의하는 방법입니다. 화살표 함수는 특히 익명 함수(이름이 없는 함수)를 사용할 때 유용합니다. 화살표 함수는 또한 this 키워드와 관련하여 다른 동작을 합니다.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

이 예제에서 함수는 greet 및 greetShort로 선언될 수 있습니다. 함수가 한 줄일 경우, greetShort처럼 {}(중괄호)를 생략할 수 있습니다.

함수의 요소

매개변수

함수에 전달되는 값은 매개변수라고 합니다. 함수를 정의할 때 매개변수를 지정하면, 함수를 호출할 때 값을 전달할 수 있습니다.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

기본 인수

인수에 값이 전달되지 않았을 경우 사용할 기본 값을 지정할 수 있습니다.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

이 예에서 greet()가 호출되면 기본 값인 Guest가 사용됩니다.

반환값

return 문을 사용하여 함수에서 반환값을 반환할 수 있습니다. return 문이 없으면 함수는 undefined를 반환합니다.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

이 예제에서 greet는 값을 반환하지 않기 때문에 반환값은 undefined입니다.

익명 함수

이름이 없는 함수는 익명 함수라고 불립니다. 익명 함수는 주로 함수 표현식 또는 화살표 함수로 사용됩니다.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

즉시 호출 함수 표현식 (IIFE)

즉시 호출 함수 표현식 (IIFE)은 정의되자마자 실행되는 함수입니다. 주로 스코프를 제어하기 위해 사용됩니다.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

선언되자마자 실행됩니다.

콜백 함수

다른 함수에 인수로 전달하여 나중에 실행되도록 하는 함수를 콜백 함수라고 합니다. 콜백 함수는 비동기 처리 및 이벤트 핸들링에서 자주 사용됩니다.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

이 예제에서는 콘솔에 값을 출력하는 함수가 콜백 함수로 전달되었습니다.

재귀 함수

함수 자체를 호출하는 것을 재귀라고 하며, 이를 사용하여 반복 처리를 수행하는 함수를 재귀 함수라고 합니다. 예를 들어, 팩토리얼을 계산하는 함수는 다음과 같이 재귀를 사용하여 구현할 수 있습니다.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

이 예제에서는 5의 팩토리얼인 120이 표시됩니다.

this 키워드

함수 내부에서 사용되는 this는 함수가 참조하는 객체를 나타냅니다. 일반 함수에서는 호출 객체를 참조하지만, 화살표 함수에서는 정의된 스코프의 this를 유지합니다.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

obj 변수의 greet는 function 키워드를 사용하여 선언되었습니다. 따라서 this 키워드는 obj 변수의 객체를 참조합니다. 반면에, obj2 변수의 greet는 화살표 함수(arrow function)를 사용하여 선언되었습니다. 따라서 this 키워드는 외부 스코프의 객체를 참조하며, 이 예제에서는 undefined입니다.

함수 스코프와 클로저

함수 내에서 정의된 변수는 함수 외부에서 접근할 수 없습니다. 이를 함수 스코프라고 합니다. 함수가 정의된 시점의 스코프를 유지하는 클로저라는 기능도 있습니다.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

이 예제에서 inner 함수는 함수가 정의되었을 때의 스코프를 유지하므로 outerVar 변수를 접근할 수 있습니다.

요약

• 함수 선언문, 함수 표현식, 화살표 함수 등을 포함하여 함수를 정의하는 다양한 방법이 있습니다.
• 함수는 **인수(arguments)**를 받을 수 있고 **값(values)**을 반환할 수 있습니다.
• 콜백 함수 및 재귀 함수와 같은 특별한 용도가 있습니다.
• 화살표 함수와 일반 함수는 다르게 동작하므로 this 처리에 주의해야 합니다.
• 클로저를 사용하여 스코프 외부에서 내부 변수를 접근할 수 있습니다.

함수는 JavaScript의 유연한 구조를 활용하는 중요한 개념 중 하나입니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video