TIL05. JavaScript : Callback Function in Array

📌 이 포스팅에서는 JavaScript의 배열에서 자주 쓰이는 콜백 함수에 대해서 알아보겠습니다.

🌈 Callback Function in Array

🔥 What's Callback Function

🔥 Useful Callback Function in Array

1. What's Callback Function

🤔 콜백 함수란 뭘까?

✔️ Javascript의 변수에는 숫자나 문자열 같은 데이터, 객체뿐만 아니라 함수도 변수에 할당할 수 있습니다.
✔️ 변수에 함수를 할당한다는 의미는 함수를 파라미터로 전달하거나 함수 안에서 또 다른 함수가 작동되고, 반환할 수 있다는 의미입니다.
✔️ 즉, 콜백함수(Callback Function)란 파라미터로 함수를 전달받아, 함수의 내부에서 실행되는 함수입니다.
✔️ 이에 콜백함수는 스스로 실행되는게 아니라, 자신이 전달되어지는 함수가 실행될 때까지 기다리다가 호출에 따라 작동됩니다.

function myCallBackFunc() { # 👈 callback 함수
    console.log('The callback function has been executed.');
}
function sayHello(name, callback) {
    console.log(`Hello ${name}! Call the callback function below.`);
    callback();
    console.log('End of "sayHello" function.');
}
sayHello('Jaewon', myCallBackFunc);
// Hello Jaewon! Call the callback function below.
// The callback function has been executed. # 👈 callback 함수의 실행 결과
// End of "sayHello" function.

🤔 콜백 함수는 왜 익명함수로 사용할까?

✔️ 콜백함수를 익명함수로 사용해야만 하는 것은 아닙니다. 함수의 이름을 붙여줄 수 있죠.
✔️ 하지만, 일반적으로 콜백함수는 어떤 함수가 실행되길 기다렸다가 작동하기 때문에 함수 내부에서 작동되고, 이에 함수의 이름이 필요하지 않을 경우가 많기 때문입니다.
✔️ 즉, 함수를 여러 곳에서 재활용할 필요가 없이 해당 함수 내부에서만 작동된다면, 굳이 함수명을 사용할 필요가 없기 때문에 익명함수로 자주 사용됩니다.

function sum(a,b){
  return a+b
}
function myFunc(a,b,callback){
  let newA = a*10 // 20
  let newB = b/2  // 5
  let res = callback(newA, newB)
  console.log(res)
}
myFunc(2,10,sum) // 25

✔️ 또한 콜백 함수의 가독성과 간결함을 위해 화살표 함수로 나타내기도 합니다. 위 함수를 화살표 함수로 만들어보겠습니다.

function myFunc(a,b){
  let newA = a*10 // 20
  let newB = b/2  // 5
  let callback = (a, b) => {console.log(a+b)}
  callback(newA, newB)
}
myFunc(2,10) // 25

3. Useful Callback Function in Array

🤔 find()

✔️ find() : find 매서드는 주어진 를 만족하는 첫 번째 요소의 값을 반환합니다. 만일 콜백 함수에서 요구하는 조건에 해당하는 원소가 없다면, "undefined"을 반환합니다. filter 매서드와 차이점은 filter는 조건에 해당하는 원소를 배열로 반환하고, find 매서드는 조건에 해당하는 첫번째 원소 값을 반환합니다.

students = [10, 80, 99, 40, 85, 32, 40, 98, 22, 78, 82, 85, 91, 90, 85]
let result = students.find((value) => value === 85); 
console.log(result); // 85

✔️ 위 함수를 아래 화살표 함수로 만들면 아래와 같습니다.

students = [10, 80, 99, 40, 85, 32, 40, 98, 22, 78, 82, 85, 91, 90, 85]
function callback(value){
  if(value===85){
    return value
  }
}
let result = students.find(callback); 
console.log(result); // 85

🤔 filter()

✔️ filter(callbackFunction, thisAgr) : filter() 메서드는 배열을 요소를 순회하며 콜백함수에 전달하고, 콜백함수에 해당하는 요소들만 모아서 새로운 배열을 반환해줍니다. 만약 콜백함수의 조건에 해당하는 요소가 없을 때에는 빈 배열을 반환합니다. 즉, filter 매서드는 원본 배열에 영향을 미치지 않습니다. 이와 함께 콜백함수은 3개의 인자(element, index, array)를 가지는데, 첫번째 인자만 필수이고 다른 인자는 선택입니다.

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function callback(value){
  if(value.includes('go')){
    return true
  }
}
let result = fruits.filter(callback);
console.log(fruits) // [ 'apple', 'banana', 'grapes', 'mango', 'orange' ]
console.log(result) // [ 'mango' ]

✔️ 위 함수를 아래 화살표 함수로 만들면 아래와 같습니다.

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
let result = fruits.filter((value) => value.includes('go'));
console.log(fruits) // [ 'apple', 'banana', 'grapes', 'mango', 'orange' ]
console.log(result) // [ 'mango' ]

🤔 map()

✔️ map(): 배열 내 원소들을 순차적으로 순회하며, 콜백함수에 전달해 값을 처리한 뒤 배열로 반환해줍니다.

students = [10, 20, 30, 40, 50]
function callback(value){
  return value * 2
}
let result = students.map(callback); 
console.log(result); // [ 20, 40, 60, 80, 100 ]

✔️ 위 함수를 아래 화살표 함수로 만들면 아래와 같습니다.

students = [10, 20, 30, 40, 50]
let result = students.map((value) => value * 2); 
console.log(result); // [ 20, 40, 60, 80, 100 ]

🤔 some & every

✔️ some은 주어진 배열을 순회하며 callback 함수에 원소를 전달하여, callback 함수 조건에 일치한 원소가 하나라도 있으면, true를 반환합니다. 즉, some 매서드는 배열의 모든 원소가 callback 함수의 조건에 일치하지 않을 때만 false를 반환시킵니다.

let score1 = [98, 67, 45, 90, 77, 52];
let resultSome1 = score1.some((value) => value >= 95); 
console.log(resultSome1); // true
let score2 = [98, 60, 88, 90, 77, 69];
let resultSome2 = score2.some((value) => value <= 50); 
console.log(resultSome2); // false

✔️ 이와 반대로 every는 주어진 배열을 순회하며 callback 함수에 원소를 전달하여, callback 함수 조건에 일치하지 안은 원소가 하나라도 있으면, false를 반환합니다. 즉, every 매서드는 배열의 모든 원소가 callback 함수의 조건에 모두 일치할 때만 true를 반환시킵니다.

let score1 = [98, 67, 45, 90, 77, 52];
let score2 = [98, 91, 88, 93, 94, 82];
let resultEvery1 = score1.every((value) => value >= 50); 
console.log(resultEvery1); // false
let resultEvery2 = score2.every((value) => value >= 80); 
console.log(resultEvery2); // true