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. 진진리
    2022.05.04 어렵네요. 재수강 예정입니다
  2. 몽글몽글
    같은 메소드를 사용하더라도 함수를 인자로 사용하면 다른 결과값으로 표현 될수있다.
    함수 활용 능력이 좀 올라간거같아요!!
  3. 너구리기린
    2022.04.14 콜백 비동기 처리 재수강 해야겠네요 어렵네요 ㅠㅜ...
  4. 와 ajax로 가져오는 responce 데이터들이 call back 함수로써의 처리였군요! 이미 내가 쓰고 있었다니! 아주 신기하네요. 좋은 강의 감사합니다.
  5. 마스터하자
    2022.01.26 완료
    비동기처리 이해가 잘 안되지만 다시 한번 볼 예정이라
    다시 찾아올게요 일단 마지막 비동기처리는 Skip
  6. 낀찐
    2022. 01. 21 완료
  7. 칸타타
    a 자리가 20 b 자리가 10 이잖아요? (a-b) 계산을 쭉하면

    10, 11, 12, 13, 14, 15, 16, 17, 18, 19 값들이 나오죠 여기까지는 알겠습니다

    작은수부터 차례대로 나열된다고 하셧는데 위에보면 가장작은수가 10부터 시작이고 10의 자리는 20이였으니까

    20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 순으로 정렬되어야 하는것이 아닌가요?
    대화보기
    • 2021.12.15 수강 - 다시 들어야 할 듯
    • 드림보이
      2021.12.08. 값으로서의 함수와 콜백 파트 수강완료
    • GelandeWagen
      ok
    • 풀연
      감사합니다!
    • 어렵네요 ㅠ
    • seaWater
      2021. 9. 28. 완료
    • 완료
    • labis98
      20210821 good!!!
    • GelandeWagen
      210704 2/4
    • 낭만고양이
      수강완료
    • Amousk
      좋은 강의 감사합니다.
    • 짜rr
      잘봤습니다. 근대 모르겠습니다.
    • yogg
      잘모르겠어용 그냥 보고 있슴다...ㅎㅎ
    • 앙냥냥
      2021.04.06 봐씁니다 ~~ 콜백.. 어렵따.. . ㅇ<-<
    • 강준원
      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
    • 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
            감사합니다!
          • 현수
            비동기 난이도가 꽤 있네요 ㅠㅠ 그래도 너무 감사합니다.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기