함수 part 1

함수는 가장 중요한 핵심 개념이다. 앞으로 나올 스코프, 생성자 함수, 메서드, this등 이것을 모르면 이해를 못하는 것 들이 많다.

함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위를 정의 한 것이다.

함수 내부로 전달 받는 변수는 매개변수라고 하고 그 함수를 식별하는 이름을 함수 이름이라고 한다.

그 블록문 안을 함수 몸체이고 return을 해서 반환 한다.

함수는 여러 생성 방식이 있다.

첫 번째는 리터럴로 함수를 생성하거나 두 번째는 함수 선언문 세 번째는 함수 표현식 네 번째는 Function 생성자 함수 마지막 다섯 번째는 화살표 함수로 만들 수 있습니다.

리터럴로 만드는 방식은

function () {}

함수 이름은 생략 가능하고 이름이 있는 함수를 기명 함수 이름이 없는 함수를 무명/익명 함수라고 한다.

위에 저렇게 호출을 하면 함수 이름이 필요하다고 에러가 나온다.
즉 리터럴로 호출 하려면 즉시 실행을 하거나 함수 표현식으로 해야 한다.

(function () {})()

두 번째는 함수 선언문이다.

함수 선언문은 함수 이름을 생략 불가능이다.

function foo() {};

함수 선언문은 표현식이 아닌 문이다.

let bar = function bar(a, b) {
	return a+b;
}
console.log(bar(1,3)); // 4

함수 선언문은 표현식이 아닌 문이여서 변수에 할당을 못한다.
하지만 위에 코드는 변수에 할당 한 것 처럼 보인다.

이렇게 동작하는 이유는 자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수 리터럴을 표현식이 아닌 문인 함수 선언문으로 해석하는 경우와 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문이다.

함수를 생성하는 내부 동작에 차이가 있다.

// 함수 선언문에서는 함수 이름을 생략할 수 없다.
function foo() { console.log('foo'); }
foo(); // foo


// 함수 리터럴에서는 함수 이름을 생략할 수 있다.
(function bar() { console.log('bar'); });
bar(); // ReferenceError: bar is not defined

자바스크립트 엔진은 함수 선언문을 해석해서 객체를 생성한다. 이때 함수 이름은 함수 몸체 내부에서만 유효한 식별자 이므로 함수 이름과는 별도로 생성된 함수 객체를 가리키는 식별자가 필요하다. 즉 함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체를 참조할 수 없으므로 호출할 수도 없다. 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 생성된 함수 객체를 할당한다.

함수 표현식

함수는 객체 타입의 값이다. 즉 자바스크립트 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수 있고 배열의 요소가 될 수 있다.

이처럼 값의 성질을 갖는 객체를 일급 객체라고 한다.

즉 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 것이다.

함수 표현식은 아래와 같이 쓴다.

var add = function (x, y) {
  return x + y;
};
console.log(add(2,5);

함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수이다.

var add = function foo(x, y) {
  return x + y;
};
console.log(add(2,5);

위에서 함수 이름과 식별자는 햇갈리면 안된다. add는 식별자 이고 foo는 함수 이름이다. 함수 이름은 함수 몸체 내에서만 유효하다.

함수 호이스팅

함수 선언문은 함수 선언문 이전에 호출할 수 있다.
그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

코드의 실행 순서는 실행 컨텍스트와 연관이 있다.

일단 선두에 올라간 것 처럼 생각 하면 되고 앞으로 나올 실행 컨텍스트에서 다뤄볼 내용이다.

간략하게 설명하자면 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 등록한다,(함수 이름을 식별자로 암묵적으로 등록하는 것이다)

함수 선언문으로 선언한 것은 함수 호이스팅이 일어나고 함수 표현식은 변수 호이스팅이 일어난다. 즉 함수 표현식은 런타임 이전에 변수가 먼저 선언이 되고 런타임에 평가되고 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

Function 생성자 함수

자바스크립트가 기본 제공하는 빌트인 함수이다.
이건 나도 잘 않 쓰는 생성 방식이다. 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환하지만 new 없이 호출해도 겱과는 동일하다.
하지만 함수 선언문이나 함수 표현식으로 생성한 함수와 Function 생성자 함수로 생성한 함수가 동일하게 동작하지 않는 다는 것만 알아 두자.

part 2 부터는 함수 호출과 다양한 함수 형태에 대해 알아보자.

출저: https://poiemaweb.com/fastcampus/function