[JS] 함수(Function) 5

21 Mar 2026 • JS

함수(function)

목차

  1. 매개변수 관련 핵심 문법
    1. 기본값
    2. 나머지 매개변수(rest parameter)
    3. 구조 분해 매개변수
  2. arguments
  3. 재귀 함수
  4. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)
  5. 비동기 함수와 async/await
  6. 예외 처리와 함수
  7. 생성자 함수와 new
  8. prototype
  9. 순수 함수와 부수 효과
    1. 순수 함수
    2. 부수 효과가 있는 함수
  10. 참고

1. 매개변수 관련 핵심 문법

1.1. 기본값

function greet(name = "Guest") {
  return `Hello, ${name}`;
}

greet(); // Hello, Guest

1.2. 나머지 매개변수(rest parameter)

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

sum(1, 2, 3, 4); // 10

...numbers는 여러 인수를 배열로 받는다.

1.3. 구조 분해 매개변수

function printUser({ name, age }) {
  console.log(name, age);
}

printUser({ name: "홍길동", age: 20 });

배열도 가능하다.

function first([a, b]) {
  return a;
}

2. arguments

일반 함수에서는 arguments라는 유사 배열 객체를 사용할 수 있다.

function showArgs() {
  console.log(arguments);
}

showArgs(1, 2, 3);

하지만 현대 JS에서는 보통 ...rest를 더 권장한다.

function showArgs(...args) {
  console.log(args);
}

화살표 함수에는 자체 arguments가 없다.

3. 재귀 함수

함수가 자기 자신을 호출하는 방식이다.

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

주의:

  • 종료 조건이 반드시 필요하다.
  • 너무 깊으면 스택 오버플로우가 발생한다.

4. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)

예전 코드에서 많이 보인다.

(function() {
  console.log("즉시 실행");
})();

또는

(() => {
  console.log("즉시 실행");
})();

용도:

  • 스코프 격리
  • 변수 오염 방지

현대에는 모듈 시스템이 생겨 예전보다 덜 쓰지만 여전히 볼 수 있다.

5. 비동기 함수와 async/await

JS 함수는 비동기 처리와 강하게 연결된다.

async function fetchUser() {
  const response = await fetch("/user");
  const data = await response.json();
  return data;
}

async 함수는 항상 Promise를 반환한다.

async function hello() {
  return "hi";
}

이건 실제로는:

Promise.resolve("hi")

와 유사하다.

6. 예외 처리와 함수

함수 내부에서 예외를 던질 수 있다.

function divide(a, b) {
  if (b === 0) {
    throw new Error("0으로 나눌 수 없음");
  }
  return a / b;
}

호출 측에서 처리:

try {
  console.log(divide(10, 0));
} catch (err) {
  console.error(err.message);
}

7. 생성자 함수와 new

함수는 생성자로도 사용될 수 있다.

function Person(name) {
  this.name = name;
}

const p = new Person("홍길동");
console.log(p.name);

new와 함께 호출하면 대략 이런 일이 일어난다.

  1. 빈 객체 생성
  2. 그 객체의 프로토타입을 Person.prototype에 연결
  3. this를 그 새 객체로 설정
  4. 함수 실행
  5. 특별한 객체를 명시적으로 반환하지 않으면 새 객체 반환

8. prototype

모든 일반 함수는 prototype 프로퍼티를 가진다.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function() {
  return `Hi, I'm ${this.name}`;
};

const p = new Person("홍길동");
console.log(p.sayHi());

이 구조가 JS의 프로토타입 기반 상속의 핵심이다.

주의:

  • 함수 객체의 __proto__
  • 함수의 prototype
  • 인스턴스의 __proto__

이 셋은 서로 다른 개념이다.

9. 순수 함수와 부수 효과

9.1. 순수 함수

같은 입력이면 항상 같은 출력을 내보내고 외부 상태를 변경하지 않는다.

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

9.2. 부수 효과가 있는 함수

외부 상태를 변경하고, 로그 출력, 네트워크 요청 등을 한다.

function saveUser(user) {
  database.insert(user);
}

가능하면 핵심 로직은 순수 함수에 가깝게 만드는 것이 테스트와 유지보수에 유리하다.

참고

 WEB  JS

Comments

Newest Posts