JavaScript

값으로서의 함수와 콜백

값으로서의 함수

JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다. 거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. 다음 예제를 통해서 그 의미를 알아보자.

function a(){}

위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다. 이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.

a = {
	b:function(){
	}
};

함수는 값이기 때문에 다른 함수의 인자로 전달 될수도 있다. 아래 예제를 보자.

function cal(func, num){
	return func(num)
}
function increase(num){
	return num+1
}
function decrease(num){
	return num-1
}
alert(cal(increase, 1));
alert(cal(decrease, 1));

10행을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다. 함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다. 함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.

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

function cal(mode){
	var funcs = {
		'plus' : function(left, right){return left + right},
		'minus' : function(left, right){return left - right}
	}
	return funcs[mode];
}
alert(cal('plus')(2,1));
alert(cal('minus')(2,1));	

당연히 배열의 값으로도 사용할 수 있다.

var process = [
	function(input){ return input + 10;},
	function(input){ return input * input;},
	function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
	input = process[i](input);
}
alert(input);

콜백

처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

비동기 처리

콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.

datasource.json.js

{"title":"JavaScript","author":"egoing"}

demo1.html

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $.get('./datasource.json.js', function(result){
		console.log(result);
	}, 'json');
</script>
</body>
</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. Seo Yun Seok Tudoistube
    이해하는거랑 아는거는 다르다는데, 이해했다고 생각하는거랑 이해한거랑도 다르겠죠^^;; 감사합니다^_____^!!!
  2. enjoyPG
    음 저도 같은 현상이네요.
    크롬 개발자 도구에서는 또 정상적으로 값이 나오는데

    저는 Visual studio code쓰고 있는데 ide에서는 undefined가 뜨네요 ;; 허허
    대화보기
    • crable
      감사합니다
    • 이승우
      20170521 완료
    • 남경진
      너무 어렵게 생각하지 않아도 되요!
      대화보기
      • 이승준
        콜백 참 어렵네요... 한참 들여다 봐야 하는 듯..
        정확하진 않겠지만, 대략 제가 이해하기로는..
        sort의 인자로 콜백되는 함수의 포맷이... function(a, b)인데,,,
        이때 각 배열의 값들을 가져와서 대조한다.
        이때 a, b 값들을 비교해서 -1(음수), 0, 1(양수) 로 각각 리턴하는 방식이라는 거죠.

        a<b 이면 -1(음수) 즉 a에 b보다 한단계 적은 인덱스를 부여하고
        a=b 이면 0 즉 정렬상태를 그대로 두고
        a>b 이면 +1(양수) 즉 a에 b보다 한단계 큰 인덱스를 부여해서 왼쪽에서 작은 값부터 순차정렬한다

        그런데 리턴값을 -1은 곧 음수이고, +1은 곧 양수라고 보면
        숫자를 정렬할 경우,
        a-b에서 a<b이면 음수이고, a>b이면 양수니까 위의 내용과 동일하게 된다.
        따라서 return a-b 하나의 명령으로 처리될 수 있다.
        이것을 리턴값(-1 0 1)을 기준으로 정리하면 .
        1) 음수 -1 : a를 b보다 왼쪽에 정렬
        (1) a-b=음수 -> a<b : 순차
        (2) b-a=음수 -> a>b : a가 b보다 큰데 b의 왼쪽에 배열되므로 역순차
        2) 0 배열 유지
        3) 양수 +1 : a를 b보다 오른쪽에 정렬
        (1) a-b=양수 -> a>b : 순차 t
        (2) b-a=양수 -> a<b : a가 b보다 작은데 b의 오른쪽에 배열되므로 역순차

        이렇게 이해해도 문제 없나요? ^^;;
      • 이승우
        20170516 2/4까지 완료
      • 최규선
        20170430완료! 감사합니다.
      • 김소희
        감사합니다!
      • 신입1
        오랜만에 복습중인데 지금은 너무 쉽게 느껴져서 뿌듯하네요
      • 비동기적인 처리 => 인터페이스와 사용자가 소통할 범위와 시간을 늘리기위해 시간이 많이 걸리는 작업을 뒤로 미루는 처리
        순차적 절차적으로 코드를 일직선으로 쭉 실행하는것을 동기적인 처리, 우선도에 따라 다르게 처리하는것을 비동기적인 처리라고 부름.
      • Sang Jin Lee
        좋은 강의 감사합니다~!!
      • Joohan Lee
        자바스크립트에서 함수는 값으로 사용 가능. 그런 특성 덕분에 어떤 함수에 다른 함수를 데려와서 새로운 기능의 함수로 동작하게 할 수 있다. 어떤 함수의 새끼함수로 작동하는 함수를 메소드라 하며, 함수에 점(.) 붙여서 불러쓴다. 함수의 인자로 불러와서 쓰는 함수는 콜백 함수라 한다.
      • 초보
        컴퓨터 언어는 생전 처음인데 계속해서 잘 따라오다가 처음으로 막히네요.
        아예 이해가 안되는건 아니고 설명을 하면 눈으로 따라가면서
        논리적으로 따라가기는 하는데 뭔가... 많이 답답한 느낌...
        딱 이 수업이후로 갑자기 머릿속이 복잡해지면서ㅋㅋ 함수 객체 메소드 이런것들이 갑자기 뭉탱이로 느껴지고
        어떻게 다르다는건지 잘 이해가 안되요.
        저 식들이 목적을 향해 서로가 연결되는 논리가 뭐랄까 그냥 규칙이랄게 없이 마구잡이로 막 연결되는 느낌이에요.
        제눈엔 그냥 안에든 배열갯수만 다르지 다 똑같은 함수같이 보여요.ㅠㅠ 개발자들은 더 자유롭고 더 융통성있게 운용할수는 있을것 같은데 처음 배우는 입장에서는 참 곤란하네요..ㅠㅠ
      • Ruin09
        요지는 function(result){
        console.log(result); <-- 이 부분이 동기적으로 작동하는게 아니고 비동기적으로 작동한다는 말씀이시죠?
      • 폭스킴
        이 챕터가 초보자에겐 깔딱고개군요;;
        강좌 다시 한 번 더 들어보고, 댓글들 읽어보고, 검색도 좀 해보니까 조금 정리가 되는 것 같아요;;
        제가 보기에 이 챕터는 동기, 비동기(ASYNCRONOUS)를 이해하느냐 못하느냐가 관건인 것 같습니다.
        비동기처리를 위해선 값으로서의 함수(FIRST CLASS CITIZEN)이라는 개념이 유용했고,
        다른 함수의 매개변수로써의 CALL BACK함수를 통해 사용자의 비지니스 로직을 처리하도록 위임한다.
        제가 정리한 게 맞나요?
      • 임지호
        값으로서의 함수 : 자바스크립트에서 함수는 값으로도 쓰일 수 있다(변수에 담기, 객체 안에 저장하기, 다른 함수의 인자로 사용하기, 함수의 리턴값으로 사용하기, 배열의 값으로 사용하기 등) -> first-class-object,citizen이라함
        *객체 안에서 key는 변수 역할, 속성이라고도 부르고 value에 함수가 담긴다면 이는 메소드라 부른다
        - 콜백함수 : 함수가 다른 함수의 인자로 사용됨으로써 그 함수의 내용을 완전히 바꿀 수 있는 것.
        - 비동기처리 : 시간이 오래 걸리는 작업을 나중에 처리해서 일련의 작업을 순서대로 처리하지 않음으로써 사용의 편의성을 높이는 기법.(일반 환경에서는 보이지 않고 서버 환경에서 구동된다) - 대표적으로 Ajax라는 기법이있음
      • 박영광
        그러니까 상단의 메뉴나 알림을 누르면 웹브라우저가 서버에서 정보를 읽어와서 창에 띄우는 작업을 완료할때까지 다른 모든 활동을 정지하는게 아니라 마치 이메일을 예약했는지 여부를 확인하는 프로그램이 백그라운드에서 돌아가고 있는 것처럼 사용자가 다른 일을 하는 와중에 그런 작업을 한다는 것이죠?

        그리고 그런 일을 가능하게 하는 기법이 javascript에서 미리 만들어논 함수의 인자값으로 또다른 함수를 전달하는 콜백기법이고요.
        또 그런 콜백기법을 이용해서 사용자가 다른 활동을 하는동안 프로그램이 백그라운드에서 필요한 작업을 처리하게 하는 기법이 ajax이고요
      • 허민호
        먼소린지 모르겠지만ㅜ 공부좀 더하고 다시보러 오겠습니다
      • 김경수
        제가 정리 및 정의한 것을 올립니다.
        /////////////////////////////////////////
        자바스크립트 상에서는 함수를 값으로도 사용할 수 있다. 이 점은 다른 언어와는 다른 점이라고 생각했습니다.
        var a = function(){
        /* body */
        }
        그래서 객체 내에 선언을 할 때 함수를 연관배열, 혹은 일반배열 안에 정의를 할 수 있습니다.

        함수 중에서도 '콜백(Callback)함수'라는 것이 있습니다.
        콜백함수를 간단히 표현하자면 "사용자, 즉 개발자가 임의로 호출하는 것이 아닌 시스템이 스스로 호출하는 함수"라고 표현할 수 있습니다. C언어에서는 함수 포인터로 표현이 가능하겠죠. 그래서 비동기 콜백함수인 Ajax도 'egoing'님이 표현한 것 처럼 예약만 해놓고 사용자가 다른 일을 해도, 결국 예약시스템에 의해 스스로 실행하는 함수도 역시 콜백함수라고 할 수 있습니다.

        /////////////////////////////////////////
      • 완료!
        완료! 감사합니다~
      • ibmike
        여기 써있는 콜백에 대한 설명이
        제가 지금까지 본 설명중에 가장 쉽게 되어있는거 같네요
        역시 이고잉님이십니다 ㅎㅎ
      • 슬근슬근
        가져오는 결과물이 json이라는 데이터 저장 형태인데요,
        예제에는 {"title":"JavaScript","author":"going"} 이런식으로 쓰이고 있죠.
        가져오는 데이터가 result라는 변수에 담기는데 그 데이터의 타입이 json타입이라는 말입니다.
        대화보기
        • 장열심
          function(left, right){return left + right} 이무명함수로 동작하는구나..
          1시간동안고민끝에 깨달음
        • 내일도
          이번편은 좀 어렵네요 ㅎㅎ
        • 김은희
          알송달송~^^ 반복학습하면 이해되겠죠?
        • 초보!!
          비동기 콜백에 get 함수 제일 마지막에 있는 'json' << 얘는 뭐하는 녀석인가요?
          세번째 인자값에대한 설명은 없으셔서;;
        • yihsang
          좋은 강의 항상 감사드립니다.
        • Harry S. Hur
          콜백 설명이 너무 어려워서 잘 모르겠어요.. ㅠㅠ
          다른곳에 읽어볼만한 정리된 문서같은게 있을까요?
        • 심원태
          캬 재밌네요
        • 이주환
          2016. 04. 24
          콜백처리는 제대로 알아두고가면 좋은 내용인듯 합니다.
          Ajax에 대한 내용도 후에 필요해지실거구요.
        • JustStudy
          고맙습니다.
          이렇게 귀한 강의는 지속적으로 반복 학습해야 합니다.
        • Byeong Koo Kang
          함수의 용도 2... 소름돋네요 와우 함수를 변수로 사용하면서 밸류값에 바로바로 넣고..

          와 완전 처음보는 구조.. ㄷㄷ

          콜백 처리방식도.. 처음보네요 ㄷㄷ;;;;;

          웹알못... 배울게 많습니다...
        • tinybit
          이고잉선생님이 ajax가 나오면서 웹어플리케이션의 발전이 시작되었다고 하셨는데 ..
          현재 보통 웹서비스는 전부 부분적으로 비동기처리를 쓰고있다고 생각하시면 됩니다. 매번 페이지 전체를 불러오지않고 처음만 불러오고 그담부터는 필요한 부분만 별도로 서버로 통신하여 보여지는 부분을 바꾸지요. 그럼으로 인해서 유저 입장에서는 네트워크 데이터료(?)를아끼는효과도 있어요. 만일 네이버등에서 비동기를 쓰지않으면 뭐 하나 누를때마다 그 많은 정보를 처음부터 다 가지고 오고 표시하고 표시했던거 또 표시하고.. 하게되어 표시되는시간도시간이지만 데이터요금도 엄청나게 나오게됩니다.
        • Bono
          네. 저도 그러네요. 완전 사기... 이고잉선생님은 사기캐릭터.. 정말 이런 최고의 선생님 본적이 없는거 같네요 ㅎㅎㅎ
          대화보기
          • Bono
            네. 저도 그러네요. 완전 사기... 이고잉선생님은 사기캐릭터.. 정말 이런 최고의 선생님 본적이 없는거 같네요 ㅎㅎㅎ
            대화보기
            • 고고
              함수를 value로 사용한다니 신기하네요
              조금더 자바보다 자유도가 높은 언어인것같습니다.
            • vanillasea
              function sortNumber(a,b){
              // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
              return b-a;
              }
              var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
              alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]
              --> 동영상은 잘나와있는데 소스에 sortNumbe변수 선언 빠져서 실행이 안되요
              var softNumber = function sortNumber(a,b){
              // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
              return b-a;
              }
              var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
              alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]
            • 베리스트롱
              두번째로 강좌를 보니까 조금씩 이해가 되는데요
              우와 하면서 잠시 놀랐던 부분은
              그냥 아무렇지도 않게 사용해 왔던 웹사이트들이나 에플리케이션들이
              이런 복잡한 공식으로 구성되어 있다는 거네요

              더불어 이런 기술들로 어떤 기능들이 실질적으로 작동하게 할 수 있는 것인지 호기심도 생기네요
            • 마취된꽃돼지
              음음.. Ajax는 get이든 post 든 백그라운드에서 어떠한 결과값을 가져오는 방식의 한 종류인듯 합니다.. 여기서의 get혹은 post로 보내지는 내용들은 클라이언트의 요청이 되는것 같고, 그 클라이언트의 요청이 서버에서 처리되어서(가령 로그인 이라고 쳐보면.. 회원정보가 일치하면 true 일치하지 않으면 false 또는 일치하면 json, 그러니까 자바스크립트의 객체 형식으로 데이터 {"id":"abcd","pw":"4fsfrf@#","name":"영수","age":29}라는 결과값을 서버에서 콜백해준다면 function의 인자값은 위의 데이터가 되는것이고, 혹은 true , false가 될수도 있구요. 결과적으로 function에서는 받은 result(데이터) 로 비즈니스로직을 구현하는 개념인것 같기는한데... 아마.. 도.. 흠흠..
              대화보기
              • 영수
                대충 알겠네요
                sort는 기본적으로 두 숫자 사이의 관계에 대해 양수, 음수, 0을 지정해 그것을 이용해
                배열을 정렬하는 내장 메소드이고 따라서 콜백함수는 무조건 return값으로 셋 중 하나를 줘야된다.
                구체적인 코드는 모르겠지만 양수를 받으면 순서를 바꾸고 음수를 받으면 그대로 0도 그대로(?)가 된다.
                따라서 오름차순 정렬을 하기 위해선
                if(a>b){return 100;}
                if(a<b){return -100;}
                if(a==b){return 0;}
                내림차순 정렬을 하기위해선
                if(a>b){return -100;}
                if(a<b){return 100;}
                if(a==b){return 0;}
                하면 된다.
                이를 간단히
                return a-b;하게 되면 a가 b보다 크면 양수 작으면 음수를 반환하니깐 오름차순 반대는 내림차순이 된다.
                소제목처럼 처리의 위임 또는 사용자 임의대로 함수의 수행을 부분적으로 조정하기 위해 함수안에 함수를
                인자로 넣게 되는데 이 넣는 함수를 콜백이라고 부른다.
                Ajax는 자바스크립트에서 비동기적처리 기법을 일컫는 말인데.. 이렇게 미리 어떤 작업을 수행하도록 예약하는 과정에 콜백으로 함수를 인자로 넣게되면 좀 더 정교하게 사용자가 제어할 수 있게 된다. 이 수업은 Ajax수업에 대한 구체적인 강좌는 아니지만 콜백이 어떤 식으로 쓰이는 지 보여주기 위해 4번째 강좌를 하셨다고 이해하면 될까요???....
              • 우후훗
                최선완님이 적어놓으신 소스는 문제가 없습니다 그대로 넣어보니 크롬 console에 undefined가 찍히고 팝업창에 2가 나오네요
              • himoshimoshii@gmail.com
                콜백 : 함수의 인자가 함수인 경우를 말한다. 맞나요? egoing님이 강의에서 이렇게 말씀하신 거 같은데 질문하신 분들이 많아서..
              • 잠자는게 젤 좋아
                객체 속성을 쓸때 대괄호 내에서는 변수 사용을 할 수있지만 마침표로는 변수를 사용할 수 없습니다.
                따라서 mode는 변수이기 때문에 대괄호를 사용 하셔야 합니다
                대화보기
                • 최선완
                  function cal(func, num){
                  return func(num)
                  }
                  function increase(num){
                  return num+1
                  }
                  function decrease(num){
                  return num-1
                  }
                  alert(cal(increase, 1));

                  ///////////////////////////이거 실행하면
                  undefined 나옵니다. --; 전혀 2라는 숫자 안나오는데요 .강사님
                • 초보
                  function cal(mode){
                  var funcs = {
                  'plus' : function(left, right){return left + right},
                  'minus' : function(left, right){return left - right}
                  }
                  return funcs[mode];
                  }

                  두번째 강의 이 부분에서요..
                  return funcs.mode; 로 하면 왜 안되는거죠..?
                • quki
                  비동기처리가 자바에서는 새로운 쓰레드를 만들어서 처리하는 것과 같은 맥락인가요?
                • 이용주
                  우어... 난이도 너무 높아요 ㅠㅠ .. 으... 예제를 보면서 이해할려고 하는데.. 영 안되네요 ;;
                • switch
                  콜백.. 이해가 안되서 휘청휘청 합니다 ㅠ.ㅠ 기분전환하고 다시 봐야겠네요!
                • document.write
                  callback ajax 이수업은 넘 어려워서 비동기로 ^^
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기