[JavaScript] 개념노트 8편: 화살표 함수와 함수 표현식

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

안녕하세요. 지난 글에서는 JavaScript의 함수 기본 개념에 대해 알아보았습니다. 이번 글에서는 함수를 만드는 또 다른 방법인 함수 표현식과 화살표 함수에 대해 정리해보겠습니다.

JavaScript에서 함수는 한 가지 방식으로만 만들 수 있는 것이 아닙니다. 기본적인 함수 선언문 외에도 변수에 함수를 담는 방식, 더 짧게 작성하는 화살표 함수 방식이 있습니다.

---

1. 지난 시간 복습: 함수 선언문

먼저 지난 글에서 배운 기본 함수 형태를 다시 보겠습니다.

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

sayHello();

이 방식은 함수 선언문이라고 부릅니다. function 키워드를 사용하고, 함수 이름을 직접 작성합니다.

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

---

2. 함수 표현식이란?

함수 표현식은 함수를 변수에 저장하는 방식입니다.

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

sayHello();

위 코드에서는 이름 없는 함수를 만들고, 그 함수를 sayHello라는 변수에 저장했습니다. 그리고 sayHello()를 호출해서 함수를 실행했습니다.

쉽게 말하면 함수 표현식은 “함수를 값처럼 변수에 담아서 사용하는 방식”입니다.

---

3. 함수 선언문과 함수 표현식 비교

구분	작성 방식	특징
함수 선언문	function 함수이름() {}	가장 기본적인 함수 작성 방식
함수 표현식	const 함수이름 = function () {};	함수를 변수에 저장해서 사용

두 방식 모두 함수를 만들 수 있습니다. 다만 작성 형태와 동작 방식에 약간의 차이가 있습니다.

---

4. 함수 표현식 예제

두 숫자를 더하는 함수를 함수 표현식으로 만들어보겠습니다.

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

const result = add(10, 20);

console.log(result);

위 코드에서 add 변수에는 함수가 저장되어 있습니다. add(10, 20)을 호출하면 두 값을 더한 결과인 30이 반환됩니다.

---

5. 함수 표현식에서는 세미콜론을 붙이는 이유

함수 표현식은 변수에 함수를 저장하는 문장입니다. 그래서 보통 끝에 세미콜론 ;을 붙입니다.

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

반면 함수 선언문은 일반적으로 끝에 세미콜론을 붙이지 않습니다.

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

처음에는 헷갈릴 수 있지만, 함수 표현식은 변수 선언과 비슷하게 생각하면 이해하기 쉽습니다.

---

6. 화살표 함수란?

화살표 함수는 함수를 더 짧고 간단하게 작성하는 문법입니다. 화살표 모양의 => 기호를 사용합니다.

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

sayHello();

위 코드는 함수 표현식을 화살표 함수 형태로 바꾼 것입니다.

기존 함수 표현식은 이렇게 작성했습니다.

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

화살표 함수는 function 키워드를 생략하고, 대신 =>를 사용합니다.

---

7. 함수 표현식을 화살표 함수로 바꾸기

아래 함수 표현식을 보겠습니다.

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

이 코드를 화살표 함수로 바꾸면 다음과 같습니다.

const add = (a, b) => {
  return a + b;
};

두 코드는 같은 동작을 합니다. a와 b를 받아서 더한 값을 반환합니다.

---

8. 화살표 함수 더 짧게 작성하기

화살표 함수는 함수 안의 코드가 한 줄이고, 바로 값을 반환하는 경우 더 짧게 작성할 수 있습니다.

const add = (a, b) => a + b;

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

위 코드에서는 중괄호 {}와 return을 생략했습니다.

아래 두 코드는 같은 의미입니다.

const add1 = (a, b) => {
  return a + b;
};

const add2 = (a, b) => a + b;

함수 내용이 단순할 때는 두 번째 방식처럼 짧게 작성할 수 있습니다.

화살표 함수에서 중괄호를 생략하면 결과값이 자동으로 반환됩니다.

---

9. 매개변수가 하나일 때

화살표 함수에서 매개변수가 하나뿐이라면 괄호를 생략할 수 있습니다.

const double = number => number * 2;

console.log(double(5));

결과는 10입니다.

물론 괄호를 작성해도 문제 없습니다.

const double = (number) => number * 2;

처음 공부할 때는 괄호를 항상 작성하는 방식이 더 헷갈리지 않을 수 있습니다.

---

10. 매개변수가 없을 때

매개변수가 없을 때는 괄호를 반드시 작성해야 합니다.

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

sayHello();

매개변수가 없는데 괄호를 생략하면 문법 오류가 발생합니다.

---

11. 매개변수가 여러 개일 때

매개변수가 여러 개일 때도 괄호를 반드시 작성합니다.

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

console.log(multiply(3, 4));

결과는 12입니다.

한 줄로 줄이면 다음처럼 작성할 수도 있습니다.

const multiply = (a, b) => a * b;

console.log(multiply(3, 4));

---

12. return 생략할 때 주의할 점

화살표 함수에서 중괄호 {}를 사용하면 return을 직접 작성해야 합니다.

const add = (a, b) => {
  return a + b;
};

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

위 코드는 정상적으로 30을 반환합니다.

하지만 아래처럼 중괄호를 사용했는데 return을 작성하지 않으면 값이 반환되지 않습니다.

const add = (a, b) => {
  a + b;
};

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

이 경우 결과는 undefined입니다.

중괄호를 쓰면 return을 직접 작성해야 하고, 중괄호를 생략하면 한 줄 결과가 자동으로 반환됩니다.

---

13. 화살표 함수 예제: 인사 메시지 만들기

이름을 받아 인사 메시지를 반환하는 함수를 만들어보겠습니다.

const getGreeting = (name) => {
  return name + "님, 안녕하세요!";
};

console.log(getGreeting("철수"));

결과는 다음과 같습니다.

철수님, 안녕하세요!

한 줄로 줄이면 이렇게 작성할 수 있습니다.

const getGreeting = (name) => name + "님, 안녕하세요!";

console.log(getGreeting("철수"));

---

14. 화살표 함수 예제: 총 금액 계산하기

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

const calculateTotalPrice = (price, count) => {
  return price * count;
};

const totalPrice = calculateTotalPrice(15000, 3);

console.log(totalPrice);

결과는 45000입니다.

이 코드도 한 줄로 줄일 수 있습니다.

const calculateTotalPrice = (price, count) => price * count;

console.log(calculateTotalPrice(15000, 3));

---

15. 함수 선언문과 함수 표현식의 실행 위치 차이

함수 선언문은 함수가 작성된 위치보다 위에서 호출해도 실행될 수 있습니다.

sayHello();

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

위 코드는 실행됩니다. JavaScript가 함수 선언문을 먼저 준비해두기 때문입니다.

하지만 함수 표현식은 변수를 만든 뒤에 호출해야 합니다.

sayHello();

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

위 코드는 오류가 발생합니다. sayHello라는 변수가 아직 준비되기 전에 호출했기 때문입니다.

화살표 함수도 보통 변수에 담아서 사용하기 때문에, 선언한 뒤에 호출해야 합니다.

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

sayHello();

---

16. 함수 선언문, 함수 표현식, 화살표 함수 정리

구분	예시	특징
함수 선언문	function hello() {}	기본적인 함수 작성 방식
함수 표현식	const hello = function () {};	함수를 변수에 저장
화살표 함수	const hello = () => {};	함수를 짧게 작성 가능

---

17. 언제 어떤 함수를 사용하면 좋을까?

처음 JavaScript를 배울 때는 세 가지 방식이 모두 낯설 수 있습니다. 아래처럼 기준을 잡으면 조금 더 쉽습니다.

• 기본 개념을 익힐 때는 function 함수이름() 형태로 먼저 연습합니다.
• 함수를 변수처럼 다루고 싶을 때는 함수 표현식을 사용합니다.
• 짧고 간단한 함수를 만들 때는 화살표 함수를 사용합니다.

실제로는 최신 JavaScript 코드에서 화살표 함수를 자주 볼 수 있습니다. 특히 배열 메서드, 이벤트 처리, 콜백 함수에서 많이 사용됩니다.

---

18. 실습 예제 1: 숫자 두 배 만들기

숫자를 받아 두 배로 반환하는 함수를 만들어보겠습니다.

const double = (number) => number * 2;

console.log(double(5));
console.log(double(10));

결과는 다음과 같습니다.

10
20

---

19. 실습 예제 2: 성인 여부 확인하기

나이를 받아 성인인지 확인하는 함수를 만들어보겠습니다.

const checkAdult = (age) => {
  if (age >= 18) {
    return "성인입니다.";
  }

  return "미성년자입니다.";
};

console.log(checkAdult(20));
console.log(checkAdult(15));

결과는 다음과 같습니다.

성인입니다.
미성년자입니다.

---

20. 실습 예제 3: 블로그 제목 만들기

글 제목을 받아 블로그 제목 형식으로 반환하는 함수를 만들어보겠습니다.

const makePostTitle = (title) => {
  return "[GWDEVELBlog] " + title;
};

console.log(makePostTitle("JavaScript 화살표 함수"));

결과는 다음과 같습니다.

[GWDEVELBlog] JavaScript 화살표 함수

한 줄로 작성하면 다음과 같습니다.

const makePostTitle = (title) => "[GWDEVELBlog] " + title;

console.log(makePostTitle("JavaScript 화살표 함수"));

---

21. 오늘의 핵심 정리

• 함수 선언문은 function 함수이름() 형태로 작성합니다.
• 함수 표현식은 함수를 변수에 저장하는 방식입니다.
• 화살표 함수는 =>를 사용해서 함수를 짧게 작성하는 방식입니다.
• 화살표 함수에서 코드가 한 줄이면 return을 생략할 수 있습니다.
• 중괄호 {}를 사용하면 return을 직접 작성해야 합니다.
• 매개변수가 없거나 여러 개이면 괄호를 작성해야 합니다.
• 함수 표현식과 화살표 함수는 보통 선언한 뒤에 호출해야 합니다.

---

마무리

이번 글에서는 JavaScript의 함수 표현식과 화살표 함수에 대해 알아보았습니다. 함수는 JavaScript에서 계속 사용되는 중요한 개념이고, 화살표 함수는 최신 JavaScript 코드에서 자주 보이는 문법입니다.

처음에는 function 방식과 => 방식이 헷갈릴 수 있습니다. 하지만 둘 다 함수를 만드는 방법이라는 큰 틀에서 이해하면 어렵지 않습니다.

다음 글에서는 여러 개의 데이터를 하나로 묶어서 관리할 수 있는 배열에 대해 알아보겠습니다. 배열 생성, 접근, 추가, 삭제, 자주 사용하는 메서드를 쉽게 정리해보겠습니다.

다음 편: JavaScript 개념노트 9편 - 배열 기초와 자주 쓰는 메서드