스파르타코딩 내일배움캠프 DAY 33 TIL - 자바스크립트 - 객체 배열은 역시 배울것이 많다..

자바스크립트 배움은 정말 끝이 없다.

오늘은 새로오신 튜터님 덕분에, 객체와 배열에 대해서 다시 한 번 돌아보게되는 계기가 되었다.

사실 이전에도 객체와 배열을 공부 했지만, 정말 간단하게 공부를 한 것 같다는 생각이 들었다.
간단하게 값을 꺼내오거나, 읽거나, 추가하거나 등등 정말 기본적인 부분만 다뤄보고 넘어갔다.

Map 함수

const arr = [
  { id: 1, isDone: true },
  { id: 2, isDone: false },
  { id: 3, isDone: false },
  { id: 4, isDone: true },
];
// 먼저 arr라는 변수에 4개의 객체가 들어가있다.
// 여기서 각각의 조건을 붙여서 id와 isDone의 값을 변경해보도록 하겠다.

먼저
id가 1인 애들의 isdone값을 false로 고치려면 ? (map함수 이용)

const result = arr.map((item) => {
  return item.id === 1 ? { ...item, isDone: false } : item;
});
// 우선 map 함수를 통해서 인자로 item을 받아보자
// 다음 3항연산자를 이용해보자, item의 id가 1이라면, 기존의 item 값을 더해서 스프레드 문법을 사용하고,
// isDone의 값을 false로 바꿔주면 된다. 

다음은 IF문을 활용해보자. 사실 리액트에서 if를 사용하면 오류가 간혹가다가 있기 떄문에 추천하는 방법은 아니다.

const result = arr.map((item) => {
  if (item.id === 1) {
    return { ...item, isDone: false };
  } else {
    return item;
  }
});
// 똑같이 if문을 활용하여, item.id의 값이 1이라면,
// return 을 받으면 된다. {...item, isDone: false } 값을.
// 만약 그게 아니라면 원래대로 item을. return 받으면 된다.

이제는 isDone이 true라면 false로 바꿔보도록 하자

const result = arr.map((item) => {
  if (item.isDone === true) {
    return (item.isDone = false);
  } else {
    return (item.isDone = true);
  }
});
console.log(result);
// 똑같이 map을 이용하여, item의 isDone 값이 true 이면
// return 을 받는다. 무엇을? -> (item.isDone = false)를 받으면 된다.
// 굉장히 간단하다.

더욱 간단하게 ture -> false로 바꿔보도록 하자.

const result = arr.map((item) => {
  return !item.isDone;
});
// '!'을 활용하여, return !item.isDone을 받으면 된다. 

Filter 함수

여기서 isDone의 값이 true인 것을 뽑아보자

const arr = [
  { id: 1, isDone: true },
  { id: 2, isDone: false },
  { id: 3, isDone: false },
  { id: 4, isDone: true },
];

const result = arr.filter((item) => item.isDone);

console.log(result);
-> [ { id: 1, isDone: true }, { id: 4, isDone: true } ]
filter는 true의 값만 반환을 한다. 따라서 item.isDone을 했을 때는 true 값만 반환이 되는 것이다.

find함수

내가 원하는 값을 뽑고싶을 때 사용한다.

const arr = [1, 2, 3, 4, 5, 6];

const result = arr.find((item) => item === 4);

console.log(result);

// arr.find((인자) => 인자를 활용한 조건 ) 을 이용하면 된다.

const arr = [1, 2, 3, 4, 5, 6];

const result = arr.find((item) => item % 2 === 0);

console.log(result);

// 짝수를 구하는 식이다. 그럼 해당 값은 무엇이 나올까?
// 바로 답은 2가 나온다. 왜냐하면 find 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환하기 때문이다.