함수 정의 및 호출

1. 도입 (왜 배워야 하는가)

JavaScript에서 함수는 코드의 재사용성을 높이고, 복잡한 작업을 단순화하는 데 필수적인 요소입니다. 함수는 특정 작업을 수행하는 코드 블록으로, 이를 통해 프로그램의 구조를 명확하게 하고 유지보수를 용이하게 합니다. 만약 함수 개념을 모른다면, 코드의 중복이 발생하고, 같은 작업을 여러 번 작성해야 하는 비효율적인 상황이 발생할 수 있습니다. 이는 코드 관리의 어려움으로 이어지고, 버그 발생 확률을 높입니다. 결국, 실무에서는 함수 사용이 필수적입니다.

2. 핵심 개념 설명

함수는 특정 작업을 수행하기 위해 작성된 코드의 집합입니다. 이를 실생활에 비유하자면, 요리 레시피와 같습니다. 요리 레시피는 특정 재료와 과정을 통해 음식을 만드는 방법을 설명합니다. 마찬가지로, 함수도 입력(인자)을 받아 특정 작업을 수행하고 결과를 반환합니다.

관련 용어 정리

3. 기본 코드 예제

가장 기본적인 함수 정의 및 호출 예제를 살펴보겠습니다.

function greet(name) { // 함수 정의
    return "안녕하세요, " + name + "!"; // 입력된 이름으로 인사 메시지를 생성
}

console.log(greet("홍길동")); // 함수 호출

실행 결과:

안녕하세요, 홍길동!

코드 한 줄씩 동작 설명

1. function greet(name) {: greet이라는 이름의 함수를 정의하고, name이라는 매개변수를 받습니다.
2. return "안녕하세요, " + name + "!";: 함수가 호출되면 인사 메시지를 생성하고 반환합니다.
3. console.log(greet("홍길동"));: greet 함수를 호출하며, 인자로 "홍길동"을 전달하고, 결과를 콘솔에 출력합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니에 상품 추가하기

function addToCart(product, quantity) {
    return ${product}가 ${quantity}개 장바구니에 추가되었습니다.;
}

console.log(addToCart("사과", 3));

상황 설명: 사용자가 "사과"를 3개 장바구니에 추가할 때, 이 함수를 호출하여 결과를 확인합니다.

예제 2: 계산기 기능

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

console.log(add(5, 10));

상황 설명: 두 숫자를 더하는 계산기를 구현할 때 사용됩니다.

5. 흔한 실수와 주의사항

실수 1: 함수 호출 시 인자 생략

function greet(name) {
    return "안녕하세요, " + name + "!";
}

console.log(greet()); // 인자를 주지 않음

문제: 인자를 주지 않으면 undefined가 출력됩니다.

올바른 코드

console.log(greet("홍길동")); // 인자를 올바르게 제공

실수 2: 함수 정의 시 괄호 생략

function greet {
    return "안녕하세요!";
}

문제: 괄호를 생략하면 문법 오류가 발생합니다.

올바른 코드

function greet() {
    return "안녕하세요!";
}

6. 정리

• 함수는 코드의 재사용성을 높이고 복잡성을 줄이는 중요한 요소입니다.
• 함수를 정의할 때는 function 키워드를 사용하고, 인자를 통해 데이터를 전달합니다.
• 함수 호출 시 인자를 정확히 제공해야 합니다.
• 다음에 학습하면 좋은 주제는 함수의 스코프와 고차 함수입니다.