[JavaScript] 재귀 함수, 콜백 함수, 화살표 함수

---

1.  재귀 함수

🐰  함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것

<script>
    let num = 0;
    function testFnc() {
        // 재귀 함수 호출을 적용하여 1부터 10까지의 값을 출력
        num++;
        document.write(num, '<br>');

        if(num === 10) return; // num 값이 10이면 종료

        console.log(`${num} 번째 호출`); // 10번째는 출력 안됨
        testFnc(); // 재귀 함수 호출
    }
    testFnc();
</script>

---

2.  콜백 함수  callback function

🐰  매개 변수로 전달하는 함수. 자바 스크립트는 함수도 하나의 자료형이므로 매개변수로 전달 할 수 있음

🐰  매개변수를 통해 함수를 받고, 그 함수를 통해 결과값을 호출함

<script>
    function callThreeTimes (callback) { // 함수를 선언
        for (let i = 0; i < 3; i++) {
            callback(i);
        }
    }

    function print(i) {
        console.log(`${i}번째 함수 호출`);
    }

    // 함수를 호출.
    callThreeTimes(print); // 매개변수로 함수를 전달. 함수를 매개변수로 사용할 경우 ()는 제외
    /* 0번째 함수 호출
    1번째 함수 호출
    2번째 함수 호출
     */
</script>

 

---

 콜백함수와 익명함수 

<script>
    function callThreeTimes (callback) { // 함수를 선언
        for (let i = 0; i < 3; i++) {
            callback(i);
        }
    }

    // 함수를 호출. 다른 언어에서는 낯선 방법이나 자바 스크립트나 코틀린 같은 이벤트 기반을 프로그래밍에서는 자주 사용.
    callThreeTimes(function (i) {
        console.log(`${i}번째 함수 호출`);
    });
</script>

 

---

콜백함수를 활용하는 함수 : forEach() 메서드

    🥕  배열이 갖고 있는 함수(메서드)로써 단순하게 배열 내부 요소를 사용해서 콜백함수를 호출

/* 콜백함수 기본형 */
function (value, index, array) { } //  매개 변수가 다 필요하지 않음.

<script>
    const numbers = [273, 52, 103, 32, 57];

    numbers.forEach(function (value, index, array) {
        // 매개변수로 value, index, array를 갖는 콜백함수를 사용
        console.log(`${index}번째 요소 : ${value}`);
    });

    // 함수 선언한 후에 매개 변수로 넘겨도 됨
    const call = function (value, index, array) {
        // 매개변수로 value, index, array를 갖는 콜백함수를 사용
        console.log(`${index}번째 요소 : ${value}`);
    }
    numbers.forEach(call);

    numbers.forEach(function (v, i) { // 매개변수로 v, i만 사용
        console.log(`${i}번째 요소 : ${v}`);
    })

    numbers.forEach(function(item) { // 매개변수로 v만 사용
        console.log(`${item}`)
    })
</script>

 

---

콜백함수를 활용하는 함수 : map() 메서드

 

   🥕  콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만들고 리턴

<script>
    // 배열을 선언
    let numbers = [273, 52, 103, 32, 57];

    // 배열의 모든 값을 제곱
    let numbers2 = numbers.map(function (value, index, array) {
        return value * value;
    });
    console.log(numbers2); // (5) [74529, 2704, 10609, 1024, 3249]

    // 출력
    numbers2.forEach(console.log); // value, index, array 순서대로 출력
    /*
    74529 0 (5) [74529, 2704, 10609, 1024, 3249]
    2704 1 (5) [74529, 2704, 10609, 1024, 3249]
    10609 2 (5) [74529, 2704, 10609, 1024, 3249]
    1024 3 (5) [74529, 2704, 10609, 1024, 3249]
    3249 4 (5) [74529, 2704, 10609, 1024, 3249]
     */

    // for문을 이용해서 제곱 배열 생성
    let numbers3 = [];
    for (const item of numbers) {
        numbers3.push(item * item);
    }
    console.log(numbers3); // (5) [74529, 2704, 10609, 1024, 3249]
</script>

 

---

콜백함수를 활용하는 함수: filter()

    🥕  콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만듦
           ➡️  콜백함수의 리턴 타입이 불 형 이어야 함

<script>
    const numbers = [11, 12, 13, 14, 15, 16];
    
    // 짝수만 추출
    const evenNumbers = numbers.filter(function (value) {
        return value % 2 === 0;
    });

    // 인덱스가 짝수만 추출
    const evenIndexs = numbers.filter(function (value, index) {
       return index % 2 === 0;
    });

    console.log(`원래 배열: ${numbers}`); // 원래 배열: 11,12,13,14,15,16
    console.log(`값이 짝수만 추출: ${evenNumbers}`); // 값이 짝수만 추출: 12,14,16
    console.log(`인덱스가 짝수만 추출: ${evenIndexs}`);  // 인덱스가 짝수만 추출: 11,13,15

    // 1의 자리가 3의 배수인 경우만 추출
    const evenNumbers2 = numbers.filter(function (value) {
        return (value % 10) % 3 === 0;
    });

    console.log(`1의 자리가 3의 배수: ${evenNumbers2}`); // 1의 자리가 3의 배수: 13,16
</script>

 

---

3.  화살표 함수  Arrow function

🐰  ES6에 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현할 때 사용

    1) function 키워드를 생략
    2) 부등호 '='과 '>'를 합쳐서 코딩
    3) 항상 익명함수 형식으로 표현
    4) 단일 명령문일 경우 함수의 중괄호 {}와 return을 생략

 

Arrow function expressions - JavaScript | MDN

<script>
    const doAddition1 = function (s1, s2) {
        return (s1 + s2) / 2;
    }
    console.log(doAddition1(2, 5)); // 3.5

    const doAddition2 = (s1, s2) => {
        return (s1 + s2) / 2;
    }
    console.log(doAddition2(2, 5)); // 3.5

    const doAddition3 = (s1, s2) => (s1 + s2) / 2;
    console.log(doAddition3(2, 5)); // 3.5
</script>

---

🐰  map(), filter() 함수처럼 단순한 형태의 콜백 함수를 쉽게 입력
🐰  function 키워드 대신 화살표(=>)를 사용

/* 기본형 */ 
(매개변수) => { }

 

💡  메소드 체이닝 : 메소드가 리턴하는 값을 기반으로 해서 메서드를 줄줄이 사용하는 것

<script>
    // 배열 선언
    let numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

    // numbers에서 2의 배수만 추출한 후, 제곱을 한 후에 로그에 출력.

    // 배열의 메소드를 연속적으로 사용. 메소드 체이닝.
    numbers.filter((value) => value % 2 === 0) // 2의 배수만 추출 / [0, 2, 4, 6, 8]
        .map((value) => value * value) // 제곱 추출 / [0 , 4, 6, 16, 36, 64]
        .forEach((value) => console.log(value)); // [0, 4, 16, 36, 64]
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 ]