Callback / Promise

callback

다른 함수의 인자로 이용가능한 함수

이벤트에 의해 호출되어지는 함수 

 

다른 함수의 인자로 이용가능한 함수

function add (x, y, callback){
	let qqq = x * y
	callback(qqq)
 // result(data) 실행됨
}

function result (data) {
	console.log(data, "콜백함수 실행")
}

add(5, 10, result)


// 50  콜백함수 실행

위의 함수에는 인자로 x, y, callback  이 들어가 있고 그 인자에는  5, 10, result 함수가 들어가 있습니다.

add 함수를 실행시키면  인자로 들어간 x,y 가 실행이 되고 qqq에는 50이 들어가고   아래 result 함수가 실행되고 data 안에는 50이이라는 값이 담기고 console.log로 찍어보면 아래 주석된 부분처럼 값이 나온다 

 

 

이벤트에 의해 호출되어지는 함수 

 우리가 아는 이벤트는 onClick, onChange등이 있다.

 

 

HTML에서 함수 호출

<button onclick="handleEvent()">Event</button>

• 함수를 호출하는 형태

React에서 함수 호출

<button onClick={handleEvent}>Event</button>

• 함수 자체를 전달
• React에서 함수를 호출하는 형태로 작성하게되면 렌더링하는 단계에서 함수가 호출되어, onClick에는 함수를 호출한 결과가 담기게 된다. 함수의 반환값이 없다면 undefined가 담기게 된다.

이러한 기능을 하는 callback 함수를 2가지로 나눌수 있다

동기적 함수와 비동기적 함수로 

 

동기(synchronous)적 방식: 현재 실행 중인 코드가 완료된 후 다음 코드를 실행 위에서부터 하나하나 코드가 실행됨 

비동기(asynchronous)적 방식: 현재 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가서 실행, 위의 코드가 실행되는 상태에서 다음 코드도 같이 실행됨 

 

자바스크립트는 한 번에 하나의 코드만 실행할 수 있습니다.(Single-Thread) 하지만 코드를 실행하고 해당 결과를 기다리지 않고 다음 코드를 실행합니다.(Non-Blocking)

이부분에서 event-loop에 대해서 찾아보았는데 아직은 아닌거 같다 좀더 나중에 찾아보자 

 

 

비동기적callback

비동기적 콜백 함수의 예로 setTimeout 를 볼수 있다 

console.log('first');

setTimeout(function() {
	console.log('second');
}, 3000);

console.log('third');

//setTime함수를 실행하면 지정해준 시간뒤에 실행해주는 함수여서 결과값이 밑의 예제처럼 나온다 
// first
// third
// second

//비동기적으로 함수가 실행하는걸 알수있다 동기적이면 위에서부터 함수가 실행해서 아래 처럼 결과값이 나올것이다 
//그러나 setTime 함수가 있어서 위의 순서 처럼 나오는걸 알수 있다 
// first
// second
// third

Promise

비동기 처리에 사용되는 객체로

어떤 데이터를 요청하는 함수가 있다고 보고 

const url = 'https://koreanjson.com/posts/1';

function getData() {
  return new Promise(function (resolve, reject) {
    axios.get(url).then(function (response) {
      if (response) {
        resolve(response.data);
      }
      reject(new Error('Request is failed'));
    });
  });
}

let result = [];
getData()
  .then(function (data) {
    for (let v of Object.values(data)) {
      result.push(v);
    }
    console.log(result);
  })
  .catch(function (err) {
    console.error(err);
  });

new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 resolve 또는 reject함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 then또는 catch로 넘어가지 않습니다.

따라서 비동기 작업이 완료될 때 resolve 또는 reject를 호출하는 방법으로 비동기 작업의 동기적 표현이 가능해집니다. resolve 는 보통 성공했을 때 반환값을 의미하고 reject 는 보통 실패했을 경우를 나타냅니다.

 

시간이 얼마나 걸리든 상관없이 약속한 결과를 내보내겠다는

 

 

 

출처

https://www.notion.so/dingco/6-Node-eef97568911549aaad334ddc3af659f4#b1e2a75e826346588afa18c2e4c2db14