7. Function (함수)

함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문을 그룹화 한 개념. 

다른 부분에서도 동일한 작업을 반복적으로 수행해야 한다면 미리 작성된 함수를 재 사용 할 수 있음.

일반적인 기능은 특정 작업을 하는 구문들의 집합을 정의, 필요시 호출, 필요한 결과 값 또는 수행 결과를 얻는 것이나, 

객체 생성, 행위 지정, 정보의 구성 및 은닉, 클로저, 모듈화 등의 기능도 수행할 수 있음.

함수도 객체이며, 다른 객체와 구분될 수 있는 특징은 호출할 수 있음, 다른 값들처럼 사용 가능함으로, 

변수나 객체, 배열 등에 저장 가능하며, 다른 함수에 전달되는 인수로도 사용, 또한 다른 함수의 반환 값으로 사용 가능하여 일급 객체라고 표현함.

함수 정의

함수를 정의하는 방식 

- 함수 선언식 (Function declaration)

- 함수 표현식 (Function expression)

- Function() 생성자 함수

함수 선언식 (Function declaration)

함수 선언식을 사용한 함수 정의는 function 키워드.

함수명 : 함수 선언 식의 경우 함수명에 생략이 불가능, 함수명은 함수를 호출히거나, 함수에서 자기 자신을 호출하는 식별자의 역활.

매개변수 : 소괄호() 로 감싼 목록으로 1개 이상의 경우 콤마(,)로 분리, 다른 언어와의 차이는 매개변수의 자료형을 기술하지 않음.

함수 몸체 : 실제 함수가 호출 될 경우 실행되는 구문들의 내용으로 중괄호{} 로 구문을 감싸고 return 문으로 결과 값을 반환할 수 있음.

function names(param) {
    return;
}

함수 표현식 (Function expression)

함수의 일급 객체의 특성을 이용하여, 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데, 이러한 방식을 함수 표현식(Function expression) 이라 함.

var func1 = function (param) {
    return;
};

함수 표현식으로 정의한 함수는 함수명을 생략할 수 있음. 이러한 함수를 익명 함수 (anonymous function)이라 함. 

// 익명 함수 
var func1 = function (param) {
    return param;
};

// 기명 함수
var func2 = function sum(a, b){
    return a + b;   
};

Function() 생성자 함수

함수 표현식으로 함수를 정의할 때 함수 리터럴 방식을 사용. 함수 선언식도 내부적으로 자바스크립트 엔진이 기명 함수 표현식으로 반환함으로 결국 함수 리터럴 방식을 사용.

따라서 함수 선언식과 함수 표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데, 이것은 결국 Function() 생성자 함수로 생성하는 것을 축약화 시킨 것.

일반적으로 사용하지 않음.

var sumNum = new Function('a', 'b','return a+b');

console.log(sumNum(1,2));

함수 호이스팅 (Function Hoisting)

함수 선언식의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데, 이것을 함수 호이스팅(Hoisting) 이라고 함.

호이스팅이란 var 선언문이나,  function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말함. 

즉, 자바스크립트의 모든 선언문(var, let, const, function, function*, class) 이 선언되기 이전에 참조가 가능.

var sumResult = sum(1,2); // TypeError: sum is not a function

var sum = function(num1, num2) {
    return num1 + num2;
};

함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생 됨. 

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행 됨. 호이스팅 된 변수는 undefined로 초기화 되고, 실제 할당은 할당문에서 이루어짐.

일급 객체 (First-class Object)

일급 객체란 생성, 대입, 연산, 인자 또는 반환 값으로의 전달 등 기본적 조작을 제한없이 사용할 수 있는 대상을 의미

1. 무명의 리터럴로 표현이 가능함.

2. 변수나 자료 구조에 저장 가능. 

3. 함수의 파라미터로 설정 가능.

4. 반환 값으로 사용이 가능.

// 변수나 Object에 함수를 할당 할 수 있음.
var increase = function(num){
    return num + 1;
};

var decrease = function(num){
  return num - 1;
};

var obj = {
  increase : increase,
  decrease : decrease
};


// 함수를 파라미터나, 반환 값으로 설정 가능 함.
function calc(func, num){
    return func(num);
};

console.log(calc(increase,1));
console.log(calc(decrease,1));

매게 변수 (Parameter, 인자)

함수에 추가적으로 전달되어야 할 값을 매게 변수라고 함. 

매개변수는 함수 내에서 변수와 동일하게 동작. 

매개변수는 함수 내에서 변수와 동일하게, 메모리 공간을 확보하며 함수에 전달. 

만약 매개 변수 만큼의 인수를 전달하지 않는다면  undefined로 초기화 됨.

var sum = function(num1, num2){
    console.log(num1, num2, num1+num2); //1, undefined, NaN
};

반환 값 (return value)

함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)함.

배열 등의 여러 개의 값을 반환 가능, 반환을 생략할 경우 암묵적으로 undefined를 반환.

function sum(a, b){
  return a+b;
}
console.log(sum(4,5)); // 9를 반환


function sum(a, b) {
  return [a+b, a, b]; //[9,4,5] 배열 반환
}
console.log(sum(4,5));

함수 객체의 프로퍼티

함수는 객체임으로 프로퍼티를 가질수 있음. 

다만, 일반 객체와는 다른 함수만의 표준 프로퍼티를 가짐.

arguments 프로퍼티

arguments 객체는 함수 호출 시, 전달된 인수(argument)들의 정보를 담고 있는 순회가능(iterable) 유사 배열 객체(array-like object) 이며,

함수 내부에서 지역변수처럼 사용 됨.

function sum(a, b){
    console.log(arguments) //Arguments(3) [1, 2, 3, ....
};
sum(1,2,3);

유사 배열 객체는 배열이 아니므로, 배열 메소드를 사용하는 경우 에러가 발생하게 됨. 

caller 프로퍼티

caller 프로퍼티는 자기 자신을 호출한 함수를 의미.

minus 함수의 caller는 sum() 함수.

function sum(a, b){
    minus();
    return a+b;  // 5
};

function minus(a, b){
  console.log(minus.caller, 'caller'); // ƒ sum(a, b){ minus(a,b); return a+b; "caller"
}
sum(3,2);

__proto__ 프로퍼티

ECMAScript 에서는 모든 객체는 프로토타입을 가리키는 [[prototype]] 이라는 숨겨진 프로퍼티를 가짐.

크롬, 파이어폴스 등에서는 숨겨진 [[prototype]] 프로퍼티가 __proto__로 되어 있음. 즉, __proto__와 [[prototype]]은 같은 개념.

sum() 함수 역시 객체이므로, [[prototype]] 프로퍼티 (__proto__) 를 가지며, 이를 통해 자신의 부모 역활을 하는 프로토 타입 객체를 가르킴.

함수의 프로토타입 객체는 Function.prototype이며 이것 역시 함수.

prototype 프로퍼티

함수 객체만이 가지고 있는 프로퍼티로 자바스크립트 객체 지향의 근간.

주의해야할 것은 함수 객체만이 가지고 있는 prototype 프로퍼티는 프로토 타입 객체를 가르키는 [[prototype]] 프로퍼티 (__proto__) 와 다름.

• [[prototype]] 프로퍼티
• 모든 객체가 가고 있는 프로퍼티
• 객체의 입장에서 자신의 부모 역활을 하는 프로토타입 객체를 가르키며, 함수 객체의 경우 Function.prototype
  
  
• prototype 프로퍼티
• 함수 객체만 갖고 있는 프로퍼티.
• 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역활을 하는 객체를 가르킴.
• 함수가 생성될 때 만들어지며, constructor 프로퍼티를 가지는 객체를 가르킴.

함수의 형태

즉시 호출 함수 표현식 (IIFE)

함수의 정의와 동시에 실행되는 함수로 최초 한번만 호출 되며, 다시 호출할 수 없음.

이러한 특징을 이용하여 최초 한번만 실행이 필요한 초기화 처리 등에 사용.

// 기명 즉시실행함수
(function abc() {
    console.log('abc')
}());

// 익명 즉시실행함수
(function () {
    console.log('abc');
}());

내부 함수 (Inner Function)

내부 함수는 부모 함수의 변수에 접근할 수 있음.

하지만 부모 함수는 자식 함수(내부함수)의 변수에 접근 불가.

function sum(a, b){
    const c = a + b;
    function print(){ // Inner Function 
        console.log(`print ${c}`)
    }
    print();
}

sum(1,2);

콜백 함수 (Callback Function)

콜백 함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수를 말함.

setTimeout() 콜백 함수를 보면, 두 번째 매개변수에 전달된 시간이 경과되면 첫번째 매개변수에 전달된 콜백 함수가 호출 됨.

setTimeout(function(){
    console.log('10초 후 출력');
}, 10000);

콜백 함수는 주로 비동기식 처리 모델(Asynchronous processing model)에 사용 됨. 

처리가 종료되면 호출 될 함수(콜백 함수)를 미리 매개변수에 전달하고, 처리가 종료하면 콜백함수를 호출하는 것.

콜백함수는 콜백 큐에 들어가 있다가 해당 이벤트가 발생되면 호출 됨. 

참고 : https://poiemaweb.com/