반복문 정리

map

어레이에 있는 객체들을 객체 갯수만큼 리스트 형식으로 다시 만드는 명령어. return item 필수!!

@.map((item) => {
	...
	return(item)
})

중괄호를 빼고 소괄호만 놓았을 경우에는 바로 리턴문이 되는건 function 설명에서도 했고, 주로 리액트에서 컴포넌트를 쏴줄때 사용한다.
forEach 와의 차이점이라면 forEach 는 함수만 작동시키고 남기는것이 없지만 map 명령어는 return 으로 객체를 리스트화하여 만들어낸다는 점이 다르다. 이를 리액트 useState 수정변수에 넣으면 수정된 값으로 업데이트하는 원리.

새로운 값을 넣고 다시 포장하는것도 가능한데,

let res = data.map((item, K) => {
					item.key = K;
          item.hehe = Value;
			  return item;
        })

위와 같은 경우 res에는 hehe 라는 새로운 값과, key 라는 순서값이 추가되어 새로 생겨난 형태로 재 조정된 데이터가(item) 생성된다.

조건문을 따로 설정 가능한데,

data.map(item => {
          if(item.date == mDate){
            item.todoInpV = Mdata;
          }
          return item;
        })

조건문에 if 문 을 사용하여 특정 값에만 적용되는 함수를 작성 가능하다. 위의 date 는 키값에 해당할 것이므로 특정 date 가 일치하는 데이터만 추적하여 변경되는 “수정” 함수와 동일하다.

사용 예시 :

const todos = todos.map(item => {
	if(item.id == dlValue.id) {
		num++(예시)
	} else {
		num--(예시)
	}
	return item;
);

filter

const @ = 어레이.filter(function, 혹은 (item) => item (비교연산자) %) : 어레이에서 item 이 % 와의 비교연산자 결과에서 true 값을 도출하는것 빼고는 제외시키고 어레이를 다시 생성한다.
그러므로 @.filter 결과문은 어레이 이다. 반드시 변수(const, let) 지정 하고 사용해야 하며, 원래어레이 = 어레이.filter 로 변형하는데 주로 쓰임

사용 예시 : 일반형

const todos = todos.filter((item) => item.id != dlValue.id);

이후 똑같이 todos[*] 로 나오므로 사용은 todos[*] 로 한다.

사용 예시 : 함수형

const todos = todos.filter((item) => {
	const a = item.id != dlValue.id;
 return a.length >= 1;
});

return 으로 boolean 을 도출하는 조건문 혹은 함수(ex: includes 문)을 반드시 보내준다.

특징으로 여러개의 오브젝트를 가지고 있는 어레이 일 경우 원래 console.log 로는 내부키값을 호출해도 나오지 않지만, filter 는 각각 검사하므로 키값 결론 도출이 가능하다.

const testArr = [
	{key: "1", id: "hehe"},
  {key: "2", id: "hoho"},
  {key: "3", id: "haha"}
]

위의 경우 console.log(testArr.id) 로는 값이 나오지 않지만, testArr.filter(item=>item.id == “hehe”) 는 filter 문이 접근하여 값을 내게 된다.

const filteredArray = originalArray.filter(originalObj => {
	return compareKeys.includes(originalObj.key);
});

위는 어레이의 조건에 맞는 결과 도출문, 결론적으로 filter 의 비교문이 어레이일 경우에는 includes 를 사용하여 활용 가능하다. boolean을 도출하기 때문.

some

filter 는 조건의 true 인 값만 따로 데이터를 재생성한다면 이놈은 해당 조건문의 결과값인 true, false 값인 boolean 만을 도출한다. 주로 두 개 이상의 오브젝트를 품은 어레이를 비교할 때에 filter 문 안에 조건식으로 사용하는데, 무슨소리인지는 예제로 확인,

const testArr1 = [
	{key: "1", id: "hehe"},
  {key: "2", id: "hoho"},
  {key: "3", id: "haha"},
	{key: "4", id: "hghg"},
  {key: "5", id: "thth"},
  {key: "6", id: "ququ"}
]

const testArr2 = [
	{key: "1", id: "hehe"},
  {key: "2", id: "hoho"},
  {key: "3", id: "haha"}
]

위와같은 두 형태의 데이터가 있을 경우, 만약 내가 testArr2 에서 id 에 겹치는 testArr1 의 데이터만 골라서 빼고 싶다면,

const result = testArr1.filter(obj=>{
			return testArr2.some(item => item.id == obj.id)
})

결론적으로, 어레이 안에 오브젝트가 있을 경우 반복문은 그 내부값을 각각 추적하는게 가능하지만(하나씩 돌기 때문에) 그 비교문 안에 또다시 같은 형태의 또다른 데이터를 비교한다고 하면 다시 반복문을 사용하지 않는 이상 내부값을 들어가는게 불가능하다. 그러나 정작 filter 를 두 번 사용하면 모든 값이 true 가 나오게 되는데 이유는 안쪽 filter 가 boolean 이 아닌 데이터를 도출해버리므로 가장 바깟의 filter 가 boolean 을 받지 못하게 됨이 까닭이다. 하지만 some 을 사용하면 안쪽 some 문이 이미 특정 데이터를 통해 boolean 을 도출하므로 가장 바깟의 filter 가 boolean 을 받게 되어 구분이 가능해진다. 이로써 두 개의 데이터를 각각 중첩 비교문을 사용하여 비교하게 되는 것.

결론적으로 filter 문의 비교대상이 각각 두 개 이상의 오브젝트를 품은 어레이 일 경우 사용한다.

every

독특한 어레이 비교식인데 어레이 안에 어떠한 것이라도 false 값을 도출하는 값이 있다면 전체가 false 가 된다.