반응형
배열의 순회 메서드는 인자(argument)로 함수(callbackFunction)를 받는다.
함수를 받은 배열은 자신의 길이(length)를 확인한후 그 길이만큼 배열요소에 접근하여 함수(callback)를 실행시킨다.
즉, 내가 함수를 호출하는게 아니라 배열의 순회 메서드가 함수를 호출한다.
호출자가 누구인지 명확히 알아야 이해가 잘될것이다.
대표적인 배열의 순회 메서드 몇개를 가지고 예제를 보면 이해가 될것이다.
1. Array.forEach()
element로 number type 5개를 가진 배열이 있다.
let arr = [1,2,3,4,5];
function callback(element){
console.log(element);
}
arr.forEach(callback);
이 배열에서 forEach함수에 각 element를 console.log()하는 함수를 forEcah 메서드에 인자(argument)로 넘겼을때,
이 callback이라는 함수는 내가 실행시키는게 아닌
forEach 메서드가 자신의 길이를 확인한 후 그 길이만큼 배열의 요소에 접근하여 요소(element)를 callback 함수의 인자로 넣어서 실행시킨다.
내가 실행시키는게 아니다. 나는 callback 함수만 작성해주고 forEach가 실행하는거다!!
다른 순회 메서드들도 마찬가지다. 거기서 하는 일이 약간씩 다를뿐 원리는 똑같다.
2. Array.map()
let arrMap = ["hi!","hello!","bye"];
function callbackMap(element){
return element + "^^";
}
arrMap.map(callbackMap);
// 내가 만든 callbackMap을 인자로 전달만 해주면 된다.
map 메서드는 말 그대로 element에 값을 mapping해서 배열로 돌려준다.
Array.filter메서드나 recudce메서드 모두 같은 원리이다.
callback의 원리를 잘 이해해자.
반응형
'Frontend > JAVASCRIPT' 카테고리의 다른 글
[Javascript] 함수 선언문과 함수 표현식, 그리고 호이스팅 (0) | 2020.01.16 |
---|---|
[Javascript] 값을 저장하는 방식, pass by value vs. pass by reference (0) | 2020.01.15 |
[Javascript] 배열(Array)의 요소(element)조작 , 배열 메서드(method) (0) | 2020.01.12 |
[Javascript] Object(기본,리터럴) (0) | 2020.01.12 |
[Javascript] 인자(argument)와 매개변수(parameter) (0) | 2020.01.12 |