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. 누누
    20.08.04완료
  2. 김준석
    20.07.28 학습완료
  3. LittleDuck
    참고로 인자는 무엇이든지 될수있습니다. 함수가 될수도 있고 숫자나 문자 같은 상수가 될수도 있고 아니면 변수가 될 수도있습니다.
    func(1) //숫자 상수1
    func('A') //문자 상수 'A'
    func('ABC string') //문자열 'ABC string'
    func(num) //변수 num
    func(myfunc()) //함수 myfunc(...) 는 모두 인자가 될 수 있습니다
    대화보기
    • LittleDuck
      func(func, num) <-여기서 괄호안 num, func는 매개변수에요. 이 메게변수에 무엇인가 데이터(문자, 숫자 등등...)를 넘겨줄때 그데이터를 인자라고 부르고 인자를 넘겨준다고 하는거에요.

      func(num) 이라고 있을때 func는 함수이름 num은 매개변수입니다. 다른 표현으로 func(var num)으로 이해하셔도되요.
      이제 func를 호출하고자 합니다. 여기서 함수를 호출한다 라는 표현은 함수를 실행, 사용하겠다는 뜻입니다.
      func(1); 이문장은 func라는 함수에 num의 값으로 1을 전달한다는 문장이죠? 여기서 1이 인자가 되는것이고 매개변수 num에 1을 넘겨준다는 문장이니 이를 "인자를 넘겨준다"고 표현합니다.

      호출: 함수를 실행
      매개변수:함수를 호출하며 넘겨받을 값을 저장하는 변수
      인자: 매개변수로 넘겨주는 값
      인자를 전달:함수를 호출하며 값을 넘기는 행위

      func(num);
      func(1);
      func는 함수의 이름(식별자라고도 부르는데 용어는 중요하지않아요. ) num은 매개변수, 1은 인자, func(1)은 인자를 전달하다는 문장입니다.

      정 어려우시면 다른 언어(c같은애들)에서 함수까지만 익혀보시길 추천드립니다.(대략 2~3일이면)훨씬 이해하기 수월해 지실거에요.
      대화보기
      • 한영이에요
        function cal (func, num)<- 이부분이 인자인가요? 매개변수 아닌가요? 헷갈리네요ㄷ.. 전강의에선 매개변수라고 들엇던거 같은데 ㅠ 인자는 매개변수의 값을 선언하는거아닌가요?
        {
        }
      • 준식
        20200606 진행중
        여긴 다시 봐야할듯
      • 코딩중독
        너무 어려워요ㅜㅜ
      • ㅇㅘㄴ료
      • ironia
        콜백 함수의 개념 이해 감사합니다~^^
      • 뿡뿡팡야
        완료
      • 한강
        좋은 강의 항상 감사합니다.~!!! 200312
      • js극혐
        인간적으로 너무 어렵습니다 ㅋㅋㅋ
      • 꽁삼날치
        3/4부터 보기
      • moleskindiary@gmail.com
        감사합니다!
      • 현수
        비동기 난이도가 꽤 있네요 ㅠㅠ 그래도 너무 감사합니다.
      • 굼벵이
        완료
      • 오현주
        2019.12.18 수강
      • 감피이스
        감사합니다. 그 부분이 이해가 안 가서 계속 같은 영상 보고 있었는데 덕분에 약간 이해하고 넘어갑니다.
        대화보기
        • 홍주호
          20191020 완료
        • 콜백에 대해서 헛갈리시는 분이 많으신 것 같습니다.

          이것은 sort라는 Method의 사용방식을 이해하면 쉽게 이해할 수 있습니다.

          sort뒤에 첫번째로 들어오는 함수는는 a와 b두 인자를 비교하는 역할을 하도록 약속 되어 있습니다.

          https://developer.mozilla.org......ort

          해당 링크 참고하시길 바랍니다.
        • 박창신
          완료
        • Sumii
          jquery json ajax.. 여러개 나오면서 이제 좀 헷갈리는데 우선 넘어가봅니다
        • kshradioo@gmail.com
          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));

          제가 이걸 해석해봤는데 이 방법이나 순서가 맞는지...한 번 봐주세요..ㅠ
          alert에서 보면 cal함수의 첫번째 인자로 plus를 주면, return funcs[mode]가 funcs[plus]가 되고,
          객체 funcs 안의 plus(키)의 값인 function (left, right) {return left + right}를 리턴하게 된다.
          그렇게 되면,
          alert(
          cal(2,1)
          function(left,right){ return left+right}
          )가 남고, 첫번째 인자 2를 left에게 두번째 인자 1을 rightd에게 주고, 해당 값을 더한 것을 리턴하면 결과는 3!
        • 호두
          접근방법
        • 달리는거북이
          봤어요
        • byeonguk kim
          잘 보았습니다. 감사합니다.
        • Dustin Yook
          완료
        • choon
          감사합니다.
        • pakimchi
          인자로 전달된 문자열 mode를 이용해서 funcs['plus']나 funcs['minus']를 리턴하기 위한겁니다.
          그렇게 리턴된 함수를 실제 사용하기 위해 뒤에 인자 리스트를 ()를 붙입니다.
          cal 함수는 인자를 하나만 받습니다.
          대화보기
          • 소라김
            콜백부분에 return값에 의해 배열이 재배치되는 부분이 많이 헷갈려요 ㅠㅠ 댓글에서도 이 부분을 많이 헷갈리시는거같은데 명확하게 정리된 완료버전이 있음 더 좋을거같아요! 그래도 덕분에 공부에 좀 더 진전이 나아가는 느낌이네요. 늘 감사합니다.
          • 너나
            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));

            cal이라는 함수안의 mode라는 인자가 들어가는 것은 압니다. funcs라는 객체안의 key값인 plus와 minus가 함수로
            사용된것도 이해가구요
            하지만
            첫번째 질문 : 이부분 "return funcs[mode];" funcs라는 객체에 []가 왜 사용된건가요?
            두번째 질문 : 함수 cal인자가 cal(A,B)이런 형태로 들어가야하는것인데 ,cal('plus')(2,1)이런 형태를 띄는 이유가 무엇인가요?
            설명부탁드립니다
          • cse7600
            콜백

            jquery를 이용하려면,
            head 사이에
            <script src = "//code.jquery.com/jquery-1.11.0.min.js"></script>
            이렇게 넣어주면 된대 !


            $.get(url,url로 불러온 데이터를 이용해서 하려는 행동(함수),저장되는 데이터 형태);


            그리고 $는 jquery 호출?하는 기호 ? 함수래
            크 어렵구만.
          • cse7600
            180912
          • 제가생각하는답
            제 생각으로는 객체를 이용하긴 하지만, 그 속에는 함수를 호출하는 부분도 있기 때문에
            함수호출하는 부분을 생각하면 코드를 객체명['키값'](함수의 매개변수); 의 형식이 되어야하기때문에
            객체명['키값'].키값(함수의 매개변수); 형식은 어긋나므로 실행이 안되는것이라 생각되네요

            alert부분을 자세히 뜯어보면
            크게 보면 cal( )이라는 함수가 덮고있고,
            세부적으로보면 func[mode](매개변수);의 형식이 안에 들어가 있기때문에
            질문하신분의 생각에는 앞부분인 func[mode]부분인 객체호출에만 초점이 맞춰계시지만,
            뒷부분까지 본다면 매개변수를 가지고있는 함수호출 부분이 있기때문에
            func[mode].plus(2,1)은 문법적으로 틀린것이라 생각됩니다.

            개인적으로 뜯어보고 생각해보다가 생각난 부분이라 틀릴 수 있지만
            조금이나마 다르게 생각해볼 수 있는 기회는 되셨기를..
            대화보기
            • / 계속 보기 /

              감사합닏. 계속 봐야 할 영상.. 내 머리가 이리도 멍충했는가..ㅠㅠㅠ
            • moon
              정말 주옥같은 중요한 개념들을 알기 쉽게 설명해 주십니다.
              대단히 감사합니다.
            • ohaeyoon@gmail.com
              감사합니다.
            • hyuna
              오랜만에 다시 보니 이해가 더 잘가는? 느낌이에요.
              콜백함수 하면 어렵게만 생각했는데, 내장 메소드의 인자로 사용자가 함수를 만들어서 얼마든지 활용할수 있다는 개념이 맞는지요?
            • anomyous
              funcs.plus() 나 return funcs.minus() 는 함수가 있지만 funcs.mode() 라는 함수는 funcs 객체에서 존재하지 않기 때문에 오류가 날껍니다.
              그래서 객체에서 배열 형식으로 변수를 입력받아 함수를 지정할 수 있게 하려는 것 같습니다.
              대화보기
              • 공명제갈
                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));


                여기서 이부분으로 표시한 부분을 return funcs.mode 로 하면 안되는데 혹시 어떤이유때문에 그런것인가요??ㅠㅠ
                초보라 아시는분 있으시면 쉽게 설명해주시면 감사하겠습니다.
                제가 공부한 바로는 a객체의 b키값 에서
                a['b']로 접근하는 것과 a.b로 접근하는게 같다고 생각하고 있었는데 아닌가요?
              • 안장호
                강의자료 감사합니다~! ^^
                그리고 아래에 선택정렬(?)애 대해 설명 해 주신 '지나가다가'님께도 감사드립니다~! ^^
              • 히스토
                감사합니다
              • 듀티프리
                좋아요. 감사합니다.
              • 코딩잘하고싶어요 ㅎ
                후반에 멍 때릴 뻔했습니다. ㅠㅠ 난이도는 조~금 어렵지만 그만큼 풍부한 내용이네용 ^^
              • 김진홍
                감사합니다~~
              • 박재현
                4/3까지 공부
              • 박인호
                12-13
                수강완료.
              • Jupi
                콜백함수 - 함수가 다른 함수의 인자로 사용됨으로써 그 함수의 내용을 완전히 바꿀 수 있는것.
                비동기(Asynchronous) - 요청에 처리 완료와 관계없이 응답한다. 이후 운영체제에서 응답할 준비가 되면 응답한다.

                이걸 좀 머리에 그려지도록 이해할려면, jQuery를 언능 배워야 겠군요. ㅎㅎ

                그리고, 밑에 정렬 알고리즘을 찬찬히 설명해주신 지나가다가님 고맙습니다!
              • 고스트프리
                감사합니다.
                대화보기
                • 고스트프리
                  진행중
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기