📓 JS 콜백 함수란
매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것.
function sayHello(name, callback) { // 매개변수로 함수 객체를 전달
const words = '안녕하세요 내 이름은 ' + name + ' 입니다.';
callback(words); // 매개변수의 함수(콜백 함수) 호출
}
sayHello("magnus", function printing(name) { // pringting이라는 함수 이름 없이 익명으로 넣어주는 것도 가능하다.
console.log(name); // 안녕하세요 내 이름은 인파 입니다.
});sayHello 함수를 호출할 때 매개변수로 printing 함수를 넘겨주었다.
sayHello 함수를 실행되면 callback 매개변수를 호출한다.
위와 같은 경우처럼 파라미터로 함수 자체를 넘겨주고 호출하는 작업을 하는 것이 콜백 함수이다.
🏷️ 익명 함수
함수의 내부에서 매개변수를 통해 실행되기 때문에 이름을 붙이지 않아도 되기 때문에 코드의 간결성을 위해 익명 함수를 사용하기도 한다.
함수 이름의 충돌 방지를 위해 사용하기도 한다.
let add = 10; // 변수 add
function sum(x, y, callback) {
callback(x + y); // 콜백함수 호출
}
// 이름 있는 콜백함수 작성
sum(1, 2, function add(result) {
console.log(result); // 3
});
// 변수 add가 함수 add가 되어버린다.
console.log(add);같은 스코프 내에 이미 같은 이름의 식별자가 있다면, 콜백함수의 이름이 기존의 식별자를 덮어쓰게 된다.
변수 add와 콜백함수 add 로 이름이 겹쳐버렸다.
🏷️ 화살표 모양 콜백
function sayHello(callback) {
var name = "Alice";
callback(name); // 콜백 함수 호출
}
// 익명 화살표 콜백 함수 + 익명 함수
// 원래는 sayHello(function(name)
sayHello((name) => {
console.log("Hello, " + name);
});더 간결성을 얻기 위해 익명 함수 + 화살표 함수를 사용해서 콜백 함수를 만들 수 있다.
🏷️ 함수의 이름 넘기기
function introduce (firstName, lastName, callback) {
var fullName = firstName + lastName;
callback(fullName);
}
function say_hello (name) {
console.log("안녕하세요 제 이름은 " + name + "입니다");
}
function say_bye (name) {
console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}
introduce("Hong", "길동", say_hello);
// 결과 -> 안녕하세요 제 이름은 홍길동입니다
introduce("Hong", "길동", say_bye);
// 결과 -> 지금까지 홍길동이었습니다. 안녕히계세요introduce 함수를 실행할 때 다른 함수를 매개변수에 넣어서 전달해주면 다른 실행 결과를 출력할 수 있다.
📓 콜백 함수 활용
🏷️ 이벤트 리스너
특정 이벤트가 실행됐을 때 콜백 함수를 실행하는 메서드다.
다음은 버튼을 클릭했을 때 콜백 함수로 등록한 코드다.
let button = document.getElementById("button"); // id가 button인 태그를 선택
// 버튼에 클릭 이벤트 리스너를 추가
button.addEventListener("click", function () { // 콜백 함수
console.log("Button clicked!");
});🏷️ 고차 함수
forEach로 콜백 함수를 전달.
let numbers = [1, 2, 3, 4, 5]; // 배열 선언
let doubled = []; // 빈 배열 선언
// numbers 배열의 각 요소에 대해 콜백 함수 실행, 익명 함수
numbers.forEach(function (num) {
doubled.push(num * num); // 콜백 함수로 각 요소를 두 배로 곱해서 doubled 배열에 추가
});
console.log(doubled); // [ 1, 4, 9, 16, 25 ]고차 함수에는 forEach(), .map(), .find(), .filter() 등이 있다.
.map()
배열 안에 있는 데이터들에 함수를 적용시켜 반환한다고 생각하면 된다.
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const smilmingDays = days.map(day => `😃 ${day}`);
console.log(smilmingDays);
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const addsmile = day => `😃 ${day}`;
const smilmingDays = days.map(addsmile);
console.log(smilmingDays);
// [ '😃 Mon', '😃 Tue', '😃 Wed', '😃 Thus', '😃 Fri' ].filter()
주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
map과 filter 차이
var testArray = [0,1,2,3,4,5];
testArray.filter(function(c){ return c <= 2; }); // [0, 1, 2]
testArray.map(function(c){ return c <= 2 }); // [true, true, true, false, false, false]
var testArray2 = [0,1,2,3,4,5];
testArray2.filter(function(c){ return c * 2; }); // [1, 2, 3, 4, 5]
testArray2.map(function(c){ return c * 2 }); // [0, 2, 4, 6, 8, 10]map의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 한다. 반면에 filter는 boolean이 true인 값만 가지고 배열을 만드는 역할을 한다.
따라서 map에서 c<=2이면 boolean을 담고 filter면 true인 값만 배열에 담아서 출력한다.
testArray2에서 filter의 경우엔 c2를 했을 때 모두 참이다. 하지만 0은 2를 해도 0이므로 false.
그래서 [1,2,3,4,5]를 출력!!!
map일 때는 c*2를 계산하여 모두 배열에 담기 때문에 [0, 2, 4, 6, 8, 10] 출력!!!!
🏷️ 타이머 실행 함수로 사용
setTimeout이나 setInterval로 타이머를 용도를 위해 사용.
setTimeout : 일정 시간이 지난 후에 함수를 실행하는 방법
setTimeout(function () {
console.log("Time is up!"); // 콜백 함수로 콘솔에 메시지 출력
}, 3000); // 3초 후에 콜백 함수 실행.
const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);
// 5초 후에 실행되지만 clearTimeout으로 아무것도 출력되지 않음.setInterval : 일정 시간 간격을 두고 함수를 실행하는 방법
setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000); // 0~9 의 수를 2초마다 무작위로 계속 생성
setInterval(() => console.log(new Date()), 2000);
//현재 시간을 2초마다 출력
// clearInterval()로 코드 중단 가능.Ajax 결과값을 받을 때도 사용한다는데 Ajax는 아직 배우지 않았으니 패스
📓 콜백 함수 주의점
🏷️ this를 사용한 콜백함수
콜백 함수에서 this도 전역 객체.
Rerence
