js 4일차 - 함수(2)(arrow, generator, 즉시실행함수)

###########################################################
6. 함수 ( function )(*)

1> 개요
- 용도: 기능처리 담당 (자바의 메서드 역할)

2> 종류1
- 일반함수: 일반적으로 사용되는 함수 의미.
- generator 함수: Generator 객체를 반환하는 함수.
- 비동기 함수: Promise 를 객체를 반환하는 함수.

3> 함수 작성방법 2가지
가. 함수 선언식 (이름있는 함수)

  function 함수명([파라미터, ..]) {
    문장;
    [return 값;]
  }

  ==> js 실행할 때 생성됨.

나. 함수 표현식 (이름없는 함수,익명함수)

  function ([파라미터, ..]) {
    문장;
    [return 값;]
  }

  변수가 함수명으로 사용됨.

  ==> var 변수=함수 코드를 만나면 함수가 생성됨.
      따라서 선언보다 먼저 호출이 가능하다.

4> 함수특징
- 반드시 호출해야 된다. (함수명을 이용)
- 호출후 반드시 호출한 곳으로 돌아온다.
- 호출할 때 인자값을 설정할 수 있고
  돌아올때 리턴값이 존재할 수 있다.

- JS 함수는 함수호출시 인자값의 갯수가 달라도 된다. (*)

- 파라미터에 갯수 > 인자값 갯수 경우에 인자값이 저장되고 남은
  파라미터에는 undefined 가 저장되는데 undefined 대신에 임의의 초기값을 설정할 수 있다.
  ==> 함수의 default 파라미터라고 부른다.
  ==> function fun(n=초기값, n2=초기값) {}

- 파라미터 갯수 < 인자값 갯수 경우에 파라미터에 저장되고 남은 
  인자값은 소실된다. 이 경우에 소실되는 인자값을 배열로 가져올 수 있다.
  ==> 함수의 rest 파라미터라고 부른다. 
      주의할 점은 파라미터 가장 마지막에만 사용된다.

  ==> function fun(n,...n2){}
      function fun(n,n2,...n3){} 
      fun(10,20,30);

- 함수 호출시 spread 연산자 이용한 방식으로 인자값을 전달 할 수 있다.
ex>
    function fun(n,n2) {}

    var x = [10,20];
    fun(x[0], x[1]); // 기본
    fun(...x); //spread

- 기본형 데이터와 참조형 데이터 인자값 사용
- 기능에 따라 4가지 형태

가. 파라미터 없고 리턴값 없는 형태
나. 파라미터 있는 리턴값 없는 형태
다. 파라미터 없고 리턴값 있는 형태
라. 파라미터 있고 리턴값 있는 형태

- JS함수는 일급객체(first-class) 이다.
  일급객체의 핵심개념은 함수를 데이터로 처리하는 것이다.
  함수이용해서 할수 있는 작업은 다음과 같다.

    가. 함수를 변수에 저장할 수 있다.
    나. 함수호출시 인자값으로 함수를 사용할 수 있다. ==> 콜백함수를 구현 가능.
    ex>
        arr.forEach(인자값);
        personList.forEach(function(data,idx){});
    
    다. 함수호출후 리턴값으로 함수를 사용할 수 있다. ==> 중첩함수를 구현 가능.
    ex>
        var x = function(){};

        function fun() {
          // return 값;
          return x;
        }
    
    - 콜백함수(callback)
    ==> 개념: 사용자가 명시적으로 호출하지 않고 시스템이 특정상황에 호출하는
              함수를 의미한다.
    ==> 주로 이벤트 처리시 사용된다.
    ==> 구현방법

        명시적으로 호출할 때 시스템이 호출할 수 있는
        함수명을 전달하는 방법으로 구현이 가능하다.

        자바의 swing 이벤트

          Button btnOk = new Button("OK");

          // 사용자호출 - addActionListener()
          // 시스템호출 - actionPerformed()

          btnOk.addActionListener(new ActionListener() {
              public void actionPerformed(ActionEvent e) {

              }
          });


7.  arrow 함수 
- 자바의 lambda 와 비슷
- 자바에서 lambda 표현: -> 이용 (thin arrow)
- JS lambda 표현 : => 이용 (fat arrow)
- 함수선언식 및 함수표현식 모두 arrow 함수로 변경 가능.
- 종류는 기능에 따라 4가지로 나뉜다.

가. 파라미터 없고 리턴값 없는 형태
나. 파라미터 있는 리턴값 없는 형태
다. 파라미터 없고 리턴값 있는 형태
라. 파라미터 있고 리턴값 있는 형태

        // <arrow함수>
        // 가. 파라미터없고 리턴값없는 형태
        var fun = function () { console.log("가. 일반 fun"); }
        fun();

        // var fun = () => { console.log("가. arrow fun"); }
        // 축약 ↓
        var fun = () => console.log("가. arrow fun");
        fun();

        // 나. 파라미터있고 리턴값없는 형태
        var fun = function (n) { console.log("나. 일반 fun", n); }
        fun(100);

        // var fun = (n) => { console.log("나. arrow fun", n); }
        // 축약 ↓
        var fun = (n) => console.log("나. arrow fun", n);
        fun(100);

        // 다.파라미터 없고 리턴값 있는 형태
        var fun = function () { return 100 };
        var result = fun();
        console.log("다. 일반 fun", result);

        // 축약 ↓
        // var fun = () => { return 100 };
        var fun = () => 100;
        var result = fun();
        console.log("다. arrow fun", result);

        // 라.파라미터 있고 리턴값 있는 형태
        var fun = function (n, n2) { return n + n2 };
        var result = fun(10, 20);
        console.log("라. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2) => { return n + n2 };
        var fun = (n, n2) => n + n2;
        var result = fun(10, 20);
        console.log("라. arrow fun", result);

        // ----default & rest----------------------------------

        // 1. default 파라미터 사용
        var fun = function (n, n2 = 20) { return n + n2 }; // n2 -> default 로 저장
        var result = fun(10);
        console.log("1. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2=20) => { return n + n2 };
        var fun = (n, n2 = 20) => n + n2;
        var result = fun(10);
        console.log("1. arrow fun", result);

        // 2. rest 파라미터 사용
        var fun = function (n, n2 = 20, ...n3) { return [n, n2, ...n3] };
        var result = fun(10, 20, 30, 40);
        console.log("2. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2=20,...n3) => { return [n,n2,...n3] };
        var fun = (n, n2 = 20, ...n3) => [n, n2, ...n3];
        var result = fun(10, 20, 30, 40);
        console.log("2. arrow fun", result);

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수9_arrow함수</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // <arrow함수>
        // 가. 파라미터없고 리턴값없는 형태
        var fun = function () { console.log("가. 일반 fun"); }
        fun();

        // var fun = () => { console.log("가. arrow fun"); }
        // 축약 ↓
        var fun = () => console.log("가. arrow fun");
        fun();

        // 나. 파라미터있고 리턴값없는 형태
        var fun = function (n) { console.log("나. 일반 fun", n); }
        fun(100);

        // var fun = (n) => { console.log("나. arrow fun", n); }
        // 축약 ↓
        var fun = (n) => console.log("나. arrow fun", n);
        fun(100);

        // 다.파라미터 없고 리턴값 있는 형태
        var fun = function () { return 100 };
        var result = fun();
        console.log("다. 일반 fun", result);

        // 축약 ↓
        // var fun = () => { return 100 };
        var fun = () => 100;
        var result = fun();
        console.log("다. arrow fun", result);

        // 라.파라미터 있고 리턴값 있는 형태
        var fun = function (n, n2) { return n + n2 };
        var result = fun(10, 20);
        console.log("라. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2) => { return n + n2 };
        var fun = (n, n2) => n + n2;
        var result = fun(10, 20);
        console.log("라. arrow fun", result);



    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수9_arrow함수2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        // 1. default 파라미터 사용
        var fun = function (n, n2 = 20) { return n + n2 }; // n2 -> default 로 저장
        var result = fun(10);
        console.log("1. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2=20) => { return n + n2 };
        var fun = (n, n2 = 20) => n + n2;
        var result = fun(10);
        console.log("1. arrow fun", result);

        // 2. rest 파라미터 사용
        var fun = function (n, n2 = 20, ...n3) { return [n, n2, ...n3] };
        var result = fun(10, 20, 30, 40);
        console.log("2. 일반 fun", result);

        // 축약 ↓
        // var fun = (n, n2=20,...n3) => { return [n,n2,...n3] };
        var fun = (n, n2 = 20, ...n3) => [n, n2, ...n3];
        var result = fun(10, 20, 30, 40);
        console.log("2. arrow fun", result);



    </script>
</head>

<body>

</body>

</html>

 

8. generator 함수
1> 문법

    function* fun() {
        console.log("generator 1");
        yield
        console.log("generator 2");
        console.log("generator 3");
    }

 

2> 특징
- 함수를 호출하면 Generator 객체로 반환됨.
  호출시 함수코드 블럭이 실행이 안됨.
- 함수코드 블럭을 실행하기 위해서는 ``next()`` 함수를 호출해야함.
- 함수코드 블럭의 여러 실행문을 분할해서 실행할 수 있다.
  ``yield`` 키워드 이용

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수10_generator함수</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // generator 함수
        // * 로 만들고 함수를 호출하면 무조건 반환함.
        // 반환한 객체가 generator 객체이다.
        function* fun() {
            console.log("generator 1");
            yield // 사용시 분할해서 실행가능
            console.log("generator 2");
            yield
            console.log("generator 3");
        }
        var gen = fun();
        console.log(gen); // Generator 객체로 반환
        // 함수코드블럭을 실행하기 위해서는 next() 사용.
        gen.next(); // >>> 1
        gen.next(); // >>> 2
        gen.next(); // >>> 3

    </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수10_generator함수2</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        function* fun(n, n2) {
            console.log("generator 1");
            yield n + n2
            console.log("generator 2");
            yield "홍길동"
            console.log("generator 3");
        }
        var gen = fun(10, 20);
        // {value: 30, done: false}, false 값의 의미는 yield 사용되었음을 의미.
        console.log(gen.next());
        // {value: '홍길동', done: false}, false 값의 의미는 yield 사용되었음을 의미.
        console.log(gen.next());
        // {value: undefined, done: true}, true 값의 의미는 yield 사용되지 않았음을 의미.
        console.log(gen.next());

    </script>
</head>

<body>

</body>

</html>

 

- 함수실행 중단
가. 일반함수
function fun() {
    console.log("1");
    console.log("2");
    if(true) return;
    console.log("3");
}

fun();


나. generator 함수
function* fun() {
    console.log("1");
    yield
    console.log("2");
    yield
    console.log("3");
}

var gen = fun();
gen.next(); // 1
gen.next(); // 2
gen.next(); // 3

// 중단방법 ↓

function* fun() {
    console.log("1");
    yield
    console.log("2");
    yield
    console.log("3");
}

var gen = fun();
gen.next(); // 1
gen.return();
gen.next(); // undefined

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수10_generator함수3_중단</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>

        function* fun(n, n2) {
            console.log("generator 1");
            yield n + n2
            console.log("generator 2");
            yield "홍길동"
            console.log("generator 3");
        }
        var gen = fun(10, 20);
        console.log(gen.next()); // {value: 30, done: false}
        // 중단방법 ↓
        gen.return();
        console.log(gen.next()); // {value: undefined, done: true}

    </script>
</head>

<body>

</body>

</html>

3> 용도
- 많은 데이터를 이용해서 처리를 해야되는 작업을 분할해서
  작업이 가능하다.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수10_generator함수4_활용</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // generator 함수 활용
        function* fun(s) {

            yield s.substring(0, 5);
            yield s.substring(5, 10);
        }
        var gen = fun("HelloWorld");
        console.log(gen.next().value); // Hello
        console.log(gen.next().value); // World
    </script>
</head>

<body>

</body>

</html>

 

 

9. 즉시실행함수(즉시호출함수)
==> 함수를 정의하면서 실행됨.
- 문법:

    (function() {
        console.log();
    })();

- JS 라이브러리를 만드는 곳에서 주로 사용됨.
  예> jQuery

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js09_함수11_즉시실행함수</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 즉시호출함수(즉시실행함수)
        // - 자바로는 static 블럭역할.
        (function () {
            // 함수를 호출하면서 즉시실행함.
            console.log("즉시호출함수");
        })();
    </script>
</head>

<body>

</body>

</html>