📌
Javascript 생활코딩
  • 자바스크립트
  • 자바스크립트 기본
    • 숫자와 문자
    • 변수
    • 주석, 줄바꿈과 여백
    • 조건문 - 기본
    • 조건문 - 비교연산자
    • 조건문 - 논리연산자
    • 조건문 - boolean의 대체재
    • 반복문 - 기본 (while,for)
    • 반복문 - 제어(break, continue)
    • 반복문 - 중첩
    • 함수
    • 배열 - 기본
    • 배열 - 조작, 제거 및 정렬 메서드
    • 객체 - 기본
    • 객체 - 반복문
    • 모듈
    • UI와 API 그리고 문서보는 법
    • 정규표현식
  • 함수지향
    • 유효범위
    • 값으로서의 함수와 콜백
    • 클로저
    • arguments
    • 함수의 호출
  • 객체지향
    • 객체지향 프로그래밍
    • 생성자와 new
    • 전역객체
    • this
    • 상속
    • prototype
    • 표준 내장 객체의 확장
    • Object
    • 데이터 타입
    • 참조
  • 패턴
    • 재귀함수
Powered by GitBook
On this page
  • 값으로서의 함수
  • 콜백
  • 콜백 - 처리의 위임
  • 콜백 - 비동기 처리

Was this helpful?

  1. 함수지향

값으로서의 함수와 콜백

값으로서의 함수

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

콜백

콜백 함수: sortfunc

콜백 - 처리의 위임

값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있습니다. 값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있습니다. 인자로 전달된 함수 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>
Previous유효범위Next클로저

Last updated 4 years ago

Was this helpful?