Callback 이해하기 예제 1번
const fnOne = function(data,fn){
const rel = data * data;
return rel;
}
const fnTwo = function(data,fn){
const rel = data / 2;
return fn(rel);
}
const fnThree = function(data,fn){
const rel = data * 5;
return fn(rel, fnOne);
}
let valueResult = fnThree(4, fnTwo);
console.log(valueResult);Move 1
//첫번째 호출
let valueResult = fnThree(4, fnTwo);
//fnThree 함수로 이동한다.
const fnThree = function(data,fn){
const rel = data * 5;
return fn(rel, fnOne);
}
//fnThree는 다음과 같은 값을 갖는다
const fnThree = function(4,fnTwo){
const rel = 4 * 5;
** return fn(20, fnOne);**
}Move 2
//두번째 호출
**return fn(20, fnOne);**
//fnTwo 함수로 이동한다.
const fnTwo = function(data,fn){
const rel = data / 2;
return fn(rel);
}
//fnTwo는 다음과 같은 값을 갖는다.
const fnTwo = function(20,fnOne){
const rel = 20 / 2;
**return fnOne(10);**
}Move 3
//세번째 호출
**return fnOne(10);**
//fnOne 함수로 이동한다.
const fnOne = function(data,fn){
const rel = data * data;
return rel;
}
//fnOne은 다음과 같은 값을 갖는다.
const fnOne = function(10,fn){
const rel = 10 * 10;
return 100;
}Move 4
fnOne의 2번째 매개변수 fn에는 들어갈 값이 없어 생략되고
rel값 100을 최종 반환하며
console.log(valueResult);은 100이 된다. Callback 이해하기 예제 2번
function first(){
setTimeout( function(){
console.log("반갑습니다");
}, 500 );
}
function second(){
console.log("만나서");
}
function third(){
console.log("안녕하세요?");
}
first();
second();
third();위와 같이 코딩한다면 만나서 안녕하세요? 반갑습니다 순으로 출력된다.
그 이유는 자바스크립트는 동기 방식이기 때문에 비동기처리방식인 setTimeout을 기다려주지 않기 때문이다.
안녕하세요? 가 먼저 출력 되기 위해서는 아래와 작성한다.
function first(){
setTimeout( function(){
second();
console.log("반갑습니다");
}, 500 );
}
function second(){
console.log("만나서");
}
function third() {
console.log("안녕하세요?")
}
first();
third();
second();를 비동기함수 setTimeout에 넣어 실행하면
third()함수가 제일 먼저 실행되는 것을 볼 수 있다.Callback 이해하기 예제 3번
function first(parameter){
console.log(1);
parameter()
}
function second(){
console.log(2);
}
first(second);위의 예제는 first함수의 매개변수에 second 함수를 인자로 사용했다. 위의 예제는 아래와 같은 순서로 이동된다.
Move 1
function first(second){
console.log(1);
second()
}
function second(){
console.log(2);
}
first(second);이해하기 어려웠지만, argument로 사용한 second는 first 함수의 parameter로 사용될 수 있다.
이처럼 Callback 함수는 순차적으로 실행하고 싶을 때 쓴다.
callback 함수로 활용하지 않아도 1다음에 2가 console.log 되겠지만, 사용처가 있기 때문에 위와 같은 방법도 사용된다.
협업시 first에 포함된 함수를 자주 쓸 때, first()후에 console.log(2) 바로 출력하고 싶은 개발자 first()후에 console.log(4) 바로 출력하고 싶은 개발자를 위해 callback 함수를 사용한다.
Callback 이해하기 예제 4번
function login() {
const isConfirm = confirm("login");
if (isConfirm) {
userInfo();
}
}
function logout() {
const isConfirm = confirm("logout");
if (isConfirm) {
userIndex();
}
}
function isConfirmValid(message, callFunc) {
const isConfirm = confirm(message);
if (isConfirm && callFunc) {
callFunc(isConfirm);
}
}Callback 함수는 code를 줄이는데에도 사용할 수 있다.
//원 코드
function login() {
const isConfirm = confirm("login");
if (isConfirm) {
userInfo();
}
}
//아래와 같이 변경
function login(){
isConfirmValid("login",userInfo);
}
//원 코드
function logout() {
const isConfirm = confirm("logout");
if (isConfirm) {
userIndex();
}
}
//아래와 같이 변경
function logout(){
isConfirmValid("logout",userIndex);
}
// login,logout 함수가 변경될 수 있는 이유는 아래 함수의 callback 함수로 쓰이기 때문이다.
function isConfirmValid(message, callFunc) {
const isConfirm = confirm(message);
if (isConfirm && callFunc) {
callFunc(isConfirm);
}
}
Callback 이해하기 예제 5번
function howManyStudy(time,yes,no){
if(time > 10){
yes()
}else{
no()
}
}
function successfulDay(){
console.log(`오늘은 공부 좀 하셨군요? 복습만 하고 자러갑시다`);
}
function failedDay(){
console.log(`네? 취업은 포기하셨나요?`);
console.log('https://nomadcoders.co/');
}
howManyStudy(12,successfulDay,failedDay);실행하는 howManyStudy 함수의 12,successfulDay,failedDay은 정의부 함수의 parameter time,yes,no에 포함된다.
하나의 함수로 만들어도 되는 것을 이렇게 callback 함수로 사용하는 것은 javascript의 변수가 갖는 scope와 동기 처리 방식이라는 특징때문에 사용된다.
비동기 처리방식의 문제점을 해결하기 위한 콜백 함수
실제 프로젝트에서 DB나 API를 통해서 유저 데이터를 얻어오는 경우, 필연적으로 latency가 발생하게 되는데, 자바스크립트는 동기처리방식이기에, latency를 기다려 주지 않고 바로 실행되어 문제가 발생된다.
이런 부분을 해결하기 위한 것이 콜백함수이다. latency가 생기는 상황에서는 결과값을 리턴 받으려고 하지말고, 결과값을 통해 처리할 로직을 콜백 함수로 넘기는 스타일로
코딩을 해줘야 예상된 결과를 얻을 수 있다.
자바스크립트의 함수
- 변수나 데이터 안에 담길 수 있고
- 매개변수가 되어 자신을 전달할 수도 있고
- 반환하는 값으로도 사용할 수 있고
- 실행하는 도중에도 생성될 수 있다.
- 이러한 함수를 고차함수라 부르고 인자로 넘겨지는 함수를 콜백함수라고 부른다.
왜 콜백함수가 필요한가요?
자바스크립트는 이밴트 기반 언어이기 때문이다.
자바스크립트는 다음 명령어를 실행하기 전 이전 명령어의 응답을 기다리지 않고 다른 이밴트들을 기다리며 계속 명령을 수행한다.
