[JavaScript] React에서 자주 쓰이는 JS 함수

여기 사이트 참고하기 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

1. filther 함수

참고자료 : https://7942yongdae.tistory.com/49

Array.prototype.filter (callbackfn, [,thisArg])

filter는 Array에 존재하는 것을 걸러주는역할을 합니다. 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용합니다.
ECMA에는 다음과 같이 정의되어 있습니다.

주어진 배열의 값들을 오름차순으로 접근하여 callbackfn을 통하여 true를 반환하는 요소를 기준으로 신규 배열을 만들어서 반환한다.

라고 정의되어 있습니다. 예제는 아래와 같습니다.

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

console.log(numbers);
//[1,2,3,4,5];

console.log(result);
//[4,5]

결과적으로 number가 3보다 큰 것들만 걸러주었다.

const number = [1];

numbers.filter((number, index, source) => {
  //number : 요소값
  //index : source에서 요소의 index
  //source : 순회하는 대상
  console.log(number); //1
  console.log(index); //0
  console.log(source); //[1]
  return number > 3;
});

위와 같이 index와 array를 함께 사용할 수 있다.

2. map함수

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환한다.

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

매개변수 목록

• callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 받을 수 있다.
  - currentValue : 처리할 현재 요소
  • index (optional) : 처리할 현재 요소의 인덱스
  • array(optional) : map()을 호출한 배열
• thisArg (optional) : callback을 사용할 때 this로 사용되는 값.

반환되는 값은 각 요소에 대하여 실행한 callback 결과를 모든 새로운 배열이다.

결과적으로 map은 callback함수를 각각의 요소에 대해 한번씩 순서대로 불러서, 그 함수의 반환값으로 새로운 배열을 만듭니다.

thisArg 매개변수가 map에 전달된 경우, callback함수의 this값으로 사용 가능하다.

주의할 점은, map이 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해집니다. 그래서 map이 시작된 이후에 배열에 추가되는 요소들은 callback의 영향을 받지 않는 것이다.

var numbers = [1, 4, 9];
var roots = numbers.(Map.sqrt);

numbers는 [1,2,3] 그대로인데, roots는 [1, 4, 9]가 된다.

var kvArray = [{key : 1, value : 10},
               {key : 2, value : 20},
               {key : 3, value : 30}];
var reformattedArray = kvArray.map(function(obj) {
  var rObj = {};
  rObj[obj.key] = obj.value;
  return rObj;
});
//reformattedArray는 [{1:10}, {2:20}. {3:30}]이 된다.

3. forEach함수

foreach는 겉으로 보면 for문과 매우매우 비슷하다! 이친구는 다음 매개변수와 함께 배열의 각 요소에 적용하게 될 콜백 함수를 함께 전달합니다.

• Current Value(명명된 매개변수) : 현재 처리해야 하는 요소
• Index (선택적 매개변수) : 현재 처리할 요소의 인덱스
• Array (선택적 매개변수) : forEach 메서들르 호출한 배열

아래 사용 예시를 보면서 이해하자.

numbers.forEach(function(number) {
  console.log(number);
});

아니면 화살표 함수를 이용해서,

numbers.forEach(number => console.log(number));

인덱스를 사용하고 싶다면 다음과 같이 작성도 가능하다.

numbers.forEach((number, index) => {
  console.log('Index: ' + index + 'Value : ' + number);
});