[JavaScript30] 7. Array Cardio Practice (2) | .some(), .every(), .find() and [...SPREADS]

📃 요구사항

주어진 data들을 가지고, 조건에 맞는 결괏값을 console 창에 띄운다.

 

💻 소스코드

먼저, 주어진 data는 다음과 같다.

const people = [
  { name: 'Wes', year: 1988 },
  { name: 'Kait', year: 1986 },
  { name: 'Irv', year: 1970 },
  { name: 'Lux', year: 2015 }
]

const comments = [
  { text: 'Love this!', id: 523423 },
  { text: 'Super good', id: 823423 },
  { text: 'You are the best', id: 2039842 },
  { text: 'Ramen is my fav food ever', id: 123523 },
  { text: 'Nice Nice Nice!', id: 542328 }
];

사람들의 이름, 출생년도 정보를 담고있는 객체들의 배열과, 댓글들의 내용, id 정보를 담고있는 객체들의 배열이 주어졌다.

 

🙄 내가 작성한 코드

// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
const age_some = people.some((p) => {
  return (new Date().getFullYear() - p.year + 1) >= 19
});
console.log(age_some)

// Array.prototype.every() // is everyone 19 or older?
const age_every = people.every((p) => {
  return (new Date().getFullYear() - p.year + 1) >= 19
});
console.log(age_every)

// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
const comments_find = comments.find(i => {
  return i.id === 823423
});
console.log(comments_find)

// Array.prototype.findIndex()
// Find the comment with this ID
const comments_findIndex = comments.findIndex(i => {
  return i.id === 823423
});
console.log(comments_findIndex);

// delete the comment with the ID of 823423
comments.splice(comments_findIndex, 1);
console.log(comments);

🤗 개선된 강의 코드

// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19);
console.log({isAdult});

// Array.prototype.every() // is everyone 19 or older?
const allAdults = people.every(person => (new Date()).getFullYear() - person.year >= 19);
console.log({allAdults});

// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
const comment = comments.find(comment => comment.id === 823423);
console.log(comment);

// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423
const index = comments.findIndex(comment => comment.id === 823423);
// comments.splice(index, 1);

const newComments = [
  ...comments.slice(0, index),
  ...comments.slice(index + 1)
];

console.table(newComments);
console.table(comments);

 

📖 TIL

some()

배열 안에 있는 값들을 순회하면서, 하나의 요소라도 주어진 판별 함수를 통과하면 순회를 멈추고 true(boolean)를 리턴한다. 빈 배열에서 호출하면 무조건 false를 반환한다.

const array = [1, 2, 3, 4, 5];

const even = array.some((element) => element % 2 === 0);

console.log(even); // true

 

every()

배열 안에 있는 값들을 순회하면서, 모든 요소가 주어진 판별 함수를 통과하면 순회를 멈추고 true(boolean)를 리턴한다.

array = [1, 2, 3, 4, 5];

const isBelowThreshold = array.every((currentValue) => currentValue < 40);

console.log(isBelowThreshold); // true

 

find()

주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 값을 반환한다. 만족하는 요소가 없다면 undefined를 반환한다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const found = array.find(element => element > 5);

console.log(found); // 6

 

findIndex()

주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.

const array = [5, 12, 8, 130, 44];

const isLargeNumber = array.findIndex((element) => element > 13);

console.log(isLargeNumber); // 3

 

Spread Operator

이전 실습에서도 Spread Operator를 사용해서 한 번 정리해 뒀었는데, 이번 실습에서도 사용하게 되어 복습할 겸 다시한 번 간단히 작성해보려고 한다.

Spread 연산자는 기존의 Object를 건드리지 않으면서, 그것의 element를 하나씩 분리하여 전개하기 위해 사용한다.

이번 실습의 마지막 문제가 판별 함수를 만족하는 요소를 기존 배열에서 삭제하는 것인데, 내가 사용한 방법대로 하게 되면 기존의 배열 자체가 변경된다.

comments.splice(comments_findIndex, 1);

그래서 강의에서는 Spread Operator를 이용해서 기존의 배열은 변형하지 않되, 요소를 기존 배열에서 삭제한 새로운 배열을 생성한다. 이렇게 하면 기존의 comments 배열이 그대로 존재하고, 요소가 삭제된 새로운 newComments 배열도 존재하게 된다.

const newComments = [
  ...comments.slice(0, index),
  ...comments.slice(index + 1)
];

Redux의 핵심 규칙 중 하나가 절대 state를 직접 변경하지 않고 현존하는 state를 보존하는 것이라고 한다. 그래서 새로운 값을 추가하거나 업데이트할 때에는 기존의 객체는 수정하지 않고, 기존 객체의 복사본을 만들어서 교체하는 방식으로 업데이트를 한다.

따라서 이제는 어떤 객체의 값을 변경하는 작업을 할 때, 기존 객체의 복사본을 새로 생성해서, 복사본에서 특정 작업을 수행하는 방식을 사용해야 할 것 같다.

 

 

 

👀 참고

youtube Wes Bos

https://www.youtube.com/watch?v=QNmRfyNg1lw&list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH&index=7 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/some

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex