JavaScript - function

선언 함수

1. 함수의 이름이 있다.
2. 함수 정의(함수를 만드는 것)와 함수 호출(함수를 사용하는 것)로 구분한다.

3. 함수 정의 형식

function 함수명([매개변수])
{
함수 본문
return 반환값;
}

4. 함수 호출 형식

함수명([인수]);

함수호출, 정의 예시

    // 함수 호출
    myFunc1();

    // 함수 정의 (호이스팅 대상이므로 언제나 먼저 처리된다.)
    function myFunc1(){
      console.log('myFunc1 실행');
    }

익명함수

1. 함수의 이름이 없다.
2. 호이스팅 대상이 아니다. (함수 정의를 반드시 먼저 해야 한다.)

3. 함수 정의 형식

1) 일반 익명 함수

function([매개변수]){
함수 본문
return 반환값
}

2) 화살표 익명 함수

([매개변수])=>{
함수 본문
return 반환값
}

4.함수 호출 형식

1) 함수를 변수에 저장하기

(1)일반 익명 함수

var 함수명 = function(){

} 함수명();

(2)화살표 익명 함수

var 함수명=(()=>{

})
함수명();

2)자기 호출(함수 정의와 함수 호출이 동시에 진행되는 방식)

(1)일반 익명 함수

(function(){

})();

(2)화살표 익명 함수

(()=>{

})();

3)이벤트 리스너로 등록하기

(1) 일반 익명 함수

문서객체.addEventListener('이벤트',function(){

});

(2)화살표 익명 함수

문서객체.addEventListener('이벤트'()=>{

});

1) 함수를 변수에 저장하기

var myFunc2=function(){
	console.log('myFunc2 실행')
}();

실행 결과: myFunc2 실행

2) 자기 호출

  (function(){
      console.log('자기 호출 실행');
    })();

실행결과: 자기 호출 실행

3) 이벤트 리스너로 등록하기

    document.addEventListener('dblclick', function(){
      console.log('이벤트 리스너 실행');
    });

인수와 매개변수

1. 매개변수를 선언할 때는 선언 키워드(var, let, const)를 사용하지 않는다. (매개변수는 변수명만 작성한다.)
2. 디폴트 매개변수 처리가 가능하다.
   1) 변수를 선언하고 어떤 값도 저장하지 않으면 undefined 값을 가진다.
   2) 매개변수로 인수를 전달하지 않으면 매개변수는 undefined 값을 가진다.
   3) 매개변수의 undefined 여부에 따라 매개변수의 초기화 작업을 진행할 수 있다.
   4) 매개변수에 디폴트 값을 직접 저장할 수 있다.
3. 전개 연산자(...)가 존재한다.
   1) 인수의 개수가 정해지지 않은 경우에 사용한다.
   2) 매개변수를 배열로 처리한다.
4. 인수를 저장하는 arguments 객체가 있다.
   1) 매개변수를 선언하지 않아도 모든 인수는 arguments 객체에 저장된다.
   2) arguments 객체는 배열과 유사하게 동작한다.

선언 함수 - 인수와 매개변수

    function myFunc3(a){
      console.log(a);
    }
    myFunc3(10);
    myFunc3('Hello World');
    var a = true;
    myFunc3(a);

익명 함수 - 인수와 매개변수

    var myFunc4 = (b)=>{
      console.log(b);
    }
    myFunc4(100);
    myFunc4('안녕하세요');
    var b = false;
    myFunc4(b);

    ((c)=>{
      console.log(c);
    })(1000);

디폴트 매개변수

    function myFunc5(a){
      if(a === undefined){  // a로 전달된 인수가 없으면 a = 0이다.
        a = 0;
      }
      console.log(a);
    }
    myFunc5(10);
    myFunc5();

디폴트 매개변수(ES6)

    function myFunc6(a = 0){
      console.log(a);
    }
    myFunc6(10);
    myFunc6();

전개 연산자(...)

    function myFunc7(...a){
      for(let i = 0; i < a.length; i++){
        console.log(a[i]);
      }
    }
    myFunc7(1, 2, 3, 4, 5);

arguments 객체

    function myFunc8(){
      for(let i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
      }
    }
    myFunc8(6, 7, 8, 9, 10);

반환(return)

1. 반환 타입을 작성하지 않는다.
2. return 반환값; 을 통해서 값을 반환할 수 있다.

 function myMax(a, b, c){
      if(isNaN(a) || isNaN(b) || isNaN(c)){  // a,b,c중 하나라도 숫자가 아니면(Not a number)
        return;
      }
      let max = a;
      if(b > max) max = b;
      if(c > max) max = c;
      return max;
    }

    function myMin(a, b, c){
      if(isNaN(a) || isNaN(b) || isNaN(c)){
        return;
      }
      let min = a;
      if(b < min) min = b;
      if(c < min) min = c;
      return min;
    }

    function myMedian(a, b, c){
      if(isNaN(a) || isNaN(b) || isNaN(c)){
        return;
      }
      /*
      let median;
      if(a >= b){
        if(b >= c) median = b;       // a b c
        else if(a <= c) median = a;  // c a b
        else median = c;             // a c b
      }
      else if(a > c) median = a;     // b a c
      else if(b > c) median = c;     // b c a
      else median = b;               // c b a
      */
      let median;
      if((b >= a && a >= c) || (c >= a && a >= b)){  // b a c, c a b
        median = a;
      } else if((a >= b && b >= c) || (c >= b && b >= a)) {  // a b c, c b a
        median = b;
      } else {
        median = c;
      }
      return median;
    }
    console.log(myMax(1, 2, 3));
    console.log(myMin(1, 2, 3));
    console.log(myMedian(1, 2, 3));

콜백 함수

1. 함수에 함수를 전달할 수 있는 개념이다.
2. 인수(함수) -> 매개변수(함수를 저장한 변수) 흐름으로 동작한다.
3. 함수를 전달 받은 함수는 매개변수를 함수 호출하듯이 처리하여 전달 받은 함수를 실행한다.

인수가 없는 콜백

    function myFunc9(a){
      a();
    }
    myFunc9(function(){
      console.log('함수 호출');
    });

인수가 있는 콜백

    function myFunc10(a, b, callback){
      callback(a, b);
    }
    myFunc10('Hello', 'World', function(x, y){
      console.log(x, y);
    });

재귀 호출

1. recursive call
2. 어떤 함수가 자신을 호출하는 것을 의미한다.
3. 반복 동작을 구현할 때 사용한다.

factorial 구하기

 /*
      factorial 구하기
      5! = 5*4! = 5*4*3*2*1
      4! = 4*3! = 4*3*2*1
      3! = 3*2! = 3*2*1
      2! = 2*1! = 2*1
      1! = 1
    */
    
    function factorial(a){
      if(a === 1){
        return 1;
      } else {
        return a * factorial(a-1);
      }
    }
    console.log(factorial(5));

타이머 함수(내장 함수)

1. setTimeout

1) 특정 시간 후에 한 번만 동작한다.
2) 동작

//1초기준 1000;
var timerId = setTimeout(함수, 시간(밀리초));

3) 동작 취소

clearTimeout(timerId);

2. setInterval

1) 특정 시간 간격으로 반복해서 동작한다.
2) 동작

var timerId = setInterval(함수, 시간(밀리초));

3) 동작 취소

clearInterval(timerId);