JavaScript] 함수와 프로토타입 체이닝

함수 정의

자바스크립트에서 함수를 생성하는 3가지 방법

• 함수 선언문
• 함수 표현식
• Function() 생성자 함수

1. 함수 리터럴

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

함수명은 선택사항

 

2. 함수 선언문 방식으로 함수 생성하기

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


// 자바스크립트 엔진에 의해 다음과 같은 함수 표현식 형태로 바뀐다.
var add = function add(x, y){
	return x + y;
}

반드시 함수명이 정의되어 있어야 한다

 

3. 함수 표현식 방식으로 함수 생성하기

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(5,6)); // Uncaught ReferenceError : sum is not defined 에러 발생

기명 함수 표현식

함수 이름을 이용하면 재귀적인 호출이 가능하다.

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

 

4. Function() 생성자 함수를 통한 함수 생성하기

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

 

5. 함수 호이스팅

함수 표현식을 사용해서 작성할 것을 권장

이유는 함수 호이스팅 때문이다.

// 함수 선언문 형태로 add() 함수 정의
add (2,3); // 5
 
function add(x, y){
	return x + y;
}

add (3,4); // 7

함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다.

 

// 함수 표현식 형태로 add() 함수 정의
add (2,3); // uncaught type error
 
var add = function (x, y){
	return x + y;
}

add (3,4); // 7

함수 표현식 형태로 정의되어 있을 때는 호이스팅이 일어나지 않는다.

add에서는 함수가 생성되기 전이므로, uncaught type error가 일어난다.

원인은 자바스크립트의 변수 생성과 초기화 작업이 분리되어 진행되기 때문이다.

 

함수 객체 : 함수도 객체다

1. 자바스크립트에서는 함수도 객체다

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

add.result = add(3,2);
add.status = 'OK';

함수도 객체이므로 함수 자체가 프로퍼티들을 가질 수 있다.

 

2. 자바스크립트에서 함수는 값으로 취급된다.

자바스크립트에서는 함수를 일급 객체라고 부른다.

자바스크립트 함수는 다음과 같은 동작이 가능하다.

• 리터럴에 의해 생성
• 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
• 함수의 인자로 전달 가능
• 함수의 리턴값으로 리턴 가능
• 동적으로 프로퍼티를 생성 및 할당 가능

 

2.1. 변수나 프로퍼티의 값으로 할당

// 변수에 함수 할당
var bar = function () {return 100;};
console.log(bar()); // 100

// 프로퍼티에 함수 할당
var obj = {};
obj.baz = function () {return 200;}
console.log(obj.baz()); // 200

 

2.2. 함수 인자로 전달

var foo = function(func) {
	func(); // 인자로 받은 func() 함수 호출
};

// foo 함수 실행
foo(function() {
	console.log('Function can be used as the argument.');
});

 

2.3. 리턴값으로 활용

// 함수를 리턴하는 foo() 함수 정의
var foo = function() {
	return function() {
    	console.log('this function is the return value.')
    };
};

var bar = foo();
bar(); // this function is the return value.

 

3. 함수 객체의 기본 프로퍼티