Day 7 - Array Cardio Day 2

Full Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 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 },
];

// 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);
console.log(index);

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

some, every

some은 하나라도 조건을 만족하면 true를 반환하고, every는 모두 조건을 만족해야 true을 반환한다. 사용법은 매우 간단하다. some과 every는 format이 동일하므로 some만 살펴보자.

1
const isAdult = people.some((person) => new Date().getFullYear() - person.year >= 19);

Arrow Function으로 작성되었는데 풀어보면

1
2
3
4
5
6
const isAdult = people.some(function (person) {
  const currentYear = new Date().getFullYear();
  if (currentYear - person.year >= 19) {
    return true;
  }
});

이것과 똑같다. 특정 조건이 참인지 여부를 검사하고 boolean 값을 반환한다.

find, findIndex

1
const comment = comments.find((comment) => comment.id === 823423);

find는 말 그대로 특정 조건에 부합하는 데이터를 찾고, 그 첫 번째 데이터를 반환한다. 단 하나의 객체만 반환할 수 있다.

1
const index = comments.findIndex((comment) => comment.id === 823423);

findIndex는 find와 거의 동일하지만 객체 배열에서 특정 조건을 찾았을 때 객체를 반환하는 것이 아닌, 인덱스를 반환한다.

splice

splice의 기본 문법은 다음과 같다.

1
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

이번 예제에서 splice를 사용한 방법은

1
comments.splice(index, 1);

위의 문법에 대입해서 생각하면 이전에 찾은 index값을 시작으로 1개의 값을 삭제한다.

spread (전개구문)

위의 splice를 사용하는 방법도 있지만, spread 구문을 사용하는 방법도 있다. 전개구문은 ...을 배열에 붙여서 사용하는데, unpack의 개념과 비슷하다.

1
2
arr = [1,2,3]
console.log(...arr) // 1,2,3

이렇게 배열의 껍데기를 벗기고 내용물을 보여준다.

예제의 splice, 즉 index의 내용을 제외한 나머지 comments를 보여주기 위해서는,

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

index를 기준으로 앞에서 자르고 뒤에서 잘라서 붙여주면 된다. ...를 사용하지 않으면 object 객체끼리 합쳐지기 때문에 내용물을 붙이기 위해 전개 구문을 사용한다.