21/09/12 TL. 자바스크립트 - 함수(1)

🍉 함수란?

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

🍉 함수 리터럴

js의 함수는 객체 타입의 값이다. 따라서 함수 리터럴로 생성할 수 있다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

• 함수가 객체라는 사실은 다른 언어와 구별되는 js의 특징이다.

🍉 함수 정의

함수 정의하는 방법은 4가지가 있다.

• 함수 선언문
• 함수 표현식
• Function 생성자 함수
• 화살표 함수

모든 함수 정의 방식은 함수를 정의한다는 공통점이 있지만 중요한 차이가 있다.

• 변수는 선언한다고 하고 함수는 정의한다고 표현한다. 한수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.

🥥 함수 선언문

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

// 함수 참조
// console.dir은 함수 객체의 프로퍼티까지 출력한다.
// Node.js 환경에서는 console.log와 같은 결과가 출력된다.
console.dir(add); // f add(x, y)

// 함수 호출
console.log(add(2, 5));

함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다. 함수 선언문은 표현식이 아닌 문이다. 따라서 변수에 할당할 수 없다. 그렇다면 다음과 같은 코드는 어떻게 가능한 것일까?

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

console.log(add(2, 5));

이는 js 엔진이 코드의 문맥에 따라 동일한 함수 리터럴을 표현식이 아닌 문법 선언문으로 해석하는 경우와 표현식인 문인 함수 리터럴 표현식으로 해석하는 경우가 있기 때문이다.

{}이 단독으로 존재하면 js엔진은 {}를 블록문으로 해석한다. 만약 평가 대상(피연산자)라면 객체 리터럴로 해석한다.

// 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석된다.
// 함수 선언문에서는 함수 이름을 생략할 수 없다.
function foo() { console.log('foo'); }
foo(); // foo

// 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아니라 함수 리터럴 표현식으로 해석된다.
// 함수 리터럴에서는 함수 이름을 생략할 수 있다.
(function bar() { console.log('bar'); })
bar(); // ReferenceError : bar is not defined

함수 이름은 함수 바디 내에서만 참조할 수 있는 식별자다. 따라서 bar의 경우 외부에서 호출할 식별자가 없기 때문에 실행할 수 없다. 그렇다면 원래는 foo도 호출할 수 없어야 한다. 그 이유는 foo라는 이름으로 식별자를 선언한 적도 없고 할당한 적도 없다. 그렇지만 js 엔진은 암묵적으로 foo라는 식별자를 암묵적으로 생성한다.

js 엔진은 함수 선언문을 해석해 함수 객체를 생성한다. 이 때 식별자가 없기 때문에 생성된 함수 객체를 참조할 수 없으므로 함수 이름과 동일한 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

함수는 함수 이름을 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다.

위에 var add에도js엔진이 암묵적으로 생성한 식별자 add가 담기기 때문에 할당할 수 있는 것이다.

🥥 함수 표현식

일급 객체 : 값의 성질을 갖는 객체를 말한다.

• js의 함수가 일급 객체이다. 즉, 함수를 값처럼 자유롭게 사용할 수 있다.

함수 표현식 : 함수가 일급 객체라는 점을 이용해 함수 리터럴로 생성한 객체를 변수에 할당하는 정의 방식을 말한다.

• 함수 표현식은 익명 함수로 생성하는 것이 일반적이다.

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

// 함수 객체를 가리키는 식별자로 호출한다.
console.log(add(2, 5)); // 7

// 함수 이름은 함수 몸체 내부에서만 유효한 식별자이기 때문에 에러를 발생한다.
console.log(foo(2, 5)); // ReferenceError: foo is not defined

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

→ 선언문 자체는 선언이기 때문에 평가되지 않아 표현식이 아닌 문이고, 일급 객체이기 때문에 값으로 사용할 수 있어 함수 표현식에는 값으로 사용해서 표현식인 문이 되는 것 같다.

🥥 함수 생성 시점과 함수 호이스팅

console.dir(add); // f add(x, y)
console.dir(sub); // undefined

console.log(add(2, 5)); // 7
console.log(add(2, 5)); // TypeError: sub is not a function

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

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

var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다. 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가된다. 따라서 함수 표현식도 해당 코드를 실행될 때 평가되어 함수 객체가 된다. 따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생하는 것이다

• 함수 호이스팅은 함수를 호출하기 전에 선언한다는 규칙을 무시하기 때문에 함수 선언문 대신 함수 표현식을 사용할 것을 권장한다.

🥥 Function 생성자 함수

빌트인 함수인 Futioon 생성자 함수로 함수를 생성하는 방식은 일반적이지도 않고 바람직하지도 않다. 클로저를 생성하지도 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

console.dir(add); // f add(x, y)
console.dir(sub); // undefined

console.log(add(2, 5)); // 7
console.log(add(2, 5)); // TypeError: sub is not a function

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

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

🥥 화살표 함수

화살표 함수는 기존의 함수보다 표현에 더불어 내부 동작 또한 간략화되어 있다. 기존 함수와 다른 점들은 다음과 같다.

• 생성자 함수로 사용할 수 없다.
• this 바인딩 방식이 다르다
• prototype 프로퍼티가 없다.
• arguments 객체를 생성하지 않는다.

 

참고 : 모던 자바스크립트 Deep Dive

https://wikibook.co.kr/mjs/