Front-end Developer

0%

200228 러버덕 정리

Posted on Edited on

함수란?

함수는 함수 정의와 호출, 실행의 일련의 과정을 거쳐 값을 반환하는 것으로 이 일련의 과정은 문(statement)들로 구현하고, 코드 븍록으로 감싸서 하나의 실행단위로 정의한다.

1
2
3
4
5
6
7
8
9
function 함수명 (매개변수) {
  return 반환값;
} //함수 정의(함수 몸체)
함수명(인수) //함수 호출

function add(x,y) {
  returen x + y;
}
add(2,5);
  1. 함수 정의를 통해 함수를 생성한다. 위와 같이 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 반환할 값을 지정하는 것을 말한다.
  • 함수 선언문
  • 함수 표현식
  • 생성자 함수
  • 화살표 함수
  1. 함수 객체를 가리키는 식별자(함수 이름으로 호출 x)로 호출한다.
  2. 함수 외부에서 내부로 값을 전달할 필요가 있다면, 인수(argument)는 매개변수(parameter)를 통해 전달된다.
  3. 값을 전달받으면 함수 내부에서 미리 정의된 문들을 실행하여 값을 반환한다.
  • 반환문은 함수의 실행을 중단하고, 함수 몸체를 빠져나간다.
  • return 키워드 뒤에 지정한 값을 반환한다.

함수선언문과 함수표현식

함수선언문과 함수표현식은 함수 호이스팅 vs 변수 호이스팅의 차이가 있다. 또한 생성시점이 다르기 때문에 함수선언문은 선언문 이전에 호출이 가능하고, 함수표현식은 표현식 이전에 호출이 불가능한다.

  • 함수선언문: 런타임 이전에 함수 객체가 먼저 생성되고, 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다. 따라서 선언문 이전에 함수의 참조와 호출 모두 가능하다.
1
2
3
4
5
6
console.dir(add); // ƒ add(x, y) 함수참조
console.log(add(2, 5)); // 7 함수호출

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

위와 같이 함수를 선언하면, 런타임 이전에 이미 함수 객체가 생성되어 할당까지 완료된 상태이므로, 선언문을 실행하는 런타임 이전에 값을 참조 또는 호출하여도 값이 반환된다.

  • 함수표현식: 함수표현식은 변수 호이스팅과 동일하다. 변수 선언문과 할당문의 축약표현과 동일하게 동작한다. 런타임 이전에 함수표현식은 함수 객체가 아닌 undefined로 초기화된다. 그리고 런타임 때 평가되어 함수 리터럴은 할당문이 실행되는 시점에 비로소 함수 객체가 된다.
1
2
3
4
5
6
console.dir(sub); // undefined 함수참조
console.log(sub(2, 5)); // TypeError: sub is not a function 함수호출

var sub = function (x, y) {
  return x - y;
};

위와 같이 런타임 이전에 함수를 참조하면 undefined가 반환된다. 런타임 이전에 함수표현식은 undefined라는 값으로 초기화되어 있기 때문이다. 또한 값의 할당은 런타임 때 이루어지기 때문에 표현식 이전에 함수를 호출하면 TypeError가 발생한다.