함수의 용도
자바스크립트에서는 함수도 객체이다. 즉, 함수도 일종의 값이라는 것이다.
다른 언어에서도 모두 함수를 가지고 있지만 자바스크립트의 특징은 함수가 값이 될 수 있다는 점이다.
(값인지 확인하려면 변수에 할당해보면 된다! 할당 되면 값!)
콜백이란?
어떠한 함수가 수신하는 인자가 함수인 경우를 콜백이라고 한다.
array.sort()
이 함수는 정렬을 하는 함수이다. 하지만 실제로 이 함수에 배열을 넣으면 제대로 동작하지 않는 것을 볼 수 있다.
var nunbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
console.log(numbers.sort());
//1, 10, 2, 20, 3, 4, 5, 6, 7, 8, 9위처럼 한자리 수에서는 제대로 동작하지만 두자리수 이상인 경우 문자열로 처리되어 맨 앞자리만 비교를 하는 것을 볼 수 있다.
array.sort()의 매개변수에 함수를 넣어 array.sort(function) 형식으로 진행한다면, 이 함수는 이렇게 동작한다.
sort() 함수는 비교 함수의 반환 값에 따라 정렬 순서를 결정합니다. 비교 함수가 반환하는 값이 -1, 0, 1의 의미는 다음과 같습니다:
|||
|
-1: 첫 번째 값(a)이 두 번째 값(b)보다 앞에 와야 한다는 뜻입니다.
1: 첫 번째 값(a)이 두 번째 값(b)보다 뒤에 와야 한다는 뜻입니다.
0: 두 값(a와 b)이 같다, 즉 서로의 순서를 변경할 필요가 없다는 뜻입니다.
var nunbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var sortfunc = functiona(a,b) { // 두개의 인수 받아와서 비교 후 정렬
if (a > b) {
return 1;
} else if (a < b) {
return -1;
} else {
return 0;
}
}
console.log(numbers.sort(sortfunc));
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20리턴 값에 따라 sort()라는 메소드가 a와 b중 어떤 것이 더 큰지를 알 수 있게 되고 정렬이 가능하게 된다.
더 간단히 하면
var nunbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var sortfunc = functiona(a,b) { // 두개의 인수 받아와서 비교 후 정렬
return a - b; // a > b 양수 / 같으면 0 / a < b 음수
}
console.log(numbers.sort(sortfunc));
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20➡️ 콜백 함수 사용
값으로서 함수를 사용했기 때문에 오리지널 함수(sort())의 동작 방법을 완전히 바꿀 수 있다.
비동기 콜백과 Ajax
동기적 vs 비동기적
예를 들어 내가 하나의 글을 작성하여 10000명의 사용자에게 이메일을 보낸다고 가정해보자.
동기적
글 작성 ➡️ 이메일 발송 ➡️ 작성 완료
이렇게 모든 작업을 순서대로 처리하는 것이다.
모든 작업이 순차적으로 처리되기 때문에 한 작업이 끝나기 전까지 다음 작업을 진행할 수 없다.
비동기적
글 작성 ➡️ 이메일 발송 예약 ➡️ 작성 완료
이메일 발송을 예약을 걸어두고 다른 업무를 처리한다.
특정 작업이 완료되기 전에 다른 작업을 진행할 수 있도록 예약하거나 대기 상태로 두어 처리 효율성을 높인다.
💡 동기 vs 비동기
비유적으로 보면, 동기적 방식은 줄을 서서 기다리며 하나씩 일을 처리하는 것이라면,
비동기적 방식은 일을 맡기고 그 일이 끝나기를 기다리지 않고 다른 일을 처리하는 방식이다.
