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. 김경수
    제가 정리 및 정의한 것을 올립니다.
    /////////////////////////////////////////
    자바스크립트 상에서는 함수를 값으로도 사용할 수 있다. 이 점은 다른 언어와는 다른 점이라고 생각했습니다.
    var a = function(){
    /* body */
    }
    그래서 객체 내에 선언을 할 때 함수를 연관배열, 혹은 일반배열 안에 정의를 할 수 있습니다.

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

    /////////////////////////////////////////
  2. 완료!
    완료! 감사합니다~
  3. ibmike
    여기 써있는 콜백에 대한 설명이
    제가 지금까지 본 설명중에 가장 쉽게 되어있는거 같네요
    역시 이고잉님이십니다 ㅎㅎ
  4. 슬근슬근
    가져오는 결과물이 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가 나오면서 웹어플리케이션의 발전이 시작되었다고 하셨는데 ..
      현재 보통 웹서비스는 전부 부분적으로 비동기처리를 쓰고있다고 생각하시면 됩니다. 매번 페이지 전체를 불러오지않고 처음만 불러오고 그담부터는 필요한 부분만 별도로 서버로 통신하여 보여지는 부분을 바꾸지요. 그럼으로 인해서 유저 입장에서는 네트워크 데이터료(?)를아끼는효과도 있어요. 만일 네이버등에서 비동기를 쓰지않으면 뭐 하나 누를때마다 그 많은 정보를 처음부터 다 가지고 오고 표시하고 표시했던거 또 표시하고.. 하게되어 표시되는시간도시간이지만 데이터요금도 엄청나게 나오게됩니다.
    • 네. 저도 그러네요. 완전 사기... 이고잉선생님은 사기캐릭터.. 정말 이런 최고의 선생님 본적이 없는거 같네요 ㅎㅎㅎ
      대화보기
      • 네. 저도 그러네요. 완전 사기... 이고잉선생님은 사기캐릭터.. 정말 이런 최고의 선생님 본적이 없는거 같네요 ㅎㅎㅎ
        대화보기
        • 고고
          함수를 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
              어렵죠? ^^

              예 맞습니다.

              숫자가 아닌 정보들은 정렬 순서를 정하는 것이 어렵기 때문에 그 순서를 알려주는 함수를 정의해서 그걸 sort에 전달한거죠.

              이해하시게 되면 짜릿하실꺼예요. 천천히~
              대화보기
              • Youngmin Kweon
                사용자 : 컴퓨터야 [12,45,23,1,3,5,3] 이 숫자들 정렬(sorting) 해줘
                컴퓨터 : 어떻게?
                사용자 : 내림차순 으로 (혹은 니맘데로, 혹은 올림차순으로)

                여기서 컴퓨터가 "어떻게?" 라고 되묻는 것이 callback(콜백) 이라고 이해하면 되나요?
                초보라 뒤로 갈수록 이해가 어렵지만 강의 정말 잘 듣고 있습니다. 감사드리고요..
              • 머머
                아.. 사이트마다 우측에 로그인이나 회원가입 버튼 로그인하면 그 부분만 로그인상태로 바뀌는것들이 Ajax로 하는거였나보네요..

                자바스크립트의 함수는 c나 java의 함수와 좀 다른면이 있어서 이해가 잘 안되네요. 특히 콜백.
              • 오후의아침
                어렵긴한대 몇번보면될거같아요
                보면서느낀건데 생활코딩정말짱짱
                개인적으로 책보고 개념정리하는것보다 강의듣는게 쏙쏙들어오는듯^^
              • dorosi
                저두 그래야겠어요..
                대략 뭔진 알겠는데 실소스에서 어케 써야할지는 아직 뜬구름 잡기인듯..ㅎㅎ;
                대화보기
                • 석진
                  콜백 하나 도 이해 안됨..
                  음수 양수 ?
                • 이고
                  일단 정주행 합니다. ㅠㅠ
                • 안녕하세요
                  무슨소리인지 하나도 몰라서 막혔습니다 ㅡㅡ
                • 이영수
                  수정 건의 합니다.
                  처리의 위임 영역에 "값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다." 중
                  '함수의 인자로 함수로' => '함수의 인자로 함수를' 으로 조사를 수정 부탁합니다.
                • 민팀장
                  감이 살짝 오는것 같기도..아닌거 같기도..속으로 나만의 콜백의 정의를 내리긴 했는데..
                  차차 배워가면서 이 정의가 맞는건지 알아봐야 겠네요..
                • framei
                  (a, b) 인자값이 잘 이해 안됐는데 아래 댓글 설명과 함께 보니 어렵지만 조금 이해됩니다... 감사합니다. 일단 저도 패스...^^;
                • 김홍일
                  제 생각은
                  a와 b에 인자? 위의 숫자들이 들어오고 a와 b를 더하거나 빼서, 작으면 뒤로 보내고, 크면 앞으로 보내고. 이런식으로 계산되는거 같습니다.
                  대화보기
                  • 엠제이
                    콜백함수가 기본이구요, Ajax는 콜백을 응용할 수 있는 한 예제입니다.
                    한번 더 네번째 동영상을 시청하면 좋을거 같습니다.
                    대화보기
                    • 엠제이
                      콜백,,, 영어로 callback 입니다. call back이죠
                      즉 불려지는 겁니다. 수동이죠. 불려지는 대상이 콜백 함수구요.

                      뭔가를 콜할 때 그 콜을 당한 놈이 공통적인 사항은 처리를 하는데, 공통적이지 않은 부분(비지니스 로직)은 제가 처리를 해야죠. 그때 그 부분을 콜백 함수에 정의하면 내가 부른 놈이 반대로 절 다시 부르죠(call back). 이때 제가 정의한 비지니스 로직을 처리할 수 있게 됩니다.
                      대화보기
                      • 팽맨이러닝
                        AJAX 부분도 이해가 안 되네요. 콜백과 같이 뒤죽박죽...ㅠㅜ
                        어려운 부분이란 건만 이해했습니다.
                        AJAX가 웹개발에 필수적이란 것 정도만.

                        제가 편입하긴 했어도 전공이 컴퓨터공학인데... 이해가 안 되다니 ㅠㅜ
                      • 팽맨이러닝
                        콜백함수는 무슨 소리인지 모르겠네요....
                        정의부분을 조금 더 자세하게 알려주셨으면 좋겠어요.
                      • 말랑
                        아. 어렵네요 ㅜㅜ 다시 도전해 봐야겠어요. ^^ 늘 감사합니다. (첨으로 댓글 남겨보아요, 후훗)
                      • 조신부리
                        sortNumber(a,b) 는 왜 파라메터가 두개여야하죠? 함수명은 아무거나 해도 상관없던데, 파라메터 갯수는 맞아야 하고, 내부를 찍어보면 소팅알고리즘이 동작되는데(무슨알고리즘인가요?)....

                        함수를 실행하려면 ()가 있어야 한다고...numbers.sort(sortNumber) 에선 sortNumber()가 에러나는 이유는 sort()가 이미 호출됐으니까 파라메터는 무엇이든 자동호출되는거고....재호출을 하면 안되는 건가요?...

                        왜이리 어렵나요?
                      • 이종엽
                        동영상을 보고 소스를 따라해보고 할땐 알겠다가도 금방 개념 놓치고 까먹고 정신이 없네요...점점 어려워지는 자바스크립트...선생님 수고하셨습니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기