4.1 함수 정의

vencott·2021년 6월 2일

자바스크립트에서 가장 중요한 개념은 '함수'다

자바스크립트에서 함수를 정의하는 3가지 방법

  1. 함수 선언문
  2. 함수 표현식
  3. Function() 생성자 함수

4.1.1 함수 리터럴

함수도 일반 객체처럼 값으로 취급된다

실제로 함수 선언문이나 함수 표현식 방법 모두 함수 리터럴 방식으로 함수를 생성한다

function add(x, y) {
    return x + y;
}

4.1.2 함수 선언문 방식으로 함수 생성하기

함수 리터럴 방식과 같다

반드시 함수명이 정의되어 있어야 한다

세미콜론을 사용하지 않는다

function add(x, y) {
    return x + y;
}

print(add(1, 3));

4.1.3 함수 표현식 방식으로 함수 생성하기

함수도 값이다 --> 변수에 할당 가능, 일급 객체

함수 리터럴로 함수를 생성하고, 이를 변수에 할당하는 것을 함수 표현식이라고 한다

함수를 호출할 때는 변수명() 의 방식으로 호출한다

함수 표현식에서는 함수 이름이 선택 사항이며, 보통 사용하지 않는다

세미콜론을 사용한다

var add = function(x, y) {
    return x + y;
};

var plus = add; // 같은 함수를 참조하는 함수 변수 plus에 add가 가리키는 함수 할당

print(add(1, 3));
print(plus(2, 4));

add와 plus가 참조하는 함수에는 이름이 없다 --> 익명함수

이를 익명함수를 이용한 함수 표현식 방법(익명 함수 표현식)이라 한다

기명함수

함수에 이름이 있는 기명함수는 함수의 이름을 통해서 외부 코드에서 접근하는 것이 불가능하다

기명함수는 함수 내부에서 재귀적으로 자기 자신을 다시 호출하거나 디버거에서 사용된다

var add = function sum(x, y) {
    return x + y;
};

print(add(1, 3));
print(sum(2, 4)); // error!

var factorialVar = function factorial(n) {
  if (n < 1)
      return 1;

  return n * factorial(n-1);
};

print(factorialVar(3));
print(factorial(3)); // error!

함수 선언문의 변경

함수 선언문 방식에서 함수 이름으로 함수를 호출하는 것 같지만, 실제로는 동일한 이름으로 생성된 함수 변수를 이용해 실행되는것이다

함수 선언문은 내부적으로 함수 표현식으로 바뀐다

function add(x, y) {
    return x + y;
}

는 자바스크립트 엔진에 의해

var add = function add(x, y) {
    return x + y;
}

로 변경되어 실행된다

세미콜론

function statement(함수 선언문)와 function expression(함수 표현식)에서의 세미콜론

함수 선언문에선 세미콜론 생략, 함수 표현식에선 세미콜린을 붙이는 것이 관습이다

4.1.4 Function() 생성자 함수를 통한 함수 생성하기

함수도 Function()이라는 기본 내장 생성자 함수로부터 생성된 객체이다

앞서 본 함수 선언문이나 표현식의 리터럴한 방법도 결국 내부적으론 생성자 함수를 통해 생성되는 것이다

var a = new Function('x', 'y', 'return x + y;');
print(a(1, 2));

4.1.5 함수 호이스팅

함수 선언문 방식을 사용할 경우, 함수가 선언되기 전에 함수를 사용해도 사용이 가능해진다

print(add(5, 3));

function add(x, y) {
    return x + y;
}

print(add(1, 2));

하지만 함수 표현식을 사용하면 함수가 생성되기 전에는 함수를 사용할 수 없다

print(add(5, 3)); //  error!

var add = function(x, y) {
    return x + y;
};

print(add(1, 2));

함수가 선언되기 전에 사용이 가능하게 되면 코드의 구조가 엉성해질 가능성이 있다

그러므로 함수 표현식 방법을 권장한다


출처: 송형주, 고현준 저, 『인사이드 자바스크립트』, 한빛미디어(2014)

profile
Backend Developer

0개의 댓글