자바스크립트 콜백함수(callback)와 배열 메소드 (221112) - TIL6

콜백함수

   자바스크립트에서는 함수도 하나의 자료형이므로 다른 함수의 매개변수로서 전달이 가능하다. 매개변수로 전달되는 함수를 콜백함수라고 한다.

• 선언적 함수 사용과 익명 함수를 사용한 콜백함수 구조

<script>
	// 선언적 함수(named function)를 이용한 콜백함수 호출
	function callbackFn (callback) { 
    	for(let i=1; i <= 3; i++) {
        	callback(i);
        }
    }
    
    function paramFn (i) {
    	console.log(`${i}번째 함수 호출`);
    }
    
    callbackFn(paramFn); // 실행 결과: 1번째 함수 호출 / 2번째 함수 호출 / 3번째 함수 호출
    
    // 익명 함수(anonymous function)를 이용한 콜백함수 호출
	function callbackFn (callback) { 
    	for(let i=1; i <= 3; i++) {
        	callback(i);
        }
    }
    
    callbackFn (function (i) {console.log(`${i}번째 함수 호출`)}); 
    // 실행 결과: 1번째 함수 호출 / 2번째 함수 호출 / 3번째 함수 호출
</script>

• 익명함수로 콜백함수 사용시 별도로 매개변수 함수 선언 없이
  호출하면서 매개변수로 바로 콜백함수를 입력하여 실행할 수 있다.

콜백함수 활용 종류 (배열 메소드와 타이머 함수)

1. forEach()

   배열 내 요소의 값을 하나씩 출력.

2. map()

   배열 내 요소의 값을 각각 불러와서 함수 계산 후 새로운 배열로 리턴.

3. filter()

   배열 내 요소의 개별 값 중 함수 조건에 true 값만 새로운 배열로 리턴.

4. setTimeout(), setInterval()

   콜백함수 호출 시 타이머를 설정하여 실행.

• 배열 메소드를 사용하는 콜백함수 기본 형태

function (value, index, array) { }

기본 형태는 매개변수로 3가지를 입력해야 하지만 필요한 위치의 값만 순서에 맞춰서 입력해서 사용할 수 있다.

value 값만 사용하는 경우

<script>
	const numbers = [0, 1, 2, 3, 4, 5];
    const oddNumbers = numbers.filter(function(value) {
      return value % 2 === 1
      });
      
    console.log(`기존 배열: ${numbers}`); // 실행 결과: 기존 배열: 0,1,2,3,4,5
    console.log(`홀수만 추출: ${oddNumbers}`); // 실행 결과: 홀수만 추출: 1,3,5
    
    console.log(numbers); // 실행 결과: (6) [0, 1, 2, 3, 4, 5] 공백 존재
    console.log('기존 배열: ' + numbers); // 실행 결과: 기존 배열: 0,1,2,3,4,5 공백도 사라짐
</script>

! 실행결과 콘솔을 찍어보면서 새롭게 알게된 사실은 배열(객체)를 단독으로 콘솔로 찍어볼 경우
(6) [0, 1, 2, 3, 4, 5] 형태로 나오지만 문자열과 함께 출력하는 경우나
템플릿 리터럴로 묶어서 객체 값을 출력하는 경우에는 0, 1, 2, 3, 4, 5 형태의 값만 출력된다.

화살표 함수와 익명함수

• 화살표 함수 (arrow function)

   화살표 함수는 단순한 형태의 콜백함수 호출 시 유용하게 사용할 수 있다. function 키워드 대신 화살표(=>)를 사용한다.

(매개변수) => {
	함수 문장
}

위와 같이 간단한 기본 형태로 사용할 수 있고 함수 문장이 줄바꿈이 일어나는 긴문장이 아닌경우 (가독성에 크게 문제가 없다면)

(매개변수) => 리턴값

형태로 더욱 간편하게 사용할 수 있다.

• 익명 함수 (anonymous function)

    선언적 함수와 익명 함수를 비교했을 때 익명 함수를 사용하는 경우가 함수 실행 시 안정성을 높일 수 있기 때문에 최근에는 익명 함수 사용을 더 선호하는 추세이다.

1. 선언적 함수(named function)는 사람이 코드를 읽는 순서와는 다른 순서로 함수가 선언된다.

<script>
	namedFunction();
    
    function namedFunction () {
    	console.log('1번째 선언적 함수')
    }
    function namedFunction () {
    	console.log('2번째 선언적 함수')
    }
    // 실행 결과: 2번째 선언적 함수
</script>

선언적 함수의 경우 코드 선언 이전에 먼저 호출 코드를 작성해도 문제없이 함수 호출이 가능하다.

단, 선언적 함수의 경우에도 같은 함수명을 지닐 때 순서대로 덮어쓰고 가장 나중의 함수 결과가 실행된다.

2. 익명 함수는 사람이 코드를 읽는 순서대로 함수가 선언된다.

<script>
    let testFn = function () {
    	console.log('익명 함수 입니다.');
    }
    
    function testFn () {
    	console.log('선언적 함수입니다');
    }
    
    testFn();
    // 실행 결과: 익명 함수 입니다.
</script>

   위의 경우 입력 자체는 익명 함수 코드가 먼저 입력되고 선억적 함수가 나중에 입력되어서
선언적 함수의 결과 같이 호출 되어야 하는 것처럼 보일 수도 있다.

하지만 앞서 설명한 것과 같이 선언적 함수는 사람의 코드 읽는 순서와 다른 순서로 선언되기 때문에
선언적 함수는 스크립트 실행 시 먼저 선언되고 그 다음에 익명함수가 선언된다.

   함수를 같은 이름으로 덮어쓰는 것은 예상하지 못한 결과를 가져올 수 있기 때문에 선언되는 타이밍을 정확하게
알 수 있는 익명 함수를 사용하는 것이 더욱 안전한 방법이다.