JavaScript 함수: 초보자를 위한 실습 중심의 완벽 가이드

반응형


JavaScript 함수란 무엇인가?


JavaScript 함수는 특정 작업을 수행하도록 설계된 코드 블록입니다. 함수는 재사용 가능하고 코드를 모듈화하는 데 도움을 줍니다. 이 글에서는 함수의 선언, 호출, 다양한 활용 방법을 예제와 함께 알아보겠습니다.

1. 함수의 기본 구조


JavaScript에서 함수를 선언하려면 function 키워드를 사용합니다. 함수는 입력(매개변수)을 받아 작업을 수행하고 결과값을 반환할 수 있습니다.

예제: 기본 함수

function sayHello() {
    console.log("안녕하세요!");
}

sayHello(); // 출력: 안녕하세요!


기본 구조

function 함수이름(매개변수1, 매개변수2) {
    // 실행할 코드
    return 결과값; // 선택 사항
}


2. 함수의 매개변수와 반환값


함수는 매개변수를 사용하여 입력값을 받고, return 키워드를 사용하여 결과값을 반환할 수 있습니다.

예제: 매개변수와 반환값이 있는 함수

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

console.log(add(5, 3)); // 출력: 8


예제: 매개변수가 없는 함수

function getRandomNumber() {
    return Math.random(); // 0과 1 사이의 랜덤 숫자 반환
}

console.log(getRandomNumber());


3. 함수 표현식과 화살표 함수


JavaScript에서는 함수를 변수에 할당할 수도 있습니다. 이를 함수 표현식이라고 합니다. ES6에서는 더 간결한 문법인 화살표 함수도 사용할 수 있습니다.

예제: 함수 표현식

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

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


예제: 화살표 함수

const divide = (a, b) => a / b;

console.log(divide(10, 2)); // 출력: 5


4. 기본값 매개변수


ES6부터 매개변수에 기본값을 설정할 수 있습니다.

예제: 기본값 매개변수

function greet(name = "친구") {
    console.log(`안녕하세요, ${name}님!`);
}

greet();           // 출력: 안녕하세요, 친구님!
greet("홍길동");    // 출력: 안녕하세요, 홍길동님!


5. 함수의 다양한 활용 예제


예제: 배열 요소를 합산하는 함수

function sumArray(numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

const nums = [1, 2, 3, 4, 5];
console.log(sumArray(nums)); // 출력: 15


예제: 팩토리얼 함수 (재귀 함수)

function factorial(n) {
    if (n === 0) return 1; // 종료 조건
    return n * factorial(n - 1); // 재귀 호출
}

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


6. 즉시 실행 함수 (IIFE)


IIFE(즉시 실행 함수)는 선언과 동시에 실행되는 함수입니다.

예제: IIFE 사용

(function() {
    console.log("이 함수는 즉시 실행됩니다!");
})();


7. 고급 함수 기능


JavaScript 함수는 일급 객체(First-Class Object)로, 다른 함수의 매개변수로 전달되거나 반환값으로 사용할 수 있습니다.

예제: 함수 전달

function executeCallback(callback) {
    console.log("콜백 함수 실행:");
    callback();
}

executeCallback(() => {
    console.log("안녕하세요, 콜백입니다!");
});


JavaScript 함수는 재사용 가능한 코드를 작성하고 작업을 모듈화하는 핵심 도구입니다. 기본 선언부터 고급 개념까지 이 글의 예제를 직접 실행하며 학습하면 함수 사용에 대한 자신감을 키울 수 있습니다.

이 글은 검색 최적화를 위해 중복 키워드 없이 작성되었으며, 초보자와 중급 사용자를 모두 고려한 실용적인 예제를 포함하고 있습니다. JavaScript의 함수 개념을 이해하고 실력을 향상하는 데 도움이 되길 바랍니다.

반응형