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. seaWater
    2021. 9. 28. 완료
  2. 완료
  3. labis98
    20210821 good!!!
  4. 드림보이
    수강완료했습니다...
  5. GelandeWagen
    210704 2/4
  6. 낭만고양이
    수강완료
  7. Amousk
    좋은 강의 감사합니다.
  8. 잘봤습니다. 근대 모르겠습니다.
  9. 잘모르겠어용 그냥 보고 있슴다...ㅎㅎ
  10. 앙냥냥
    2021.04.06 봐씁니다 ~~ 콜백.. 어렵따.. . ㅇ<-<
  11. 강준원
    A callback is a function passed as an argument to another function This technique allows a function to call another function A callback function can run after another function has finished

    한국어
    콜백은 다른 함수에 대한 인수로 전달되는 함수입니다 이 기술을 통해 함수는 다른 함수를 호출할 수 있습니다 콜백 함수는 다른 함수가 완료된 후에 실행될 수 있습니다

    https://www.w3schools.com......asp
  12. gf0308
    깔끔하고 명료한 정리에 콜백 이란 명명에 대해 더욱 이해가 되었네요
    멋진 정리 감사합니다
    대화보기
    • gf0308
      콜백의 개념과 콜백함수의 이용법, 비동기 통신에 이르기까지
      정말 많이 배울 수 있었습니다
      정말 감사합니다 선생님
    • 함수는 인자로서 활용가능
    • 주니어개발자
      1급 객체로 분류되는 함수의 의미로 시작해 콜백 기법을 사용하는 이유까지....
      그리고 기법이 사용되는 실례로 라이브러리의 내장 메서드 사용 시,
      비즈니스 로직 처리 부분을 사용하는 사용자(개발자)에게 처리를 위임하는 예에서
      무의식적으로 습관적으로 사용하던 ajax 코드를 이렇게 바라볼 수 있구나.....
      정말 정말 유익했습니다.
      이런 기법들을 콜백을 그동안 사용하고 있었지만 왜 콜백이란 이름을 붙였을까란 근본적인 의미부터 해소하지 못했었는데 왜 그렇게 명명했는지 그런 연유를 추론해볼 수 있고 명확하게 내것이 된 느낌입니다!

      메서드의 인자로 전달하는 함수를 가지고
      메서드 처리 흐름에서 인자로 넘겨받은 다시 함수가 호출되서(callback)
      일련의 처리의 위임하도록 하고, 이 처리 결과에 따라 메서드의 동작방법을 달리 할 수 있기 때문에
      콜백이란 이름을 붙였구나라고 나름 생각해봅니다 ㅎ
    • psyless
      20201201
    • 코군
      2020.11.30 처리의 위임부터 다시보기
    • 김재엽
      2020.11.30 처리의 위임부터 다시 보기
    • 돌돌시레
      어렵네요...
    • 강승
      감사합니다.
    • 박병진
      감사합니다. 2020.10.23
    • 20201012 완료

      콜백부터 다시 한 번 시청해보기
    • 코딩지니어스
      20201011 완료
    • Yongbeom Kwon
      완료
    • 누누
      20.08.04완료
    • 김준석
      20.07.28 학습완료
    • 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 진행중
          여긴 다시 봐야할듯
        • 코딩중독
          너무 어려워요ㅜㅜ
        • tnwls
          ㅇㅘㄴ료
        • ironia
          콜백 함수의 개념 이해 감사합니다~^^
        • 뿡뿡팡야
          완료
        • 한강
          좋은 강의 항상 감사합니다.~!!! 200312
        • js극혐
          인간적으로 너무 어렵습니다 ㅋㅋㅋ
        • 꽁삼날치
          3/4부터 보기
        • moleskindiary@gmail.com
          감사합니다!
        • 현수
          비동기 난이도가 꽤 있네요 ㅠㅠ 그래도 너무 감사합니다.
        • 굼벵이
          완료
        • 오현주
          2019.12.18 수강
        • 감피이스
          감사합니다. 그 부분이 이해가 안 가서 계속 같은 영상 보고 있었는데 덕분에 약간 이해하고 넘어갑니다.
          대화보기
          • 홍주호
            20191020 완료
          • Jesse
            콜백에 대해서 헛갈리시는 분이 많으신 것 같습니다.

            이것은 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
            잘 보았습니다. 감사합니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기