자바스크립트에서의 함수, 동작 방식

프로그래밍 언어에서의 함수는 일련의 과정을 statement로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
함수 내부에는 매개변수와 반환값으로 구성되어 있다. 함수를 사용하게 되면 필요할 때 여러번 호출할 수 있어 코드의 재사용 측면에서 유리하다. 코드를 재사용하게 된다면 유지보수가 편하고, 코드의 신뢰성과 가독성 면에서 유리하다.

함수 정의 방법

자바스크립트에서 함수를 정의하는 방법은 크게 4가지가 있다.

function add(x, y) {
  return x + y;
} // 1. 함수 선언문


var add = function(x, y) {
  return x + y;
} // 2. 함수 표현식

var add = new Function('x', 'y', 'return x+y'); // 3. Function 생성자 함수

var add = (x, y) => x + y; //4. 화살표 함수(ES6)

 

모두 함수 정의 후 호출 시 add(1, 2)와 같이 호출한다.

주로 사용하는 방법은 1, 4 이다.

 

 

함수 선언 시,  자바스크립트에서 일어나는 일

function add(x, y) {
  return x + y;
} // 1. 함수 선언문

 

 

자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 해당 공간에 함수 객체를 할당한다.
따라서 add함수를 호출하면, 자바스크립트 엔진은 내부적으로 해당 식별자를 확인 후 함수 객체를 파악할 수 있다. 이는 함수 표현문과 비슷하게 동작하는 데 차이점은 아래에서 비교해볼 수 있다.

 

함수도 변수(지난 글의 변수 호이스팅 참조) 와 마찬가지로 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 함수 호이스팅이 동작한다. 따라서, 코드상에서 함수 선언 이전에 함수를 참조할 수 있다. 이 때 함수 선언문(1)이 아니라 함수 표현식(2)으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

 

var sub = function(x, y) {
  return x + y;
} // 2. 함수 표현식

 

 

 

변수 호이스팅 시에는 값을 undefined로 암묵적으로 초기화하고, 함수 호이스팅 시에는 함수 이름의 식별자를 암묵적으로 생성하고, 함수 객체를 참조하도록 한다. 함수 표현식을 사용하면 변수 호이스팅이 발생하므로, 런타임 이전에 undefined로 초기화되지만, 값은 함수 리터럴의 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 따라서 함수 표현식 선언 이전에 해당 변수를 참조하게 되면 undefined가 출력된다.

 

함수 사용 시 주의사항

ajax({
  method: 'POST',
  url: '/user',
  data: { id: 1, name: 'Lee'},
  cache: false;
})

 

매개변수의 개수가 3개를 넘어가지 않도록 하고, 넘어갈 경우에는 객체로 전달하는 것이 낫다.

 

* 모던 자바스크립트 Deep Dive 12장을 참고하여 작성한 글입니다.