[JavaScript] 7. 함수

서회정

Jan 28, 2026

Contents

1. 실행 순서 2. 예제 1. 함수 만들기 2. 재사용 가능한 함수로 만들기 3. return 값 변수에 담기 4. 중첩함수 사용해보기 ✅ 선언을 하기 전 호출했을때 오류가 나지 않는 이유?

💡

중복되는 코드를 간결하게 만들어줌!

한 번 선언하고 재사용할 수 있음!

함수 선언 ⇒ 함수 호출!

1. 실행 순서


함수선언->첫번째코드->함수호출->함수내부코드1->함수내부코드2->세번째코드

2. 예제

💡

직사각형의 넓이를 구하는 함수를 만들어보자

1. 함수 만들기


function getArea() {
  let width = 10;
  let height = 20;
  let area = width * height;

  console.log(area);
}

getArea();

2. 재사용 가능한 함수로 만들기

💡

매개변수 = 값을 받을 변수 (width, height)

인수 = 함수 호출 시 함수에게 전달하는 값 (10, 20)


function getArea(width, height) {
  let area = width * height;

  console.log(area);
}

getArea(10, 20);


function getArea(width, height) {
  let area = width * height;

  console.log(area);
}

getArea(10, 20);
getArea(20, 30);
getArea(120, 200);

3. return 값 변수에 담기

💡

return = 반환값 입력

함수 내부에 return 값을 입력하면 해당하는 줄에서 함수가 종료된다. 따라서 return은 가장 마지막에 적는 것이 일반적이며, 그렇지 않은 경우에 return 다음에 오는 코드는 실행되지 않는다.


function getArea(width, height) {
  let area = width * height;

  return area;
}

let area1 = getArea(10, 20);
console.log(area1);
getArea(20, 30);
getArea(120, 200);

4. 중첩함수 사용해보기

💡

자바스크립트에서는 함수 안에 또 다른 함수를 사용할 수있다. 이것은 중첩함수라 부른다.


function getArea(width, height) {
  function another() {
    console.log("another");
  }
  another();
  let area = width * height;

  return area;
}

let area1 = getArea(10, 20);

✅ 선언을 하기 전 호출했을때 오류가 나지 않는 이유?

다른 언어에서는 함수를 선언하기 전 호출을 했을 때 오류가 발생한다. 하지만 js에서는 오류가 발생하지 않는데 그 이유는 호이스팅 때문이다.

💡

호이스팅이란?

선언문들을 코드가 실행되기 전에 최상단으로 끌어올려주는 것을 말한다.

⇒ 조금 더 유연하게 프로그래밍을 할 수 있다!