221115 TIL

오늘 나의 Best TIL

그렇게 골 아프게 하던 filter 함수가 드디어 이해됐다...! 더불어 화살표 함수까지 !

정은님이 진짜 이해하기 쉽게 코드 분석해서 정리해주신 이미지를 계속 보면서 강의도 보고 코드를 써보고 결과를 확인했는데 답이 나와서 진짜로 뿌듯했다..와 이래서 하는구나 코딩을...ㅠㅠㅠㅠㅠㅠ

또 다른 문제에 응용하라면 또 해매겠지만 그래도 이걸 이해했다니 나 자신에게 너무 뿌듯하고 

명강의 해주신 정은님도 너무 감사하다!!!

---

콜백함수

 : 매개변수로 전달하는 함수 

<선언적 함수>
function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
        callback(i) // callback이라는 매개변수는 함수이므로 호출 가능
    }
}

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

//함수 호출
callThreeTimes(print)

☞ 출력

<익명 함수>
function callThreeTimes(callback) {
    for (let i = 0; i < 3; i++) {
        callback(i)
    }
}

//함수 호출
callThreeTimes(function(i) {
    console.log(`${i}번째 함수 호출`) //익명 함수 사용
})

☞ 출력 결과는 위와 동일함.

 

콜백 함수를 활용하는 함수

// 기본형태이지만 필요한 것만 쓸 수 있다
function(value, index, array) {]

 

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

 

value 273은 0번 째 index, array는 [273, 52, 103, 32, 57] 출력

array는 현재 반복을 돌고 있는 배열을 의미.

const numbers = [273, 52, 103, 32, 57]

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

☞ 출력

 

map() : 배열이 갖고 있는 함수. 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만든다.

let arr = [273, 52, 103, 32, 57]
arr = arr.map(function (value, index) {
    return value + "!!"
})
console.log(arr)

☞ 출력

 

filter() : 배열이 갖고 있는 함수. 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만든다.

 

let arr = [273, 52, 103, 32, 57];
arr = arr.filter(function (value, index) {
  return value % 2 === 0; // 짝수 구하기
});
console.log(arr);

☞ 출력

 

화살표 함수 : 단순한 형태의 콜백 함수를 쉽게 입력하고자 만들어짐. function 키워드 대신 화살표(=>) 사용

(매개변수) => 리턴값

 let arr = [273, 52, 103, 32, 57];
 arr = arr.filter((value, index) => value % 2 === 0)
 console.log(arr);