자바스크립트 함수 정의

함수

자바스크립트에서 가장 중요한 개념 1순위는 함수!

함수를 생성하는 방법 3가지

1. 함수 선언문(function statement)

2. 함수 표현식(function expression)

3. Function() 생성자 함수

 

함수 리터럴

자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다.

때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼, 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다.

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

// 함수 리터럴을 통한 add() 함수 정의
function add(x, y) {
  return x + y;
}

함수 리터럴을 구성하는 네 가지

1. function 키워드 : 자바스크립트 함수 리터럴은 function 키워드로 시작한다.

2. 함수명 : 함수명은 함수 몸체의 내부 코드에서 자신을 재귀적으로 호출하거나 또는 자바스크립트 디버거가 해당 함수를 구분하는 식별자로 사용된다. 여기서 주목할 점은 함수명은 선택 사항이며, 자바스크립트에서 함수명이 없는 함수는 익명 함수라고 한다.

3. 매개변수 리스트 :  매개변수는 기존 언어의 함수 매개변수 형태와 거의 비슷하지만, 매개변수 타입을 기술하지 않는다.

4. 함수 몸체 : 실제 함수가 호출됐을 때 실행되는 코드 부분

 

함수 선언문 방식으로 함수 생성

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

console.log(add(3, 4)); // 7

함수 선언문 방식으로 정의된 함수의 경우는 반드시 함수명이 정의되어 있어야 한다.

 

함수 표현식 방식으로 함수 생성

자바스크립트에서는 함수도 하나의 값처럼 취급된다.

따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다.

이런 방식으로 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성한다.

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

var plus = add;

console.log(add(3,4)); // 7
console.log(plus(5,6)); //11

함수 선언문 방식과의 차이점은 함수 표현식 방법에서는 함수 이름이 선택 사항이며, 보통 사용하지 않는다는 것이다.

그리고, 변수에 할당하여 생성한다는 것.

함수 이름이 없는 함수 형태를 자바스크립트에서는 익명 함수, 익명 함수를 이용한 함수 표현식 방법을 익명 함수 표현식이라고 하며,

함수 이름이 포함된 함수 표현식을 기명 함수 표현식이라 한다.

// 기명 함수 표현식의 함수 호출 방법
var add = function sum(x, y) {
  return x + y;
};

console.log(add(3,4); // 7
console.log(sum(3,4); // Error

함수 표현식에서 사용된 함수 이름은 외부 코드에서 접근 불가능하다.

함수 표현식에 사용된 함수 이름은 정의된 함수 내부에서 해당 함수를 재귀적으로 호출하거나, 디버거 등에서 함수를 구분할 때 사용된다.

// 함수 표현식 방식으로 구현한 팩토리얼 함수

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

console.log(factorialVar(3)); // 6

함수 외부에서는 함수 변수 factorialVar로 함수를 호출했으며, 함수 내부에서 이뤄지는 재귀 호출은 factorial() 함수 이름으로 처리한다.

일반적으로 자바스크립트 코드를 작성할 때 함수 선언문 방식으로 선언된 함수의 경우는 함수 끝에 세미콜론(;)을 붙이지 않지만,
함수 표현식 방식의 경우는 세미콜론(;)을 붙이는 것을 권장한다.

Function() 생성자 함수를 통한 함수 생성

자바스크립트의 함수도 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체라고 볼 수 있다.

Function() 생성자 함수로 함수를 생성하는 문법

new Function (arg1, arg2, .... argN, functionBody)
arg1, arg2, ... argN - 함수의 매개변수
functionBody - 함수가 호출될 때 실행될 코드를 포함한 문자열

// Function() 생성자 함수를 이용한 add() 함수 생성

var add = new Function('x', 'y', 'return x + y');
console.log(add(3,4)); //7

일반적으로 Function() 생성자 함수를 사용한 함수 생성 방법은 자주 사용되지 않음.

 

함수 호이스팅

// 함수 선언문 방식과 함수 호이스팅

add(2, 3); // 5

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

add(3, 4); // 7

함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다.

함수 호이스팅은 함수를 사용하기 전에 반드시 선언해야 한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수 있다. 

가급적 함수 표현식 사용을 권장한다.

// 함수 표현식 방식과 함수 호이스팅

add(2, 3); // Error

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

add(3, 4); // 7

이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성과 초기화의 작업이 분리돼서 진행되기 때문이다.

 

- 본 포스팅은 "인사이드 자바스크립트" 도서를 기반으로 작성한 글입니다.