[생활코딩] JS문법(함수)- 값으로서의 함수,콜백, 비동기처리

JS에서는 함수도 객체이다. 다시 말하면 일종의 값이다. 

*값의 특징: 변수에 담을 수 있다. 즉, JS의 함수도 변수에 담을 수 있다. 

거의 모든 언어가 함수를 가지고 있습니다. JS 함수의 차별점은 함수가 값이 될 수 있다는 점입니다.

     function a(){
        
     } 
     //위의 코드와 아래의 코드는 같은 말이다.
     //함수가 "값"이기 때문에 변수에 담길 수 있다. 
     const a = function(){
     };

• 함수 a는 변수 a에 담겨진 값이다.
• 함수는 객체의 값으로 포함될 수 있다.
• 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.

objA = {
	/*함수는 값이고 객체 안에 저장할 수 있다.
	key : value 형태 여기서 key는 b 즉, 변수이고 객체의 속성(property)
 	속성의 값이 함수라면 메소드 라고 부릅니다.*/
      b: function () {},
      };

• 위의 코드를 풀어서 설명하자면 objA객체 안에는 b라는 변수를 속성으로 가지고있는데 그 속성의 값은 함수이고 이 함수를 우리는 메소드라고 부릅니다(위의 예제에서는 메소드 b). 
• 함수가 변수에 저장될 수 있음-> 함수가 객체에도 저장될 수 있음(key값이 변수이므로)

값으로써의 함수

▶함수는 값이기 때문에 다른 함수의 인자로 전달될 수 있습니다. 

 //함수의 인자로 전달되는 함수
//() 괄호를 여닫는 것의 의미: 함수를 호출한다.
      function cal(func, num) {
        return func(num);
      }
      function increase(num) {
        return num + 1;
      }
      function decrease(num) {
        return num - 1;
      }
      alert(cal(increase, 1)); //cal함수의 첫번째 인자로 increase()함수가 온다

 

 

▶함수는 함수의 리턴 값으로도 사용할 수 있다. 

 function cal(mode) {
        const funcs = {
          plus: function (left, right) {
            return left + right;
          },
          minus: function (left, right) {
            return left - right;
          },
        };
        return funcs[mode];//리턴값으로 함수를 사용
      }
      alert(cal("plus")(2, 1));
      /*cal('plus') -> funcs.plus, funcs[plus]이므로 cal('plus')의 값으로 
      function(left, right){return left+ right}을 가지고 있는 것이고 이 값인 함수를 호출하기 위해
      cal('plus')() 이중 호출의 형태를 가짐 */
      alert(cal("minus")(2, 1));

 

▶함수는 배열의 값으로도 사용할 수 있다.

const process = [
	//배열에 값으로 함수를 담았다.
        function (input) {
          return input + 10;
        },
        function (input) {
          return input * input;
        },
        function (input) {
          return input / 2;
        },
      ];
      let input = 1;
      for (let i = 0; i < process.length; i++) {
        //배열은 순서가 있다.
        // process[0](1) -> 1번째 함수에 인자로 1을 주고 결과값 input + 10 = 11을 return 
        // process[1](11) -> 2번째 함수에 인자로 11을 주고 결과값 11* 11 = 121을 return
        // process[2](121) -> 3번째 함수에 인자로 121을 주고 결과값 121 / 2 = 60.5를 return
        input = process[i](input);
        
      }
      alert(input);

 

결론: JS의 함수는 변수, 함수의 매개변수, 리턴값으로 사용가능하다. 이러한 용도로 사용될 수 있는 형태의 데이터를 fist class citizen/object/entity/value 라고 합니다. 

콜백

function sortNumber(a, b) {
        // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다. -> return a - b 하면 역순정렬
        /* 아래의 코드를 간단히 하면 return b - a; 이다
        if(a > b){
            // a가 b보다 클 때 양수
            return 1;
        }else if (b > a){
            // a가 b보다 작을 때 음수
            return -1; 
        } else {
            // a 와 b 가 같을때 
            return 0;
        }
        */
        return a - b;
      }
      //기존 sort()메소드 결과값 : [1,10,2,20,3,4,5,6,7,8,9];
      //sortNumber()을 기준으로 sort()메소드 결과값: [1,2,3,4,5,6,7,8,9,10,20];
      let numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
      alert(numbers.sort(sortNumber));

• array객체인 numbers 를 만들었습니다. numbers.sort()할때 dot앞에 있는 대상을 '객체'라고 합니다. array는 객체의 종류중 하나이고 sort()라는 메소드(객체에 소속된 함수)를 제공합니다. 우리가 정의할 필요없이 이미 JS가 만들어놨기 때문에 호출해서 사용하기만 하면 됩니다. 이를 내장객체 혹은 빌트인 객체,메소드 라고 부릅니다. 반대로 우리가 직접 만들어 사용하는 것들을 사용자정의 객체,메소드,함수 라고 부릅니다. 
• 값으로써 함수를 사용할 수 있기때문에 오리지널함수(sort())의 동작방법을 값을 전달하는 것(sortfunt()를 통해)을 통해서 완전하게 바꿀 수 있는 것이 콜백 입니다. 콜백이 가능한 이유는 JS의 함수가 값이기 때문이다. 

비동기 처리

-콜백은 비동기처리에서도 유용하게 사용된다.

• 시간이 오래걸리는 작업이 있을 때(ex.이메일 10000개보내기) 이 작업이 완료된 후에 처리해야할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행할 수 있도록 할 수 있다. 

-예를들어,  글을 작성하고 이메일을 발송하면 작성완료를 안내하는 메세지를 띄운다고 치자.  이메일 하나를 구독자에게 발송하는것이 1초가 걸리고 10000명의 구독자에게 메일을 보낸다고 했을 때 이것을 순차적으로 처리하면 3시간이 걸린다. 이를 동기적인 처리라고합니다. 10000명에게 이메일을 발송하는 것을 예약을 걸어두고 작성완료 안내를 먼저 처리하는 것이 바로 비동기적인 처리라고 합니다.  여기서 이메일 발송을 예약처리하는 것을 일종의 todo 라고 생각하면 좋습니다. 

-동기적 처리를 하면 요청한 동작이 마무리될 때까지 요청한 웹페이지는 프리징상태(아무것도 조작할 수 없음)로 대기해야합니다. 즉, 위의 예시로는 10000명의 구독자에게 이메일을 다 보낼때까지 기다려야 하는 것이죠. 

 

Ajax(asynchronous //비동기 + javascript and xml)

• 웹페이지 전체를 로드하지 않고 서버와 웹브라우저가 내부적으로 통신하는 기법
• Ajax를 제어할 때, 비동기적인 제어를 한다. 
• 브라우저마다 사용법이 달라서 번거롭지만 jQuery를 이용하면 복잡한 작업을 한줄의 코드로 쉽게 사용할 수 있다(이 과정에서 콜백이 사용됩니다.).

F12- > Network 탭 : 웹브라우저가 웹서버랑 통신하는 내역을 보여주는 공간