JavaScript 입문 11일차

오늘은 어제의 선언적 함수에 이어서 콜백함수 부분을 공부해보았다. 함수 부분들은 제대로 이해하지 않으면 힘들다는 말들에 따라 열심히 공부하고 있지만 선언적 함수는 사실상 수학적인 함수개념과 거의 일치해서 이해에 문제가 없었지만 콜백함수는 변수에 함수가 들어간다는 점에서 살짝 혼선을 줘서 공부가 어려운 것 같다. 그래도 개념을 잘짚고 넘어가야 하므로 오늘도 열공해보았다. 하루하루 기록해나가는 행위를 통해 복습을 할 수 있어서 그래도 개념들이 머리에 어느정도 자리에 잡히는 것 같다. 그럼 오늘의 공부내용을 또 정리해보겠다.

21/05/21 JavaScript 공부정리

1. 콜백 함수

자바스크립트에서 매개변수로 전달되는 함수를 콜백함수라고 한다. 이렇게만 개념을 적어놓으면 이해하기가 힘들다. 강좌에서 나온 예시를 들면서 이해해보겠다.

<script>
    const test = function(콜백함수) {
        for (let i = 1; i <= 5; i++){
            콜백함수(i)          
        }
    }

    const 함수 = function (콜백함수의_매개변수) {
        console.log(`${콜백함수의_매개변수}번째`)
    }
test(함수)
</script>

콜백함수를 이해하기 위해서 책의 저자분의 강의에서 언급 된 코드이다. 위의 'test'함수 를 만들어준다. 그리고 아래 '함수' 라는 이름의 함수 를 만들어준다. 'test 함수 안에 '함수' 를 매개변수로 넣어준다. 그 결과 'test(함수)'의 결과값 은 아래 함수에 순서대로 1,2,3,4,5 가 들어가며 결과를 '1번째','2번째'...,'5번째' 를 순서대로 출력 하게된다.

또한 단순한 값만 들어가지않고 배열을 활용하여 콜백함수를 이용할 수 있다. 강의에서 설명해주신 코드를 이용해 이해해보겠다.

    const test = function(array, 콜백함수) {
        for (const value of array) {
            콜백함수(value)
        }
    }

    const 함수 = function (콜백함수의_매개변수) {
        console.log(`${콜백함수의_매개변수}`)
    }
test([11,34,45,76,90,83],함수)

위와 같이 단순한 숫자 하나 뿐만 아니라 배열을 넣어서 배열의 요소들이 콜백함수의 매개변수로 들어가서 하나하나 결과로 출력되는 것을 볼 수 있다. 이것이 콜백함수의 기본적인 개념과 내용이다. 이렇게 적어놓고 보면 또 간단해 보이는데 복잡해지면 함수의 연산과정을 제대로 이해하지 못하면 복잡해질 것 같다.

2. forEach()
콜백함수를 활용하는 함수 중에서 가장 기본적인 함수는 forEach() 라고 한다. 배열과 함께 사용된다고 하며 단순하게 배열내부의 요소를 사용해서 콜백함수를 호출한다. 강좌에서 나온 코드를 통해서 이해해보면

<script>
    const array = [11,34,45,76,90,83]
    //배열을 선언해준다.

    array.forEach(function (value, index, array) {
        console.log(`배열의 ${index}번째 요소는 ${value}이다.`)
    })
</script>

위의 코드는 'forEach()' 를 활용하여 위에 선언한 배열의 각 요소들의 인덱스값과 요소, 그리고 원래 배열을 표시한다고 볼 수 있다. 위 코드에서는 원래 배열인 array 를 표현하지 않게 결과에서 빼버렸다. 따라서 위의 코드의 실행결과는 아래와 같다.

자바스크립트에서 콜백함수는 필요한 매개변수만 받아서 사용할 수 있기 때문에

array.forEach(function (value, index) {
   console.log(value, index)
})

위와 같이 array 를 생략 가능하다.

3.filter()

'filter()' 또한 위의 'forEach() 처럼 배열을 사용하는 콜백함수이며 콜백함수 안에서 리턴값이 ture인 것만 모아서 새로운 배열을 만드는 함수 이다. 매개변수로 위의 forEach 와 같은 value, index, array 를 받을 수 있고 동일하게 array 는 생략가능하다.

<script>
    let array = [11,34,45,76,90,83]
    //배열을 선언해준다.

    array = array.filter(function (value, index) {
        return value % 2 === 1
      //홀수만 골라서 배열을 새로 만드는 조건이다.
    })
</script>

위의 코드를 실행시켜보면 결과값은 아래와 같다.

'value % 2 === 1' 의 조건에 true인 요소 만 골라내어 새로운 배열이 되었다. 이처럼 특정조건으로 걸러낼 수 있다. 이름 그대로 필터에 어울리는 것 같다.

4. map()

'map()' 은 새로운 배열을 만들어서 리턴하는 함수 이다. 이번에도 위와 같이 코드를 통해서 이해를 해보겠다.

<script>
    let array = [11,34,45,76,90,83]
    array = array.map(function (value, index) {
        return value + 2
    })
    //모든 요소에 2를 더한 새로운 배열을 만든다.
    console.log(array)
</script>

위의 코드는 map() 을 토해서 배열의 모든 요소에 2를 더한 값으로 새로운 배열이 된다. 실행 결과는 아래와 같이 확인할 수 있다.

배열의 모든 요소에 2가 더해져 요소가 모두 2가 더해진 새로운 배열이 되었다.

5. 화살표 함수

강좌에서 설명하시길 화살표 함수는 개발자들이 위의 코드들을 입력할 때 입력해야하는 것을 간략화하여 함수를 더 간단한 형태로 사용하기 위해서 만들어진 것이라고 한다. 사용방법은 아래 코드를 보면서 이해를 해보자.

<script>
    let array = [11,34,45,76,90,83]
    array = array.map(function (value, index) {
        return value + 2
    })
    console.log(array)
//위에서 map() 에서 보여준 코드이다. 이것을 화살표 함수로 바꾸면 아래와 같다.

    let array = [11,34,45,76,90,83]
    array = array.map((value, index) => {
        return value + 2
    })
    console.log(array)
//화살표 함수의 사용으로 약간 변화하였지만 위의 코드와 같은 코드이며 결과값도 같다.
</script>

또한 이 화살표 함수는 만약에 내부에 있는 코드가 리턴하는 코드 하나뿐이면 return과 중괄호까지 생략가능 하다.

<script>
    let array = [11,34,45,76,90,83]
    array = array.map((value, index) =>
        value + 2
    )
    console.log(array)
</script>

위의 화살표 함수를 썼던 코드는 내부에 리턴하는 코드가 하나 뿐이기에 return과 중괄호까지 생략했다. 위의 코드를 실행해보면 역시 변함없이 같은 결과값을 얻을 수 있다.

이로써 오늘 콜백함수에 대해서 정리해보았다. 내일도 남은 함수 부분을 공부해서 정리할 것이다.