함수

[ 함수를 생성하는 방식 ]

1. 함수 선언문 ( 함수 리터럴 )

   add(2, 3); // 5
   
   function add(x, y){
   	return x + y;
   }
   
   add(3, 4); // 7
   

   : 함수 선언문으로 정의된 함수는 반드시 함수명이 있어야 한다. (기명 함수) : 함수 호이스팅이 일어난다.

2. 함수 표현식

   factorialFunc(5); // Uncaught ReferenceError: factorialFunc is not defined
   
   const factorialFunc = function factorial(n){
   	if(n <= 1){
   		return 1;
   	}
   	return n * factorial(n - 1);
   };
   
   factorialFunc(7); // 5040
   

   : 함수 표현식으로 정의된 함수는 함수명은 선택사항이다. 그러나 보통은 익명함수를 사용한다. 함수 내부에서 함수 이름으로 재귀적인 호출이 필요할 때 기명함수를 사용한다.

   : 함수 호이스팅이 일어나지 않는다.

3. Function() 생성자 함수

   const add = new Function('x', 'y', 'return x + y');
   

   : 함수 선언문이나 함수 표현식 모두 내부적으로는 Function() 생성자 함수를 통해 함수를 생성한다. (참고)

[ 함수는 일급객체다 ]

“일급객체” 의 필요조건 7가지

1. 리터럴에 의해 생성된다. ⭕️

   function func(){}
   

2. 변수, 배열의 요소, 객체의 프로퍼티 등에 할당 가능하다. ⭕️

   // 변수에 할당
   const func = function(){ return 100; };
   console.log(func());     // 100
   
   // 배열의 요소
   const arr = [func()];    // [100]
   
   // 객체의 프로퍼티에 할당
   const obj = {};
   obj.func = function(){ return 100; }
   console.log(obj.func()); // 100
   

3. 함수의 인자로 전달할 수 있다. ⭕️

   const foo = function(func){
   	func();
   }
   
   foo(function(){ console.log('Hello World') }); // Hello World
   

4. 함수의 리턴값으로 리턴할 수 있다. ⭕️

   const func = function(){
   	return function(){
   		console.log('return value : function');
   	};
   };
   
   const anotherFunc = func();
   anotherFunc(); // return value : function 
   

5. 동적으로 프로퍼티를 생성하고 할당할 수 있다. ⭕️

   

   : 함수 객체는 일반 객체와는 다르게 함수 객체만의 표준 프로퍼티가 정의되어 있다. arguments / caller / length / prototype

   • arguments : 호출된 함수에 전달된 인자값을 담은 유사배열객체. : 인자의 개수에 따라 함수의 동작을 다르게 해야하는 경우 유용하게 사용할 수 있는 객체. : 함수 호출할 때 넘겨진 인자(배열 형태) / length / callee

     

     함수 호출할 때 넘겨진 인자 (배열 형태) : [1, 2, 3] length : 호출할 때 넘겨진 인자의 개수 callee : 현재 실행중인 함수의 참조값

   • caller : 자신을 호출한 함수

     

     add 함수를 호출하지 않았음으로 null 값이 나온다.

   • length : 함수가 정상적으로 실행될 때 기대되는 인자의 개수

   

   전달되는 인자에 따라 length 프로퍼티가 결정된다.

   • prototype : [[Prototype]] 과는 엄연히 다름. : [[Prototype]] 는 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다. prototype 프로퍼티 는 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킨다. 이 객체는 constructor 프로퍼티만 포함하고 있다는 특징이 있다. : 자바스크립트 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다.

   

   함수 자체의 prototype 프로퍼티는 (본인을 참조하는)constructor 프로퍼티와 (Object.prototype을 가리키는)[[Prototype]] 프로퍼티를 가진 객체를 가리킨다.

[ 함수 호출과 this ]

: 함수가 호출되는 방식에 따라 this 에 바인딩되는 객체의 대상이 달라진다.