map 문

So Vidi·2023년 11월 4일

JavaScript

목록 보기
5/31

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;
);
profile
먹을거 좋아하는데 마른 개발자

0개의 댓글