함수 (Function)
함수도 객체다. *
일급객체
함수는 Function 타입의 인스턴스이며, 다른 객체(참조타입)와 같이 속성과 메서드를 가진다.
함수명은 함수 객체를 가리키는 포인터일 뿐이다.
🧐 why function is first-class-citizen ???
- 변수나 배열의 요소(원소), 객체의 프로퍼티 등에 동적으로 할당 가능
- 함수의 인자로 전달 가능
- 함수의 리턴값으로 리턴 가능
- 동적으로 프로퍼티를 생성 및 할당 가능
1. 함수 생성
함수 선언문 & 함수 표현식 모두 함수 리터럴 방식으로 생성한다.
(1) 함수 리터럴
: function 키워드를 통해 함수를 생성한다.
function exam (x , y) {
return x + y;
}- (함수명은 선택) 함수명은 재귀호출 용도, 디버거가 함수를 구분하는 식별자 로 사용
- 인자를 넘겨주지 않았을 경우, 매개변수는 undefined
(2) 함수 선언문 (function statement)
: 정의된 함수는 반드시 ‘함수명’이 정의 되어야 한다. (선언은 위 리터럴 방식과 같다.)
function exFunc() {
return true;
}- *함수명은 반드시 정의되어야 함
- 선언하는 동시에 초기화 (*실행 컨텍스트)
}```javascript //자바스크립트 엔진에서는 아래와 같이 변경되어 실행 var exFunc = function exFunc(){ return true;
(3) 함수 표현식 (function expression)
: 자바스크립트에서는 함수도 하나의 값처럼 취급된다. 생성된 함수를 변수에 저장하는 방식이다.
// 가명함수 표현식
var funcVar = function sum ( x , y ) {
if( x < 0 || y < 0)
return sum( x + 1 , y + 1); //재귀호출 용도
else
return x + y;
};
let hey = funcVar; //함수의 참조값 가지므로 그대로 값 할당 가능
hey(1,2); //3
funcVar(3,4); //7
sum(1,2); //Error! Sum is not defined!!! (호출❌)-
익명함수
: 함수이름은 선택 사항으로, 이름이 없을 경우 ‘익명 함수 표현식’이라고 한다. -
가명함수
: 이름이 포함된 함수 표현식
함수 표현식에서 사용된 함수는 외부 코드에서접근 불가능하다.
해당 함수를 재귀적으로 호출할 때 사용한다.
(4) Function() 생성자 함수
arguments, 함수 내 소스 정의하여 생성합니다.
new Function (arg1, arg2, ..., argN, functionBody);
let examFunc = new Function('x','y', 'return x * y');
examFunc(3,5); //15🧐 일반함수 vs 생성자함수
| 비교 <> | 일반함수 | 생성자함수 |
|---|---|---|
| 프로토타입 | Function .prototype | 생성자함수 .prototype |
| 리턴 값 X | return undefined | return this |
2. 함수는 일급 객체이다.
자바스크립트에서는 원시타입을 제외한 모든 것을 '객체'로 정의한다.
함수도 예외는 아니다. 더구나 함수는 일급객체 이다...!
*일급객체 : 함수를 객체로 취급할 수 있다. [ 함수형 프로그래밍 가능 ]
- 변수, 배열요소, 객체 속성(프로퍼티) 등 값으로 할당 가능
let item = function (pName) { return `Hello, ${pName}`; };
let arrItem = [item];
let objItem = {
me: 'who am i',
meFunc: function() {
return 'I am jaen';
}
};
arrItem[0]('jaen'); //"Hello, jaen"
objItem.meFunc(); //"I am jaen"- 함수의 인자 로 전달 가능
let wow = function(pFunc){
if(typeOf(pFunc) === "function")
pFunc();
}
wow(function(){return true;}); //함수 인자 전달~- 함수의 리턴값 으로 전달 가능
let yeah = function(){
return function () { return 'happy js';}; //함수 리턴~
}
let really = yeah(); //함수 자체가 값으로 취급
really(); //'happy js'- 동적으로 속성 생성 및 할당 가능
: 함수도 객체이므로 일반객체처럼 프로퍼티를 가질 수 있다.
function exFunc1(){ //함수 선언문
return "gogo 2020";
}
exFunc1.isOk = true; //객체 프로퍼티 추가
let exFunc2 = function exFunc2 (){ //함수 표현식
return true;
}
exFunc2.isOk2 = false; //객체 프로퍼티 추가
console.log(exFunc1,exFunc1(),exFunc1.isOK);
//ƒ exF(a,b){return a+b;} "gogo 2020" true
console.log(exFunc2,exFunc2(),exFunc2.isOK);
//ƒ exF(){return true;} true false
3. 함수의 기본 속성(프로퍼티)
함수 역시 객체이므로 객체 기능 호출 가능 + 함수 객체만의 표준 프로퍼티
- *length : 인자 개수 -> ECMA 함수 표준
- *property -> ECMA 함수 표준
- name : 함수명
- caller : 자신을 호출한 함수
- arguments : (유사배열객체) 전달된 인자 값들
- __proto__ : 함수 객체의 부모 역할하는 객체
🧐 property vs __proto__
[공통점]
프로토타입 객체를 가리킴
[차이점]
property : 함수 객체(Function.property))에서만 가지는 속성값
proto : 모든 객체에서 가지는 자신의 부모역활을 하는 프로토타입을 가리킴 - “모든 갹채의 부모, 내부 프로퍼티"
4. 함수를 생성할 때...?
함수 생성 시 arguments, this 정보들을 함께 전달하여 생성한다.
- 참조 : Inside Javascript [한빛미디어 / 송형주, 고형준 저]
