[자바스크립트] 딥다이브) 함수와 일급객체

1) 일급객체

  1. 무명의 리터럴로 생성할수  (=런타임에 생성가능)
  2. 변수나 자료구조(객체, 배열...)에 저장할 수 있음
  3. 함수의 매개변수에 전달가능 
  4. 함수의 반환 값으로 사용가능 

위 조건을 만족하는 객체는 "일급객체"
자바스크립트의 함수는 일급객체임 

함수의 특징 
  1. 함수를 객체와 동일하게 사용할 수 있음
  2. 객체는 값이므로 함수도 갑과 동일하게 취급 = 값을 사용할수 있는 곳이라면 어디든 리터럴로 정의가능
  3. 함수는 런타임에 객체로 평가됨
=> JS의 함수는 일반객체와 같이 매개변수 전달 가능, 함수의 반환값으로 사용가능 해서 '함수형 프로그래밍' 가능

함수와 객체의 차이 
  1. 일반객체는 호출불가, 함수는 호출가능
  2. 함수객체는 일반객체에 없는 고유의 프로퍼티를 가지고있음 

 

2) 함수객체의 프로퍼티 

=> Object.getOwnPropertyDescriptions 메서드로 함수의 프로퍼티, 프로퍼티 속성 확인가능
      ㄴ함수의 객체 데이터 프로퍼티 (=> 함수의 고유 프로퍼티) :  arguments, caller, length, name, prototype
      ㄴ __proto__는 접근자 프로퍼티로, 모든 객체 사용가능 

  - 1) arguments 프로퍼티 
ㄴarguments속성의 값은 arguments객체
ㄴarguments 객체는 함수 호출시 전달된 인수의 정보를 담고 있는 '순회 가능한 유사 배열 객체' (=> 지역변수처럼 쓰임)
ㄴES3부터 표준에서 폐지된 프로퍼티 
ㄴJS는 함수 호출시 매개변수 개수만큼 인수 전달하지 않아도 에러 안남
   (매개변수 갯수를 초과하는 인수는 arguments 객체에 저장되어 있긴 함 )
ㄴ함수 정의시 선언한 매개변수는 함수내에서 변수와 동일하게 취급됨 

function gongbu (x, y){
    console.log(arguments);
    return x * y;
    }

console.log(gongbu());    // NaN
console.log(gongbu(1));   // NaN
console.log(gongbu(1,2)); //2

console.log(gongbu(1,2,3)); //2

/* 
console.log(gongbu(1,2,3));의 상세 

	Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
	0: 1
	1: 2
	2: 3
	callee: ƒ gongbu(x, y)
	length: 3
	Symbol(Symbol.iterator): ƒ values()
	[[Prototype]]: Object
*/

ㄴarguments 객체의 Symbol프로퍼티는 arguments객체를 순회가능한 자료구조(이터러블)로 만들기 위한 프로퍼티임

function add (x, y){
    const iterator = arguments[Symbol.iterator]();
    
    //이터레이터의 next 메서드를 호출해서, 이터러블 객체 arguments 를 순회 
    console.log(iterator.next()); //{value: 1, done: false}
    console.log(iterator.next()); //{value: 2, done: false}
    console.log(iterator.next()); //{value: 3, done: false}
    console.log(iterator.next()); //{value: undefined, done: true}
    return x + y;
 }
 
 add(1,2,3);

function sum(){    //매개변수 갯수를 정하지 않음 
	let res = 0;
    
    //arguments객체는 length프로퍼티가 있는 유사 배열객체라 for문으로 순회가능 
    for (let i = 0 ; i < arguments.length ; i++){  //들어오는 매개변수 마다 res에 더해달라!
    	res += arguments[i];
        }
    return res;
  }
  
  console.log(sum());     //0
  console.log(sum(1,2));  //3
  console.log(sum(1,2,3));//6

ㄴarguments 객체는 매개변수 개수를 확정할수 없는 가변인자 함수를 구현할 때 유용

** 유사 배열 객체(array like object) :  length 프로퍼티를 가진 객체로 for문으로 순회할 수 있는 객체
ㄴ유사 배열객체는 실제 배열이 아니기 때문에, 배열 메서드 사용하면 에러남
ㄴ배열메서드 쓰려면 function.prototype.call, function.prototype.apply를 사용해 간접 호출해야함 
ㄴ간접호출 해야하는 번거로움 해결위해 ES6에서 Rest 파라미터 도입함

//간접호출한 예시 (ES6 이전)

function sum(){
	const array = Array.prototype.slice.call(arguments);
    return array.reduce(function(pre, cur){
    		return pre + cur;
            }, 0);
  }
  
console.log(sum(1,2));        //3
console.log(sum(1,2,3,4,5));  //15

//Rest 파라미터 도입한 예시(ES6 이후)

function sum (...args) {
	return args.reduce((pre, cur) => pre + cur , 0);
    }
    
console.log(sum(1,2));      //3
console.log(sum(1,2,3,4,5));//15

 

  - 2) caller 프로퍼티
ㄴECMAscript사양에 포함되지 않은 비표준 프로퍼티
ㄴcaller프로퍼티는 자신을 호출한 객체를 가리키고, 호출한 함수가 없으면 null을 가리킴 (브라우저 환경기준)

 

  - 3) length 프로퍼티
ㄴ함수를 정의할 때 선언한 매개변수의 개수 가리킴 
ㄴargument의 length프로퍼티는 인자의 개수
ㄴ함수의 length프로퍼티는 매개변수의 개수

 

  - 4) name프로퍼티 
ㄴ함수객체의 이름을 나타냄 
ㄴES6부터 표준됨 (name프로퍼티는 ES5와 ES6에서 동작을 달리함)
ㄴ(익명함수경우) ES6에서는 함수 객체를 가리키는 식별자를 값으로 / ES5에서는 빈문자열을 값으로 

 

  - 5) __proto__접근자 프로퍼티 
ㄴ모든 객체는 [[Prototype]]이라는 내부슬롯 가짐 
ㄴ[[Prototype]] 내부슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입객체를 가리킴
ㄴ__proto__프로퍼티는 [[Prototype]] 내부슬롯이 가리키는 프로토 타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티
ㄴ간접 접근만 가능 

const obj = {a: 'apple'};

console.log(obj.__proto__ === Object.prototype);//true
//객체 리터럴 방식으로 생성한 obj의 프로토 타입 객체는 Object.prototype이다.

console.log(obj.hasOwnProperty('a')); //obj의 프로퍼티 키로 a있니? true 

console.log(obj.hasOwnProperty('__proto__')); //false

//객체 리터럴 방식으로 생성한 obj는 프로포타입 객체인 Object.prototype의 프로퍼티를 상속받음
//hasOwnProperty 메서드는 Object.prototype의 메서드이다

  - 6) prototype 프로퍼티
ㄴconstructor만이 소유하는 프로퍼티 ( = 생성자 함수로 호출할수 있는 함수 객체만 소유하는 프로퍼티)
ㄴ일반 객체와 생성자 함수로 호출할수 없는 non-constructor에는 prototype프로퍼티 없음 
ㄴ함수객체는 생성자 함수로 호출가능 해서 prototype프로퍼티 있음 
ㄴ일반 객체는 prototype프로퍼티 없음 
ㄴprototype프로퍼티는 함수가 생성자 함수로 호출될 때  생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킴 

(function(){}).hasOwnProperty('prototype'); //true

({}).hasOwnProperty('prototype'); //false