22.05.30
💢 값으로서의 함수
JavaScript에서는 함수도 객체입니다. 즉, 함수도 일종의 값이라는 말입니다.
function a() {}위의 예제에서 함수 a는 변수 a에 담겨진 값입니다. 또한, 함수는 객체의 값으로 포함될 수 있습니다.
a = { b:function(){ } };이렇게 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.
함수는 값이기 때문에 아래 예제처럼다른 함수의 인자로 전달 될 수도 있습니다.
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));
alert(cal(increase, 1));을 실행하면 함수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)); // 3 alert(cal('minus')(2,1)); // 1return funcs[mode]는 function(left,right) {return left + right;}를 리턴해주는 역할을 합니다.
배열의 값으로도 함수를 사용할 수 있습니다.
var process = [ function(input){ return input + 10;}, // 11 function(input){ return input * input;}, // 121 function(input){ return input / 2;} // 60.5 ]; var input = 1; for(var i = 0; i < process.length; i++){ input = process[i](input); } alert(input); // 60.5함수는 값이기 때문에 값을 저장하는 컨테이너인 배열에도 저장할 수 있는 것입니다. 변수, 매개변수, 리턴값으로 사용될 수 있는 데이터를 first-class citizen, first-class object, 일급 객체라고 합니다.
💤 콜백
처리의 위임
값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있습니다. 값으로 전달된 함수는 호출 될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있습니다. 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 됩니다.
funotion 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]
💦 비동기(async)처리
ajax는 제이쿼리의 비동기 처리입니다. 제이쿼리로 웹 서비스를 제공할 때 ajax를 빼놓을 수 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이 때 ajax통신으로 해당 데이터를 서버로부터 가져올 수 있습니다.
function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined여기서 $.get()이 ajax통신을 하는 부분입니다.
https://domain.com 에 HTTP GET 요청을 날려 product를 요청하는 코드입니다.
즉, '지정된 url에 데이터를 하나 보내주세요' 라는 요청을 보내는 것입니다.
그렇게 받아온 데이터는 response 인자에 담깁니다. 그리고 tableData=response; 코드로 받아온 데이터를 tableData라는 변수에 저장합니다. 결과는 undefined입니다.
그 이유는 $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문입니다. 따라서, getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 underfined를 출력합니다.
이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기처리입니다. 자바스크립트에서 비동기 처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문입니다. 위에선 간단한 요청 1개만 보냈는데 만약 100개 보낸다고 생각을 해보면 비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고를 반복, 아마 웹 애플리케이션을 실행하는 수십분은 걸릴 겁니다.
