Languages/Java Script

[Js] 값으로서의 함수와 콜백 | 콜백 | 비동기 처리

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

상업적인 용도가 아닌, 개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

값으로서의 함수

JavaScript에서는 함수도 객체다. 다시 말해서 일종의 값이다.

(어떠한 값을 변수에 담을 수 있다. 함수 또한 변수에 담을 수 있다. 그렇기 때문에 함수도 일종의 값이 되는것이다.)

거의 모든 언어가 함수를 가지고 있다. JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

다음 예제를 통해서 그 의미를 알아보자.

<script>

	function a(){}
    //var a = function() {}

</script>

위 두 코드는 같은 의미이다.

위의 예제에서 함수 a는 변수 a에 담겨진 값이다. 또한 함수는 객체의 값으로 포함될 수 있다.

<script>
    a = {
        b:function(){
        }
    };
</script>

b는 일종의 변수의 역할을 하는 것이다. 이런 역할을 하는 것을 속성(property)라고 한다.

b는 key , 그의 값은 function이라고 할 때,이러한 function 즉 함수를 메소드 라고 하는 것이다.

일반적으로 정의된 함수는 '함수'라 하고, 이렇게 위와 같이 객체의 속성 값으로 담겨진 함수를 "메소드(method)"라고 한다.

<script>
    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));
</script>

11행을 실행하면 함수 increase와 값 1이 함수 cal의 인자로 전달된다.

함수 cal은 첫번째 인자로 전달된 increase를 실행하는데 이 때 두번째 인자의 값이 1을 인자로 전달한다.

함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.

위 부분이 이해가 잘 안된다면 아래 영상을 참고하길 바란다.

www.youtube.com/watch?v=zGBkPTwydeg&feature=emb_logo

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

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
  function cal(mode){ //mode는 cal함수를 호출할 때 함께 값 전달 해줘야함
  	var funcs = {//funcs는 객체
  		'plus' : function(left, right){return left + right},
  		'minus' : function(left, right){return left - right}
  	}
  	return funcs[mode];
  }
  alert(cal('plus')(2,1)); // cal함수에 인자 plus를 주고, 그 안에 객체 중 plus의 함수를 호출 -> return 2+1 = 3
  alert(cal('minus')(2,1)); // 마찬가지임. minus이므로 2-1 =1 출력
</script>


</body>
</html>

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

<script>
    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);
</script>

"변수, 매개변수, 리턴 값 등의 용도로 사용되는 것을 프로그램에서는 first-class citizen(object ..)라고 부른다."

콜백

값으로써의 함수와 밀접한 관계가 있다.

처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다.

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.

인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

아래 코드를보면, 원래 기본적으로 동작하는 sort는 문자열로 비교가 된 것인지 이상한 순서대로 출력이 된다.

제대로 정렬을 하기 위해 코드를 바꾸어 보면 아래와 같다.

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	var numbers = [20,10,9,8,7,6,5,4,3,2,1];
	var sortfunc = function(a,b){//a,b는 위 숫자를 비교할 인자.
		if(a > b){
			return 1;
		}else if(a < b){
			return -1;
		}else {
			return 0;
		}

	}
	console.log(numbers.sort(sortfunc));
</script>


</body>
</html>

결과는 아래와 같다.

if문으로 return값을 구분 지어 주는 것만으로도 sort()가 기준에 따라 값을 비교해주는 것이다.

그렇다면 더욱 간결한 코드를 만들어 보자!

<!DOCTYPE html>
<html>
<head>
	<title>haha</title>
</head>
<body>
<script type="text/javascript">
	var numbers = [20,10,9,8,7,6,5,4,3,2,1];
	var sortfunc = function(a,b){//a,b는 위 숫자를 비교할 인자.
	return a - b; //정렬을 역순으로 하고 싶다면 b-a를 해주면 된다.
	
	}
	console.log(numbers.sort(sortfunc));
</script>


</body>
</html>

숫자가 아니라 문자라 하더라도, 함수로 유입되는 인자들을 각자의 정렬의 기준에 따라 음수,양수,0으로 나누어주면

자바스크립트는 그 기준에 따라 정렬을 할 수 있다.

위 맥락에서 sortfunc라는 함수가 바로 "콜백함수"가 되는 것이다.

값으로써 함수를 사용할 수 있기 때문에 값 전달로 인해 완전히 그 값을 바꿀 수 있는 것이 바로 "콜백"이다.

콜백이 가능한 것은 자바스크립트의 함수가 "값"이기 때문에 가능한 것이다.

콜백은 비동기 처리에도 매우 유용하게 사용된다.

비동기 처리

시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을

콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

자바스크립트에서 이러한 비동기처리에 사용되는 것을 Ajax라고 한다.(asynchronous javascript and xml)

이 기술로 인해, 웹은 단순히 문서에서 벗어나서 다양한 동작(클릭 시 새 웹 페이지가 생성되는 것..)을 할 수 있는 애플리케이션으로 발전할 수 있었다.

다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.

datasource.json.js

<script>
    {"title":"JavaScript","author":"egoing"}
</script>

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>

현재 강의를 듣는 동안에는 json과 ajax jquery등을 100% 이해할 필요 없다.

www.youtube.com/watch?v=NDFjwybbong&feature=emb_logo

'Languages > Java Script' 카테고리의 다른 글

[Js] arguments \| 배열 \| javascript 배열 \| 매개변수 (0)	2021.02.04
[Js] 클로저 \| 외부함수, 내부함수 (0)	2021.02.04
[Js] 함수지향 \| javascript 함수 \| 유효범위 \| 지역변수 전역변수 (0)	2021.02.04
[Js] 정규 표현식 \| 컴파일? \| 정규표현식 리터럴 (0)	2021.02.04

Contents

새소식

인기 검색어

[Js] 값으로서의 함수와 콜백 | 콜백 | 비동기 처리

값으로서의 함수

콜백

처리의 위임

비동기 처리

'Languages > Java Script' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바