Javascript Stuty
- javascript 함수
1.자바스크립트에서는 함수도 객체다.
즉 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다.
ex)
// 함수 선언 방식으로 add()함수 정의되어
function add(x, y) {
return x+y;
}
// add() 함수 객체에 result, status 프로퍼티 추가
add.result = add(3, 2);
add.status = 'OK';
2. 자바스크립트에서 함수는 값으로 취급된다.
함수 => 객체, 즉 함수도 일반 객체처럼 취급될 수 있다.
- 리터럴에 의해 생성
- 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능하다
- 함수의 인자로 전달 가능
- 함수의 리턴값으로 리턴 가능
- 동적으로 프로퍼티를 생성 및 할당 가능
이와 같은 기능이 모두 가능한 객체를 일급 객체라고 부른다. 즉 함수는 일급 객체이다.
함수가 일반 객체처럼 값으로 취급 되기 때문에 변수, 객체, 배열 등에 값으로 저장할 수 있으며, 다른 함수의 인자로 전달 하거나, 함수의 리턴값으로도 사용 가능하다.
2.1 변수나 프로퍼티의 값으로 할당.
ex)
var value = function() { return 100;};
var obj = {};
obj.test = function() { return 200;};
console.log(value); // 100
console.log(obj.test()); //200;
2.2 함수 인자로 전달.
함수는 다른 함수의 인자로도 전달이 가능하다.
2.3 리턴값으로 활용
var god = function(){
return function (){
console.log('god Damn!');
};
}
var test = god();
test(); // 결과 => god Damn!
3. 함수 객체의 기본 프로퍼티
함수도 일반 객체이며 추가적으로 함수 객체만의 표준 프로퍼티가 정의 되어있다.
ex)
function ad(x, y){
return x+y;
}
console.dir(add);
결과를 살펴보면 add()함수는 arguments, caller, length 등과 같은 다양한 프로퍼티가 기본적으로 생성된 것을 확인할 수 있다. 이러한 프로퍼티들이 함수를 생성할 때 포함되는 표준 프로퍼티다.
결과 ============================================================
▼ function add(x, y) { return x + y; }
arguments: null
caller: null
length: 2
name: "add"
▶prototype: add
▼__proto__: function Empty() {}
▶apply: function apply() { [native code] }
arguments: null
▶bind: function bind() { [native code] }
▶call: function call() { [native aode] }
caller: null
▶constructor: function Function() { [native code] }
length: 0
name: "Empty"
▶toString: function toString() { [native code] }
▶__proto__: Object
▶<function scope>
==================================================================
length, prototype 이외 name, caller, arguments, __proto__ 프로퍼티를 살펴보자.
name 프로퍼티 : 함수 명 (익명 함수의 경우 빈 문자열이 온다.)
caller 프로퍼티 : 자신을 호출한 함수.
arguments 프로퍼티 : 함수를 호출할 때 전달된 인자값
__proto__ : 모든 자바스크립트 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 내부 프로퍼티를 가진다. 그리고 크롬 브라우저에서는 [[Prototype]]이라는 내부 프로퍼티가 __proto__ 프로퍼티로 구현되어있다. 즉 둘은 같은 개념이라고 보아도 무방하다.
add()함수 또한 자바스크립트 객체이고 함수객체의 부모 역할을 하는 프로토타입 객체를 Function.prototype 객체라고 명명하고 있다.
3.1 length 프로퍼티
ECMAScript에서 정한 모든 함수가 가져야 하는 표준 프로퍼티, 함수가 정상적으로 실행될 때 기대되는 인자의 개수를 나타낸다.
function test0(){
};
console.log(test0.length); // 0
function test1(x){
return x;
};
console.log(test1.length); // 1
function test2(x, y){
return x + y;
};
console.log(test2.length); // 2
3.2 prototype 프로퍼티
모든 함수는 객체로서 prototype 프로퍼티를 가지고 있다. 다만 모든 객체의 부모를 나타내는 내부 프로퍼티인 [[Prototype]]과 혼동하지 말아야 한다.
prototype프로퍼티와 [[Prototype]] 프로퍼티
- 공통점 : 모두 프로토타입 객체를 가리킨다. 관점에서 차이가 있다. [[Prototype]]입장에서는 자신의 부모 역할을 하는 프로토타입 객체를 가리키지만, 함수 객체의 prototype 프로퍼티는 이 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다.
prototype 프로퍼티는 함수가 생성될 때 만들어지며, 단지 constructor 프로퍼티 하나만 있는 객체를 가리킨다. 그리고 prototype 프로퍼티가 가리키는 프로토타입 객체의 유일한 constructor 프로퍼티는 자신과 연결된 함수를 가리킨다.
즉, 자바스크립트에서는 함수를 생성할 때, 함수 자신과 연결된 프로토타입 객체를 동시에 생성하며, 각각 prototype과 constructor라는 프로퍼티를 서로 참조하게 된다.
function myFunction() {
return true;
}
console.dir(myFunction.prototype);
console.dir(myFunction.prototype.constructor);
▼ myFunction
▶ constructor: function myFunction() {
▶ __proto__: Object
function myFunction() {
return true;
}
myFunction.prototype 객체는 constructor와 __proto__ 라는 두 개의 프로퍼티가 있다. 또한, 프로토타입 객체 역시 자바스크립트 객체이므로 예외 없이 자신의 부모 역할을 하는 __proto__ 프로퍼티가 있다.
