Function

4-1. Function Definition

1) function declaration

• 함수 선언문
• 함수 선언문에서는 함수의 이름을 생략할 수 없다.

function hello(name){
    return `${name}님 안녕하세요.`
}

2) function expression(함수 표현식)

• 자바스크립트의 함수는 객체 타입의 값으로 값의 성질을 갖는 일급 객체이다.
• 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다.
• 함수 표현식에서는 함수명을 생략할 수 있지만, 생략하지 않아도 문제는 없다.
  • 단, 함수명을 생략하지 않은 경우 함수 호출은 식별자로 이루어지기 때문에 함수명으로는 호출 할 수 없다.

var hello = function(name){
    return `${name}님 안녕하세요`
}

3) function hoisting(함수 호이스팅)

• 함수 선언문은 런타임 이전 자바스크립트 엔진에 의해 먼저 실행된다.
  따라서 함수 선언문 이전에 함수를 참조할 수 있고 호출할 수 있다.
  함수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 것을 "함수 호이스팅"이라고 한다.
• 변수 할당문의 값은 할당문이 실행 되는 시점, 즉 런타임에 평가되므로 함수 표현식의 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
  함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조하고 호출해야 한다.

console.log(hello('홍길동'));
console.log(hi('홍길동'));      // TypeError : hi is not a function(hi는 아직 정의되지 않았다는 뜻)

// 함수 선언문
function hello(name){
    return `${name}님 안녕하세요`;
}

//함수 표현식
var hi = function(name){
    return `${name} 안녕!`;
}

4-2. Function Call

1) parameter and argument(매개변수와 인수)

• 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 된다.
  • 가변인자 함수 구현 시 유용하게 사용 된다.

function hello(name){
  
    console.log(arguments);

    return `${name}님 안녕하세요.`;
}

• 매개변수는 함수 몸체 외부에서 참조할 수 없다.
• 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다.
  • 인수가 부족해서 할당되지 않은 매개변수의 값은 undefined이다.

  result = hello();
  console.log(result);

• 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시한다.

result = hello('유관순', '김미미');
console.log(result);

• 인수를 전달하지 않거나 undefined를 전달하면 매개변수 기본 값이 동작한다.(ES6 추가 문법)

function hi(name = '아무개'){
    return `${name}님 안녕`;
}

2) return

• 반환문 이후의 코드는 실행되지 않고 무시된다.
• return; //반환값을 명사적으로 지정하지 않으면 undefined 반환
• 반환값이 없을 시 반환문 생략이 가능하며 이 때도 암묵적으로 undefined 반환

4-3. Arrow Function

1) arrow function

• function 키워드 대신 화살표를 사용해 보다 간략하게 함수를 선언하는 방법
• 화살표 함수는 항상 익명 함수로 정의하며 본문이 한 줄인 함수를 작성할 때 유용

// function 키워드 생략
message = () => {
    return 'Arrow Function';
}

• 명령문이 하나만 있을 경우 중괄호 생략 가능
• 함수 몸체 내부의 문이 값으로 평가될 수 있는 표현식인 문이라면 암묵적으로 반환(return 생략 가능)

message = () => 'Arrow Functions are simple';

• 매개변수가 있을 경우
  • 매개변수가 없거나 여러개일 경우 소괄호 생략 불가

message = (val1, val2) => 'Arrow ' + val1 + val2;

• 매개변수가 하나이면 소괄호 생략

message = val1 => 'Arrow ' + val1;

4-4. Various Types Of Functions

1) immediately invoked function expression(즉시 실행 함수)

• 함수 정의와 동시에 즉시 호출이 되는 함수로 단 한번만 호출되며 다시 호출할 수 없음
• 즉시 실행 함수는 반드시 () 그룹연산자로 감싸야 함
• 즉시 실행 함수 내애 코드를 모아 두면 혹시 있을 함수의 이름 충돌을 방지할 수 있다.
• 함수 이름이 없는 익명 함수를 사용하는 것이 일반적.

(function hello(name){
    console.log('기명 즉시 실행 함수! 함수 정의와 동시에 호출');
    console.log(`${name}님 안녕하세요.`);
})('홍길동');

2) recursive function(재귀함수)

• 함수가 자기 자신을 호출하는 것
• 재귀 호출을 수행하는 함수인 재귀 함수는 반복되는 처리를 위해 사용
• 반복되는 처리를 반복문 없이 구현할 수 있는 장점이 있지만 무한 반복에 빠질 위험이 있음
  • 스택 오버플로우 에러 발생 가능
  • 반복문보다 재귀 함수 사용이 더 직관적으로 이해하기 쉬울 경우에만 사용하는것이 바람직

// n! 구하기
function factorial(n){
    
    // n이 1 이하일 때 멈춤
    if(n <= 1) return 1;

    //재귀호출
    return n * factorial(n-1);

}

3) nested function(중첩 함수)

• 함수 내부에 정의 된 함수를 중첩 함수 또는 내부 함수라고 한다.
• 중첩 함수를 포함하는 함수는 외부 함수라고 한다.
• 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수의 역할을 한다.

function outer(){
    var outerVal = '외부함수';

    function inner(){
        var innerVal = '내부함수';
        console.log(outerVal + ", " + innerVal);    // 외부 함수의 변수를 내부 함수에서 참조할 수 있다.
    }

    inner();

}

outer();

4) callback function(콜백 함수)

• 함수의 변하지 않는 공통 로직은 미리 정의해두고 경우에 따라 변경되는 로직은 추상화해서 함수의 외부에서 내부로 전달하는 방식이다.
• 콜백 함수 비동기 처리(이벤트, 타이버, ajax)에서 활용 되는 중요한 패턴이며 배열 고차 함수에서도 사용된다.
• 콜백함수
  • 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
  • 고차 함수에 전달되어 헬퍼 함수의 역할을 함
  • 필요에 따라 콜백 함수에 인수 전달
• 고차함수
  • 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수
  • 매개변수를 통해 전달 받은 콜백 함수의 호출 시점을 결정해서 호출

// 전달 받는 값을 증가시켜주는 함수
function increase(value){
    return value + 1;
}

// 전달 받는 값을 감소시켜주는 함수
function decrease(value){
    return value - 1;
}

// 전달 받은 함수에 전달 받은 값을 적용 시켜주는 고차 함수
function apply(func, value){

    // 고차 함수는 매개변수를 통해 전달 받은 콜백 함수의 호출 시점을 결정해서 호출한다.
    // 콜백 함수는 고차 함수에 의해 호출 되며 이 떄 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
    return func(value);
}

// 고차 함수로 콜백 함수를 전달하며 호출한다.
console.log(apply(increase, 5));
console.log(apply(decrease, 5));

// 콜백 함수가 고차 함수 내부에서만 호출 된다면 콜백 함수를 익명 함수 리터럴로 정의하면서
// 바로 고차 함수에 전달하는 것이 일반적.
console.log(apply(function(value){return value + 1}, 10));
console.log(apply(value => value -1, 10));

5) purea and impure functions(순수함수와 비순수함수)

• 순수 함수

  • 외부 상태에 의존하지도 않고 변경하지도 않는 함수
  • 함수 외부 상태의 변경을 지양하는 순수 함수를 사용하는 것이 좋다.
  • 최소 하나 이상의 인수를 전달받으며 인수의 불변성을 유지

  var cnt = 0;
  function increase(n){
    return n++;
  }
  
  // 순수 함수가 반환한 결과 값을 변수에 재할당 해서 상태를 변경
  cnt = increase(cnt);
  console.log(cnt);

• 비순수 함수

  • 외부 상태에 의존하거나 외부 상태를 변경하는 함수
  • 외부상태를 변경하므로 상태 변화를 추적하기 어려워진다.

  var cnt = 0 ;
  
  // 순수 함수가 반환한 결과 값을 변수에 재할당 해서 상태를 변경
  cnt = increase(cnt);
  console.log(cnt);
  
  function decrease(){
    return --cnt;
  }

4-5. First Class Object(일급 객체)

1) 정의

• 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능

var hello = function(){
    return '안녕!';
};

• 변수나 자료구조(객체, 배열 등)에 저장 가능

var obj = { hello : hello };

• 함수의 매개변수에 전달 가능
• 함수의 반환값으로 사용 가능

function repeat(func, count){
    for(var i = 0 ; i < count ; i++){
        console.log(func());
    }

    // 4. 함수의 반환 값으로 사용할 수 있다.
    return function(){
        console.log(`${count}번 반복 완료.`)
    }
}

var returnFunc = repeat(obj.hello, 5); 
returnFunc();

• 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미
  • 객체는 '값'이므로 함수는 값과 동일하게 취급 가능
  • 변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문 등 에서 사용 가능.