함수 표현식

1. 함수 선언

주요 코드 흐름 중간에 독립적인 구문 형태로 존재한다.

1. 실제 실행 흐름이 해당 함수에 도달했을 때 함수 실행이 가능하다.

2. 함수 선언은 정의되기 전에도 호출이 가능하다.(호이스팅 가능)

	functionDeclaration();	// 호이스팅
    function functionDeclaration() {
      console.log('함수 선언(Fuction Declaration)');
    };
    console.log(functionDeclaration);  // 함수의 코드가 보이게 된다.

    // 코드블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근이 가능하지만 
	// 밖에서는 접근하지 못한다.

    const age = 16;
    if (age < 18) {
      welcome();

      function welcome() {
        console.log('안뇽');
      }

      welcome();
    } else {
      function welcome() {
        console.log('안녕하세욤');
      }
    }

     welcome();  // 중괄호 안에서 호출한 함수는 중괄호 안에서만 호출이 가능하다.
				 // error 발생!


    // 이를 호출해 주려면 함수 표현식을 사용하여 변수에 함수를 담아주면 된다.

    const age2 = 16;
    let welcome;
    if (age2 < 18) {

       welcome = function() {
        console.log('안뇽');
      }

    } else {
      welcome = function() {
        console.log('안녕하세욤');
      }
    }

    welcome();	//	호출 가능!

2. 함수 표현식

표현식이나 구문 구성 내부에 생성, "=" 같은 할당 표현식을 사용한다.
함수 선언 전에는 접근이 불가능하다(호이스팅 불가).

    const functionExpression = function() {
      console.log('함수 표현(Function Expression)');
    };
    functionExpression();

3. 함수 복사

함수를 변수에 할당하여 복사를 하는 방식이다.

   function functionCopy() { // 1. 함수 생성
     console.log('함수 복사(functionCopy)');
   }

   const copy = functionCopy;  // 2. 함수 복사

   copy();         // 3. 복사한 함수 실행 : 함수 복사(functionCopy)
   functionCopy(); // 본래 함수 실행 : 함수 복사(functionCopy)

4. callback

함수를 함수의 인자로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출(callback)하는 것이다.

아래의 예시에서는 ask함수를 실행 시켰다.

이후 ask에 있는 인자 '동의 하십니까?', ok, no를 매개변수(parameter)에 넣어 함수 안의 코드를 동작시킨것이다.

    function ask(question, yes, no){
      if (confirm(question)) yes();
      else no();
    }

    function ok() {
      console.log('동의했습니다.')
    }

    function no() {
      console.log('취소를 눌렀습니다.')
    }

    ask('동의 하십니까?', ok, no);


    // 위의 코드를 간략화 시키기
    function ask(question, yes, no){
      if (confirm(question)) yes();
      else no();
    }

    ask('동의 하십니까?', 
        function() {console.log('동의했습니다.')},
        function() {console.log('취소를 눌렀습니다.')}
      );

5. 화살표 함수

함수 표현식보다 단순하고 간결하게 만드는 방법이다.

아래 코드는 기존 표현 방식과 화살표 표현 방식을 비교한 코드이다.

    // 기존 표현 방식
    let func = function(arg1, arg2, ...argN){
      return expression;
    }
    // 화살표 함수 표현 방식
    func = (arg1, arg2, ...argN) => expression;

구체적인 예시를 통하여 화살표 함수의 사용법을 자세히 알아보자.

    // 구체적 예시
    let sum = (a, b) => a + b;

    sum = function(a, b) {
      return a + b;
    }
    console.log(sum(1,2)) // 3

1. 인수가 하나인 경우

인수를 감싸는 괄호는 생략이 가능하다.

    let double = n => n * 2;
    console.log(double(3));  // 6

2. 인수가 하나도 없는 경우

괄호를 비워놓고 작성하면 된다. 괄호는 생략이 불가능 하다.

    //
    let sayHi = () => console.log('안녕하세용');
    sayHi();

3. 본문이 여러줄인 화살표 함수

중괄호를 사용해주면 되며 중괄호 사용 시 본문이 여러 줄로 구성되어 있음을 알려준다.
또한 중괄호 사용 시 return 지시자로 결과 값을 반환해 줘야 한다!

    let sum = (a,b) => { // 중괄호 사용 시 본문이 여러 줄로 구성되어 있음을 암시
      let result = a + b;
      return result;  //  중괄호 사용 시 reutn지시자로 결과값을 반환해 줘야 한다.
    }
    alert(sum(1,2))  // 3