[드림코딩 by 엘리] 5. Arrow Function은 무엇인가? 함수의 선언과 표현

Function

• 프로그램을 구성하는 기본적인 building block
• subprogram이라고도 하며 여러번 사용할 수 있다.
• 한 가지의 task나 값을 계산함

1. 함수 선언

function name(param1, param2) {body... return;}

• 한 가지 함수는 한 가지 일만
• naming은 doSomething, command, verb 형태
• 함수는 JS에서 object
• parameter랑 return의 타입 안 정해짐 → TS에서는 지정

1. 매개변수(parameters)

• premitive parameters: 값으로 전달

  • 값을 복사해서 사용

    let a = 7;
    function plus(num) {
      num++;
    }
    console.log(a);
    plus(a);
    console.log(a);
    // 7
    // 7

• object parameters: 레퍼런스(참조)로 전달

    const me = {name: 'soo'};
    function changeName(obj) {
        obj.name = 'hyun';
    }
    console.log(me);
    changeName(me);
    console.log(me);
    // {name: "soo"}
    // {name: "hyun"}

1. default parameter(ES6)

    function hello(name = "soo", age = 20) {
        console.log(`${name}: ${age}`);
    }
    hello();
    // soo: 20

   • 매개변수 전달 안해도 default값이 들어감

2. Rest parameters(ES6)

    function printAll(...args) {
        for(let i = 0; i < args.length ; i++) {
            console.log(args[i]);
        }
    }
    printAll("Hello", "World", "!");
    // Hello
    // World
    // !

   • 매개변수가 배열 형태로 전달

3. Local scope

    let globalMessage = 'global'; // global variable
    function print() {
        let message = 'hello';
        console.log(message); //local variable
        console.log(globalMessage);
    }
    printMessage();
    // hello
    // global

   • 하위 블록에서는 상위 블록의 변수에 접근 가능하지만 상위 블록에서는 하위 블록의 변수에 접근 안됨

4. Return a value

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

   • return 없으면 return undefined

5. Early return, early exit

    function badVer(user) {
        if (user.grade > 10) {
            // body
        }
    }
   
    function goodVer(user) {
        if (user.grade <= 10)
            return;
        }
        // body
    }

First-class fuction

• function은 다른 변수들처럼 다룰 수 있다.
  • 변수에 할당하기
  • 매개변수로 함수에 전달하기
  • 다른 함수의 return 값으로 사용되기

1. 함수 표현

   • 함수 선언은 hoist되어서 선언부보다 위에서 사용할 수 있음

       sum(a, b);
       function sum(one, two) {
           return one + two;
       }

   • 함수 표현은 실행 이후 생성됨

       const sum = function (one, two) {
           return one + two;
       }
       sum(a, b);

   • 다른 변수에 재 할당도 가능

       const sumRe = sum;
       sumRe(c, d);

2. Callback function

    function quiz(ans, printYes, printNo) {
        if (ans == 'ok') {
            printYes();
        } else {
            printNo();
        }
    }
   
    // anonymous function
    const printYes = function() {
        console.log('yes');
    }
   
    // named function
    // debugging할 때 쓰거나 recursion에 사용
    const printNo = function() {
        console.log('no');
    }
   
    quiz('ok', printYes, printNo);
    // yes
    quiz('idk', printYes, printNo);
    // no

   • 함수의 매개변수로 함수를 전달
   • 함수 안에서 조건에 따라 매개변수로 전달된 함수 실행

3. Arrow function

    // function express
    const sample1 = function() {
        console.log("Hello");
    }
   
    // Arrow function (only return)
    const sample2 = () => console.log("World");
   
    // Arrow function (use parameter with task)
    const sample3 = (a, b) => {
        a++;
        return (a + b);
    }

   • arrow function은 anonymous function

4. IIFE: Immediately Invoked Function Expression

    (function hello() {
        console.log("Hi");
    })();
    // Hi

   • 함수 바로 실행