-
[JAVASCRIPT]5. 함수에 대해서IT&컴퓨터공학/Javascript 2020. 4. 10. 00:10
Javascript 에서는 함수도 객체다 . 다시 말해서 함수도 일종의 값 이라고 볼 수 있다.
값의 특징 :어떠한 변수에 담을 수 있다.
따라서 함수도 어떠한 변수에 담을 수 있다.
자바스크립의 함수가 다른 언어와 다른 점이 바로 이것이다.
//방법 1 function a(){ } //방법 2 var a = function(){ // 이것이 가능한 이유 : 함수가 값이므로 }a={ // a 는 객체 {} 로 이루어져 있으므로 b:function(){ // b는 key , function 은 value // 객체 안에 정의되어 있는 함수는 '메소드'라고 부른다 ! } }콜백이란?
어떠한 함수가 수신하는 인자가 함수인경우
함수가 함수를 수신하고, 그 함수가 또 함수를 수신하고 ·······
var numbers=[20, 10, 9,8,7,6,5,4,3,2,1]; numbers.sort(); // 함수앞에 . 이 있다는 것은 numbers가 객체라는 뜻! 정확히는 배열 객체 // 이러한 sort는 javascript가 기본으로 제공하는 메소드라서 내장객체, 빌트인객체 라고함 ----------------------------------------------------------------------- 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]순차적인 진행 : 동기적 처리
비 순차적인 진행 : 비동기적 처리
콜백은 비동기처리에서도 유용하게 사용한다.
Ajax는 웹이라는것이 단순히 문서에서 벗어나서 에플리케이션으로 발전하는 결정적인 기술을 제공함 - 비 동기적 제어
만약 동기적 처리였다면,
웹브라우져가 웹 서버에 정보를 요청했을 경우, 웹서버가 아주 멀고 정보양이 너무 많아서 모든 정보를 가져오는데 오래걸릴경우 웹브라우져 자체가 freezing 된다 . 왜냐면 모든 정보를 받아올때까지 기다려야 하므로
function getData() { var tableData; $.get('https://domain.com/products/1', function (response) { tableData = response; }); return tableData; } console.log(getData()); // undefined<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> // jquery 사용하자. </head> <body> <script type="text/javascript"> $.get('./datasource.json.js', function(result){ // $.get : jquery 가 제공하는 특수한 개체 $ 가 제공하는 메소드 get 사용 //get 이라는 메소드는 첫번째 인자로는 url 을, 두번째 인자로는 어떠한 함수를 // 이 함수는 이 get이라는 메소드가 url을 가져오고나서 이 함수를 호출함 console.log(result); }, 'json'); </script> </body> </html>
위와 같은 ajax 코드가 있을때
getData 함수는 $.get 메소들를 통하여 'https://domain.com/products/1' 에서 데이터를 수신해 온다.
수신한 데이터를 2번째 줄에서 정의한 tableData 변수에 할당하고, tableData 를 리턴한다.코드의 9번째 줄에서 getData 함수를 실행하면 'https://domain.com/products/1' 를 통해 받아온 데이터가 콘솔에 찍힐것이라 예상되지만, 콘솔에는 undefined 가 찍힌다.
이는 $.get 메소드는 비동기적 메소드이기 때문에 발생하는 문제이다.
코드가 실행되다 $.get 메소드를 만나면 $.get 메소드를 다른 프로그램에 위임하고 다음코드인 tableData 를 리턴해 버린다. 즉, tableData 에는 아무런 값도 할당되지 않은 채로 함수가 끝나버리므로 콘솔창에는 undefined 가 찍히는 것
이러한 문제를 콜백함수를 통해 해결할 수 있다.
function getData(callbackFunc) { $.get('https://domain.com/products/1', function (response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function (tableData) { console.log(tableData); // $.get()의 response 값이 tableData에 전달됨 });위의 코드에서는 getDate 함수를 정의 할 때 파라메터로 callback 함수를 주었다.
그리고 파라메터로 지정된 콜백함수는 $.get 메소드 안에서 실행 되고
$.get 메소드는 서버에서 받은 데이터를 콜백함수의 인자로 넘겨준다.
7번째 줄에서 getData 를 실행할 때 인자로 익명함수를 주었는데,
그 익명함수는 전달받은 인자를 콘솔에 표시하는 함수입니다.
(콜백함수를 실행단계에서 정의)
콜백함수를 통해 $.get 메소드의 비동기적 처리로 인한 문제를 해결할 수 있게 되었다,
즉, 콜백함수를 사용하기 이전의 코드는 데이터가 준비되지 않은 상태에서 함수가 끝나기 때문에 원하는 대로 동작하지 못하지만, 콜백함수를 사용하면 필요한 데이터가 다 준비된 시점에서만 원하는 동작을 수행하도록 할 수 있다.
'IT&컴퓨터공학 > Javascript' 카테고리의 다른 글
[javascript]7. 객체 지향 프로그래밍이란 ? (0) 2020.04.12 [JAVASCRIPT]6. arguments 란? (0) 2020.04.12 [JAVASCRIPT]4. UI 와 API 에 대해서 (0) 2020.04.03 [JAVASCRIPT]3. 모듈(module) 과 라이브러리(library) (0) 2020.04.03 [JAVASCRIPT]2. JAVASCRIPT(자바스크립트) 의 객체 (0) 2020.04.01 댓글