[Javascript] function

function, JavaScript function, JS function, 함수 선언, function declaration, function expression, 일반 함수

정의

function 은 JavaScript 에서 함수를 만드는 가장 기본적인 키워드. 호이스팅, this 동적 바인딩, arguments 객체, new 호출 등 arrow function 과 구분되는 고유한 특성을 가진다.

함수가 값 으로 다뤄지는 일급 함수 의 성질은 모든 형태에 공통.

두 가지 모양

함수 선언 (Function Declaration)

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

• 호이스팅 됨 (선언 전 호출 가능)
• 자기 이름 greet 으로 자신을 참조 가능 (재귀)

함수 표현식 (Function Expression)

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

// 이름 있는 함수 표현식 (named function expression)
const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

• 호이스팅 안 됨 (변수 선언만 호이스팅, 값은 평가 시점에 할당)
• 익명 또는 이름 있음, 이름은 내부에서만 보임

호이스팅의 차이

greet('A'); // 'Hello, A', 함수 선언은 호이스팅
function greet(name) {
  return `Hello, ${name}`;
}

sayHi('B'); // TypeError: sayHi is not a function
const sayHi = function (name) {
  return `Hi, ${name}`;
};

함수 선언은 함수 자체 가 스코프 최상단으로 끌어올려진다. 표현식은 const/let/var 가 호이스팅되는 규칙을 따른다.

this 동적 바인딩

일반 함수의 가장 큰 특징. 호출 방식에 따라 this 가 결정된다.

호출 방식	this
일반 호출 fn()	undefined (strict) 또는 전역 객체
메서드 호출 obj.fn()	obj
fn.call(ctx), fn.apply(ctx)	ctx
fn.bind(ctx)()	ctx
new fn()	새 인스턴스
DOM 이벤트 리스너	이벤트 타겟 (보통)

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name); // 'Alice'
  },
};

const fn = obj.greet;
fn(); // undefined, this 가 obj 가 아니다

이 “this 가 호출 시 결정” 특성이 arrow function 과 가장 큰 차이.

arguments 객체

일반 함수 안에는 arguments 라는 유사 배열 객체가 자동으로 존재.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(1, 2, 3); // 6

모던 코드에서는 ...rest 매개변수를 권장. arguments 는 배열이 아니라 유사 배열이라 .map 등이 안 통한다.

new 호출

생성자로 사용 가능. this 는 새 인스턴스를 가리킨다.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const p = new Person('Alice');
p.greet(); // 'Hello, Alice'

ES2015 class 문법이 이를 깔끔하게 대체. 그래도 내부적으로는 같은 메커니즘.

프로토타입 체인

일반 함수는 prototype 속성을 가진다 (생성자로 쓰일 수 있어서).

function Animal() {}
Animal.prototype.eat = function () { /* ... */ };

const dog = new Animal();
dog.eat(); // 프로토타입 체인을 따라 찾음

arrow function 은 prototype 이 없어 new 호출 불가.

일반 함수 vs 화살표 함수 비교

특성	function	() => {}
this	호출 시 결정 (동적)	정의 시 결정 (lexical)
arguments	✓	✗ (rest 사용)
new 호출	✓ (생성자 가능)	✗ (TypeError)
prototype	✓	✗
호이스팅 (선언문)	✓	✗ (표현식만 가능)
짧은 문법	△	✓
메서드로 적합	✓	△ (this 가 lexical 이라서)

자세한 화살표 함수 동작은 arrow function 참고.

언제 일반 함수를 쓰는가

• 객체의 메서드, this 가 객체를 가리켜야 함
• 생성자, new 와 함께
• prototype 메서드, 클래스 메서드
• 재귀 함수 (이름 있는 표현식 또는 선언문)

참고

• arrow function
• 일급 함수
• 고차 함수
• 클로저
• Lexical Environment