[JS] 일반 함수, 화살표 함수

특징	일반 함수	화살표 함수
this	호출된 객체에 따라 변경	정의될 때 환경에서 고정
arguments 객체	사용 가능	사용 불가 (Rest 파라미터로 대체)
생성자 함수 사용	가능	불가능

일반 함수의 특징

• this의 동작 방식: 일반 함수의 this는 함수를 호출한 객체에 따라 달라집니다.
• arguments 객체: 일반 함수는 함수 호출 시 전달된 모든 인자(파라미터)에 접근할 수 있는 내장 객체 arguments를 제공합니다. 즉, 함수를 정의할 때 정한 파라미터 개수와 무관하게 전달된 모든 인수를 활용할 수 있습니다.
• 생성자 함수로 사용 가능: 객체 생성을 위해 new 키워드를 사용할 수 있습니다.

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("철수")); // Hello, 철수

function sumAll() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

console.log(sumAll(1, 2, 3, 4)); // 10

 

화살표 함수의 특징

• this의 동작 방식: 화살표 함수의 this는 함수가 정의된 환경에서 고정되며 바뀌지 않습니다.
• arguments 객체 없음: 화살표 함수에서는 arguments 객체를 사용할 수 없으며, 대신 Rest 파라미터(...args)를 사용하여 인자들을 처리합니다.
• 생성자 함수 사용 불가: 화살표 함수는 객체 생성 시 new 키워드를 사용할 수 없습니다.

const greet = name => "Hello, " + name;

console.log(greet("영희")); // Hello, 영희

const sumAll = (...numbers) => numbers.reduce((sum, num) => sum + num, 0);

console.log(sumAll(1, 2, 3, 4)); // 10

 

상황별 함수 선택 방법

일반 함수를 선택해야 할 때

• 객체의 메서드를 만들 때
• 상태(this)를 직접 제어해야 할 때
• 생성자 함수를 정의할 때

const counter = {
  count: 0,
  increase: function() {
    this.count += 1;
  }
};

counter.increase();
console.log(counter.count); // 1

화살표 함수를 선택해야 할 때

• 간단한 로직을 표현할 때
• 배열 메서드(map, filter 등)의 콜백 함수로 작성할 때
• 순수 함수(pure function)를 작성할 때 (입력값에 따라 항상 같은 결과를 반환하고 외부 상태에 의존하지 않는 함수)

// 순수 함수 예시 (화살표 함수)
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5