콜백 함수

콜백 함수(Call back func) :다른 함수에 인자로 전달되어  그 함수의 내부에서 실행되는 함수- 나중에 불려지다.

주의할 점 : 메서드 (메서드 () )이렇게하면 안에 있는 메서드를 즉각 호출하기 때문에 원하는 결과가 안 나온다. 

 메서드명(콜백함수 )  작성 해야 한다. 

콜백 함수의 중요성 : 비동기 처리 가능 , 동기 처리 가능 

동기적 수행 : 한번 하나씩 처리 - 순서대로 (하나가 끝날 때까지 다음작업은  할 수 없다.) = 블록킹 

console.log('작업1');1
print() //console.log('작업2');
console.log('작업3');3
function print(){
    console.log('작업2');2
}
//자바 스크립트는 동기적으로 처리하는 프로그램중  하나인데 선언문들을 코드 제일 상단에올려 버린다 
- 호이스팅

비동기 수행 : 해당 작업을 끝날때 까지 기다리지 않고 바로 다음 작업을 실행한다. 이것이 블록킹  예방 하는 방법  

console.log('1');
setTimeout(() =>{
    console.log('2');
},3000);// 3초 뒤에 콜백 함수 2를 출력 
setTimeout(() =>{// 비동기식 ㅎ메서드이다 
    console.log('2');
},3000);// 3초 뒤에 콜백 함수 2를 출력
console.log('1');
 결과는 1먼저 3초 뒤에 2 출력

콜백 함수 의 응용 사례

• 서버 요청 처리 
• 이벤트 처리 
• 타이머 함수 

//3화살표 함수를 사용한 콜백 함수 구현 
console.log("==콜백 함수 : 화살표 함수 ");
function callback2(number, callbackFunc , other){// number : 변수 데이터 , callbackFunc 함수
    // number의 값이 짝수인 경우 callbackFunc로 데이터 전달 
    if(number%2 === 0){
        callbackFunc(number);
    }

}
// 이게 화살표 함수 문법 
const print3 = ( even) => {
    console.log(`${even}은 짝수 입니다`);
}
callback2(3,print3,print2);
callback2(4,print3);

function greeToUser(greet){
    const name = "성찬영";//const 상수이다 변하지 않는 값 
    greet(name);
}
function greetKorean(name){
    console.log(`${name}님 안녕하세요`);
}
greeToUser(greetKorean);
function greetEnglish(name){
    console.log(`${name} hi`);
}
greeToUser(greetEnglish);
//부품을 교체하듯이  우리가 원하는 시점에  콜백 함수를 호출할 수 있다.
//비동기 식으로 일을 처리해야 할때 유용하게 쓰이는게 콜백 함수 이다.
setTimeout(function(){
    console.log('hi');

},1000); //1000밀리초 =1초  이렇게 시간을 설정해주면 그시간에  맞쳐 실행된다.

//2)익명 함수를 사용한 콜백 함수 구현 
console.log("==콜백함수 : 익명 함수");
const print2 = function (count) {
    console.log(`${count}번 째 함수 호출`);
}
callback1(print2);

 

// 콜백 함수 예시 
//1) 선언적 함수를 사용한 콜백 함수 구현 
console.log('콜백 함수 선언적 함수');
function callback1(callbackFunc){//call backFunc 매개변수 (함수를 데이터로  전달 받음 )
    for(let i =0 ; i<3; i++){
        callbackFunc(i); // call backFunc(print함수)의 인자로 i 값을 전달 
    }
}

코드 결과

 

 

 내장 함수 :  언어에 기본적으로 내장되어 있는 함수

 

//&1.forEach()
//각 요소에 대해 동이라한 함수를 실행
// : 배열 내부의 요소를 매개 변수로 사용하여 콜백함수를 호출 

console.log('forEach()');
const numbers = [23,41,19,36];
//배열명.forEach(각 요소들에게 적용할 함수 - 콜백 함수);

numbers.forEach(function(value,index,array){
    //모든 요소들에 동일한 기능 적용 
    console.log(`${index+1}번째 요소 ${value}`);
})

//map()
//배열의 각요소에 대해 함수를 적용하고 '새로운 배열을 생성하여 반환'
//콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 생성 
//>>전체 배열의 요소 갯수가 변화가 X
console.log("Map()");
console.log(numbers);
const newNumbers = numbers.map(function(value){
    let square = value*value;
    return square;
});

//&3.filter()
//콜백 함수에서 리턴하는 값이 true인것 들만 모아서 '새로운 배열을 만드는 함수 '
//기존의 배열과 요소의 수가 일치하지 않을 수 도 있다 

const basicArray = [0,1,2,3,4,5];
basicArray.filter(function(value){
    return value %2 ==0;//g해당 조건식이 true인 값만 새로운 배열에 저장 
});
const arrowFilter =basicArray.filter((value) =>{
    return value %2 ===0;
})
console.log(` 원래 배열  ${basicArray}`);
console.log(``);
let cars = ['audi','bmw','volvo','hyundai'];
//1. 전체 배열의 요소를 출력 
cars.forEach((cars) =>{
    console.log(cars);
})

//2전체 배열의 요소를 대문자(영문자)로 변환 
//뮨자열데이터 .to UpperCase()
let carsUppercase = cars.map(cars => cars.toUpperCase());
console.log(carsUppercase);