[JavaScript] 함수 심화

콜백 함수

• 다른 함수에 인자로 전달되어, 그 함수의 내부에서 실행되는 함수

콜백 함수의 중요성

• 비동기 처리 : 순차적인 코드 흐름을 개발자가 원하는 방식으로 제어 가능
• 이벤트 리스너 처리 : 사용자 행동에 반응하는 이벤트 내부에서 동작 가능

콜백 함수의 응용 사례

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

콜백 함수 예제 코드

// 1) 선언적 함수를 사용한 콜백 함수 구현
console.log('=== 콜백함수: 선언적 함수 ===');

// 0부터 2까지를 "콘솔창에 출력" >> 3번 실행
function callback1(callbackFunc) { // callbackFunc 매개변수 (함수를 데이터로 전달받음)

  // 함수 내부에서 다양한 기능, 동작 작성 가능

  for (let i = 0; i < 3; i++) {
    callbackFunc(i); // callbackFunc(print함수)의 인자로 i값을 전달
  }
}
// cf) let callbackFunc = (index) => {
  // console.log(`${index}번째 함수 호출`);
// }

// 복잡한 로직 (예시)
function print(index) {
  console.log(`${index}번째 함수 호출`);
}

callback1(print); // print함수(콜백함수)를 callback1(메인로직)의 인자로 전달

// 2) 익명함수를 사용한 콜백 함수 구현
console.log('=== 콜백함수: 익명 함수 ===');

// 복잡한 로직 (예시)
const print2 = function (count) {
  console.log(`${count}번째 함수 호출`);
}

callback1(print2); // print2함수(콜백함수)를 callback1(메인로직)의 인자로 전달;

// 3) 화살표 함수를 사용한 콜백 함수 구현
console.log('=== 콜백함수: 화살표 함수 ===');

function callback2(number, callbackFunc, other) { // number 변수(데이터), callbackFunc 함수
  // number의 값이 짝수인 경우 callbackFunc로 데이터 전달

  if (number % 2 === 0) {
    callbackFunc(number);
  } else {
    other(number)
  }
}

const print3 = (even) => {
  console.log(`${even}은 짝수입니다.`);
}

const print4 = (odds) => {
  console.log(`${odds}는 홀수입니다.`);
}

callback2(3, print3, print4); // 메인 로직에 데이터(number)와 콜백함수(print3)를 전달
callback2(4, print3);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

기타 배열의 고급 메서드 (고차함수)

 

1. reduce : 배열의 각 요소에 대해 함수를 적용하여 '단일 값을 생성'

(기본 구조)
// reduce 메서드의 인자값 : 콜백함수, 초기값(initialValue)
배열명.reduce((accumulator, currentValue, currentIndex, array) => {

}, initialValue)

 

reduce 콜백함수의 인자값

• 1. accumulator - 각각의 순회마다 축적되는 값 
  • 이전 작업물의 반환값 (이전 리듀서 호출의 반환값)
  • 첫 번째 호출에서는 initialValue 값이 지정
• 2. currentValue - 현재 순회되는 요소
• 3. currentIndex(선택) -
• 4. array(선택) -
• +) initialValue(선택) - 초기값, 생략 시 배열의 첫 번째 요소값

reduce 예시 코드

let numbers = [1, 2, 3, 4];

let sum = numbers.reduce((acc, value) => {
  acc + value;
}, 0);

console.log(sum);	// 10

 

let cars = ['audi', 'bmw', 'hyundai', 'kia'];

let combinedCar = cars.reduce((acc, car) => {
  return acc + ',' + car;
})
console.log(combinedCar);	// audi,bmw,hyundai,kia (type : string)

2. sort() : 배열의 요소를 정렬(오름차순)

 

3. reverse() : 배열의 요소를 정렬(내림차순)

 

4. 배열의 요소를 검색 & 평가

• indexOf, lastIndexOf : 특정 요소의 인덱스를 찾는 메서드
• find, findIndex : 조건을 만족하는 요소나 해당 인덱스를 찾는 메서드

nums = [5, 4, 3, 6, 1];

let firstOverFive = nums.find(num => num > 5);
let firstOverFiveIndex = nums.findIndex(num => num > 5);
console.log(firstOverFive); // 6
console.log(firstOverFiveIndex);  // 3

 

콜백 함수 활용(고차 함수)

타이머 함수

• 특정한 시간이 지난 후 함수를 실행하거나 일정 간격으로 함수를 반복 실행하는 기능

1. setTimeout(콜백함수, 시간);

• 지정된 시간이 지난 후, 주어진 콜백 함수를 단 한 번 실행
• - (지연) 시간 : 밀리초(ms)

(예제 코드)
function greet(name='홍동현'){
  console.log(`Hello, ${name}`);
}

greet();

// 2초 뒤에 실행
// >> 콜백함수로 함수를 전달
// >> 콜백함수의 인자 전달은 세 번째 인자부터 나열되는 값이 함수의 매개변수로 전달
setTimeout(greet, 2000);	// 2초뒤 실행
setTimeout(greet, 3000, '이도경');	// 3초뒤 실행

 

2. setInterval(콜백함수, 시간)

• '지정된 시간 간격마다' 함수를 반복해서 실행
• 사용법 : setTimeout()과 유사

let count = 1;

let id = setInterval(() => {
  console.log(`3초 마다 실행됩니다. ${count}번째`);
  count++;
}, 3000);  // 3000밀리초

setTimeout(() => {
  console.log('타이머를 종료합니다.');
  clearInterval(id);
}, 15000); // 15초