[JavaScript] 개념노트 7편: 함수 기본 개념

JavaScript 개념노트 7편: 함수 기본 개념

안녕하세요. 지난 글에서는 같은 코드를 여러 번 실행할 때 사용하는 반복문에 대해 알아보았습니다. 이번 글에서는 JavaScript에서 코드를 묶어서 재사용할 수 있게 해주는 함수에 대해 정리해보겠습니다.

함수는 JavaScript에서 매우 중요한 개념입니다. 처음에는 조금 낯설 수 있지만, 쉽게 말하면 자주 사용하는 코드를 이름 붙여 저장해두는 방법이라고 생각하면 됩니다.

---

1. 함수란?

함수는 특정 작업을 하는 코드를 하나로 묶어둔 것입니다.

예를 들어 인사 메시지를 출력하는 코드를 여러 번 사용해야 한다고 생각해보겠습니다. 함수를 사용하지 않으면 같은 코드를 계속 반복해서 작성해야 합니다.

console.log("안녕하세요!");
console.log("안녕하세요!");
console.log("안녕하세요!");

하지만 함수를 사용하면 같은 코드를 하나로 묶어두고 필요할 때마다 호출해서 사용할 수 있습니다.

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

sayHello();
sayHello();
sayHello();

위 코드에서 sayHello는 함수 이름입니다. sayHello()라고 작성하면 함수 안에 있는 코드가 실행됩니다.

쉽게 말하면 함수는 “필요할 때 다시 사용할 수 있는 코드 묶음”입니다.

---

2. 함수를 사용하는 이유

함수를 사용하는 가장 큰 이유는 코드를 재사용하기 위해서입니다.

같은 코드를 여러 번 작성하면 코드가 길어지고, 수정할 때도 불편합니다. 하지만 함수로 만들어두면 필요할 때마다 함수 이름만 호출하면 됩니다.

• 같은 코드를 반복해서 작성하지 않아도 됩니다.
• 코드를 더 깔끔하게 정리할 수 있습니다.
• 수정할 때 한 곳만 고치면 됩니다.
• 프로그램의 흐름을 이해하기 쉬워집니다.

---

3. 함수 선언하기

함수를 만들 때는 function 키워드를 사용합니다.

기본 구조는 다음과 같습니다.

function 함수이름() {
  실행할 코드
}

예제를 보겠습니다.

function printMessage() {
  console.log("JavaScript 함수를 공부하고 있습니다.");
}

위 코드는 printMessage라는 함수를 만든 것입니다. 하지만 함수를 만들었다고 해서 바로 실행되는 것은 아닙니다.

---

4. 함수 호출하기

함수를 실행하려면 함수 이름 뒤에 괄호를 붙여서 호출해야 합니다.

function printMessage() {
  console.log("JavaScript 함수를 공부하고 있습니다.");
}

printMessage();

printMessage();를 작성하면 함수 안에 있는 코드가 실행됩니다.

즉, 함수는 두 단계로 사용합니다.

1. 함수를 만든다.
2. 필요한 곳에서 함수를 호출한다.

---

5. 함수는 여러 번 호출할 수 있다

한 번 만든 함수는 여러 번 호출할 수 있습니다.

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

sayHello();
sayHello();
sayHello();

위 코드는 안녕하세요!를 세 번 출력합니다.

이처럼 함수를 사용하면 같은 코드를 반복해서 작성하지 않고, 함수 호출만으로 같은 동작을 여러 번 실행할 수 있습니다.

---

6. 매개변수란?

매개변수는 함수가 실행될 때 외부에서 값을 전달받기 위해 사용하는 변수입니다.

예를 들어 이름에 따라 다른 인사 메시지를 출력하고 싶다면 매개변수를 사용할 수 있습니다.

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

sayHello("철수");
sayHello("영희");

위 코드에서 name이 매개변수입니다. 함수를 호출할 때 전달한 "철수", "영희" 값이 name에 들어갑니다.

결과는 다음과 같습니다.

철수님, 안녕하세요!
영희님, 안녕하세요!

---

7. 인수란?

인수는 함수를 호출할 때 실제로 전달하는 값입니다.

function introduce(name) {
  console.log("제 이름은 " + name + "입니다.");
}

introduce("민수");

위 코드에서 name은 매개변수이고, "민수"는 인수입니다.

구분	의미	예시
매개변수	함수에서 값을 받기 위해 만든 변수	function hello(name)
인수	함수를 호출할 때 전달하는 실제 값	hello("철수")

---

8. 매개변수 여러 개 사용하기

함수는 매개변수를 여러 개 받을 수도 있습니다. 매개변수가 여러 개일 때는 쉼표로 구분합니다.

function add(a, b) {
  console.log(a + b);
}

add(10, 20);

위 코드에서 a에는 10, b에는 20이 들어갑니다. 그래서 결과는 30입니다.

이번에는 이름과 나이를 함께 출력해보겠습니다.

function introduce(name, age) {
  console.log("이름: " + name);
  console.log("나이: " + age);
}

introduce("철수", 20);

결과는 다음과 같습니다.

이름: 철수
나이: 20

---

9. return이란?

return은 함수 안에서 만든 값을 함수 밖으로 돌려줄 때 사용합니다.

예제를 보겠습니다.

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

const result = add(10, 20);

console.log(result);

위 코드에서 add(10, 20)은 30을 반환합니다. 그 반환된 값이 result 변수에 저장됩니다.

즉, return은 함수의 결과값을 밖으로 내보내는 역할을 합니다.

---

10. console.log와 return의 차이

처음 함수를 공부할 때 console.log와 return을 헷갈릴 수 있습니다.

console.log는 값을 콘솔에 출력하는 기능입니다. 반면 return은 값을 함수 밖으로 돌려주는 기능입니다.

function addPrint(a, b) {
  console.log(a + b);
}

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

addPrint(10, 20);

const result = addReturn(10, 20);
console.log(result);

구분	역할
console.log	콘솔에 값을 출력합니다.
return	함수의 결과값을 밖으로 돌려줍니다.

화면에 확인만 하고 싶다면 console.log, 계산 결과를 다른 곳에서 다시 사용하고 싶다면 return을 사용합니다.

---

11. return을 만나면 함수가 종료된다

함수 안에서 return을 만나면 함수는 즉시 종료됩니다. 그래서 return 아래에 있는 코드는 실행되지 않습니다.

function test() {
  console.log("첫 번째 출력");

  return;

  console.log("두 번째 출력");
}

test();

위 코드에서는 첫 번째 출력만 실행됩니다. return을 만난 뒤 함수가 끝나기 때문에 두 번째 출력은 실행되지 않습니다.

---

12. 조건문과 함수 함께 사용하기

함수 안에서 조건문을 사용할 수도 있습니다.

function checkAge(age) {
  if (age >= 18) {
    return "성인입니다.";
  } else {
    return "미성년자입니다.";
  }
}

const message = checkAge(20);

console.log(message);

checkAge 함수는 나이를 받아서 성인인지 미성년자인지 판단한 뒤 결과를 반환합니다.

age가 20이므로 결과는 성인입니다.입니다.

---

13. 반복문과 함수 함께 사용하기

함수 안에서 반복문도 사용할 수 있습니다.

function printNumbers() {
  for (let i = 1; i <= 5; i++) {
    console.log(i);
  }
}

printNumbers();

위 코드는 함수를 호출하면 1부터 5까지 숫자를 출력합니다.

이번에는 원하는 숫자까지 출력하도록 만들어보겠습니다.

function printNumbers(endNumber) {
  for (let i = 1; i <= endNumber; i++) {
    console.log(i);
  }
}

printNumbers(3);
printNumbers(5);

printNumbers(3)을 호출하면 1부터 3까지 출력되고, printNumbers(5)를 호출하면 1부터 5까지 출력됩니다.

---

14. 기본값 매개변수

함수를 호출할 때 인수를 전달하지 않으면 매개변수 값은 undefined가 됩니다.

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

sayHello();

위 코드에서는 name에 값이 들어오지 않았기 때문에 undefined님, 안녕하세요!처럼 출력될 수 있습니다.

이런 경우 기본값을 지정할 수 있습니다.

function sayHello(name = "방문자") {
  console.log(name + "님, 안녕하세요!");
}

sayHello();
sayHello("철수");

결과는 다음과 같습니다.

방문자님, 안녕하세요!
철수님, 안녕하세요!

---

15. 함수 이름 짓는 방법

함수 이름은 보통 함수가 어떤 일을 하는지 알 수 있게 작성하는 것이 좋습니다.

좋지 않은 예시는 다음과 같습니다.

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

function test() {
  console.log("로그인 확인");
}

함수 이름이 너무 짧거나 의미가 불분명하면 나중에 코드를 읽을 때 이해하기 어렵습니다.

좋은 예시는 다음과 같습니다.

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

function checkLogin() {
  console.log("로그인 상태를 확인합니다.");
}

function calculateTotalPrice() {
  console.log("총 금액을 계산합니다.");
}

함수 이름은 보통 동사로 시작하는 경우가 많습니다. 예를 들어 get, set, check, create, calculate, print 같은 단어를 자주 사용합니다.

---

16. 함수 사용 예제: 총 금액 계산하기

상품 가격과 수량을 받아 총 금액을 계산하는 함수를 만들어보겠습니다.

function calculateTotalPrice(price, count) {
  return price * count;
}

const totalPrice = calculateTotalPrice(15000, 3);

console.log(totalPrice);

위 코드에서 price는 상품 가격, count는 수량입니다. 함수는 두 값을 곱해서 총 금액을 반환합니다.

결과는 45000입니다.

---

17. 함수 사용 예제: 로그인 메시지 만들기

로그인 상태에 따라 다른 메시지를 반환하는 함수입니다.

function getLoginMessage(isLogin) {
  if (isLogin) {
    return "GWDEVELBlog에 오신 것을 환영합니다.";
  }

  return "로그인이 필요합니다.";
}

console.log(getLoginMessage(true));
console.log(getLoginMessage(false));

isLogin 값이 true이면 환영 메시지를 반환하고, false이면 로그인 안내 메시지를 반환합니다.

여기서 else를 사용하지 않아도 되는 이유는 if 안에서 return을 만나면 함수가 바로 종료되기 때문입니다.

---

18. 오늘의 핵심 정리

• 함수는 특정 작업을 하는 코드를 하나로 묶어둔 것입니다.
• function 키워드를 사용해서 함수를 만들 수 있습니다.
• 함수는 만든 뒤 함수 이름으로 호출해야 실행됩니다.
• 매개변수는 함수에서 값을 받기 위해 사용하는 변수입니다.
• 인수는 함수를 호출할 때 전달하는 실제 값입니다.
• return은 함수의 결과값을 밖으로 돌려줍니다.
• return을 만나면 함수는 즉시 종료됩니다.
• 함수를 사용하면 코드를 재사용하고 깔끔하게 정리할 수 있습니다.

---

마무리

이번 글에서는 JavaScript의 함수 기본 개념에 대해 알아보았습니다. 함수는 JavaScript에서 아주 중요한 문법입니다. 앞으로 배열, 객체, 이벤트, 비동기 처리 등을 배울 때도 함수는 계속 등장합니다.

처음에는 매개변수, 인수, return이라는 용어가 헷갈릴 수 있습니다. 하지만 함수를 직접 여러 번 만들어보면 자연스럽게 이해할 수 있습니다.

다음 글에서는 함수를 만드는 또 다른 방법인 함수 표현식과 화살표 함수에 대해 알아보겠습니다.

다음 편: JavaScript 개념노트 8편 - 화살표 함수와 함수 표현식