TIL-wecode 24일차

8469 단어 ReactcallbackReact

🙈Call back 함수

call back 함수란 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 수 매개변수로 전달한 함수가 다시 호출되는 것이다.

callback 함수는 undefined를 포함한 배열값 있는것만 호출합니다

🙈map

	const items = [ "list", "of", "words"];

	const countLetters = items.map(function(element){
      return element.length;
      });
	console.log(countLetters);  //-->4,2,5

위의 코드에서 처럼 map()메서드는 배열내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환 합니다.

	arr.map(callback(currentValue[,index[,array]])[,thisArg]

-currentValue👉처리할 현재 요소
-index👉처리할 현재 요소의 인덱스
-array👉map()을 호출한 배열
-thisArg👉callbacl 실행시 this로 사용되는 값

🙈reduce

	const items = ["list", "of", "words"];

	const wordLengths = items.reduce(function(result, element) {
      result[element] = element.length;
      return result;
    }, {});

	console.log(wordLengths); //-->{list:4, of: 2, words: 5}

reduce()는 배열의 각 요소에 대해 callback을 실행해서 단 1개의 출력 결과를 만듭니다.

	arr.reduce(callback[, initialValue])

callback👉 배열의 각 요소에 대해 실행할 함수. 밑의 네가지 인수를 받는다

accumulator👉 accumulator은 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는 첫 뻔째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값이다.
currentValue👉 처리할 현재 요소
currentIndex👉 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0,아니면 1부터 시작한다.
array👉 reduce를 호출할 배열

initialValue👉 callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

🙈filter

const items = [12, 1, 7, 5, 4, 2, 9];


const lessThanFive = items.filter(function(element){
  return element < 5;
   });

console.log(lessThanFive); //1, 4, 2

filter()메서드는 주어진 함수의 테스트를 통과하는 모든요소를 모아 새로운 배열로 반환합니다.

	arr.filter(callback(element[, index[, array]])[, thisArg])

callback👉각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
element👉처리할 현재 요소
index👉처리할 현재 요소의 인덱스
array👉filter로 호출한 배열
thisArg👉callback을 실행할 때 this로 사용하는 값

출처:https://dev.to/chrisachard/map-filter-reduce-crash-course-5gan

좋은 웹페이지 즐겨찾기