๐Ÿ“–Day 7 - Array Cardio Day 2

JavaScript 30์˜ Day 7 ํ”„๋กœ์ ํŠธ๋Š” Day 4์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ฌด์–ธ๊ฐˆ ๋งŒ๋“œ๋Š”๊ฒŒ ์•„๋‹Œ JavaScript์˜ Array์— ๋Œ€ํ•ด์„œ ๋” ์•Œ์•„๋ณด๋Š” ํ”„๋กœ์ ํŠธ์ด๋‹ค. ์ €๋ฒˆ์— ๋ฐฐ์šด ๊ฒƒ๊ณผ ๋‹ค๋ฅธ method๋“ค์„ ๊ณต๋ถ€ํ•ด๋ณด์ž.

๐Ÿค“๐Ÿ“„์ฝ”๋“œ ๋ชจ์•„๋ณด๊ธฐ

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Array Cardio ๐Ÿ’ช๐Ÿ’ช</title>
  </head>
  <body>
    <p><em>Psst: have a look at the JavaScript Console</em> ๐Ÿ’</p>
    <script src="main.js"></script>
  </body>
</html>

JavaScript

// ## Array Cardio Day 2

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(function (person) {
  const currentYear = new Date().getFullYear();
  if (currentYear - person.year >= 19) {
    return true;
  }
});

// Arrow function
// 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(function (person) {
  const currentYear = new Date().getFullYear();
  if (currentYear - person.year >= 19) {
    return true;
  }
});

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(function (comment) {
//   if (comment.id === 823423) {
//     return true;
//   }
// });

// Arrow function
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)];

๐Ÿ”Ž์ฝ”๋“œ ์„ค๋ช…

Array.some()

some()๋ฉ”์„œ๋“œ๋Š” callback ํ•จ์ˆ˜๊ฐ€ ์ฐธ(๋ถˆ๋ฆฐ์œผ๋กœ ๋ณ€ํ™˜ํ–ˆ์„ ๋•Œ true๊ฐ€ ๋˜๋Š” ๊ฐ’)์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ์š”์†Œ๋ฅผ ์ฐพ์„ ๋•Œ๊นŒ์ง€ ๋ฐฐ์—ด์— ์žˆ๋Š” ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด ํ•œ ๋ฒˆ์”ฉ callback ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ฐœ๊ฒฌํ•œ ๊ฒฝ์šฐ some์€ ์ฆ‰์‹œ true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด, ์ฆ‰ ๋ชจ๋“  ๊ฐ’์—์„œ ๊ฑฐ์ง“์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ํ• ๋‹นํ•œ ๊ฐ’์ด ์žˆ๋Š” ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค์—์„œ๋งŒ callback์„ ํ˜ธ์ถœํ•˜๊ณ , ์‚ญ์ œํ–ˆ๊ฑฐ๋‚˜ ๊ฐ’์„ ํ• ๋‹นํ•œ ์ ์ด ์—†๋Š” ์ธ๋ฑ์Šค์—์„œ๋Š” ํ˜ธ์ถœํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ฆ‰, ๋นˆ ๋ฐฐ์—ด์—์„œ ํ˜ธ์ถœํ•˜๋ฉด ๋ฌด์กฐ๊ฑด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ๋งˆ์ง€๋ง‰์œผ๋กœ some์€ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์„ ๋ณ€ํ˜•ํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.

function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

Array.every()

every()๋ฉ”์„œ๋“œ๋Š” callback ํ•จ์ˆ˜๊ฐ€ ๊ฑฐ์ง“์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ์š”์†Œ๋ฅผ ์ฐพ์„ ๋•Œ๊นŒ์ง€ ๋ฐฐ์—ด์— ์žˆ๋Š” ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด ํ•œ ๋ฒˆ์”ฉ callbackFn ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. ํ•ด๋‹นํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ฐœ๊ฒฌํ•œ ๊ฒฝ์šฐ every๋Š” ์ฆ‰์‹œ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ  ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด, ์ฆ‰ ๋ชจ๋“  ๊ฐ’์—์„œ ์ฐธ์„ ๋ฐ˜ํ™˜ํ•˜๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. some๊ณผ ๋‹ฌ๋ฆฌ, ๋นˆ ๋ฐฐ์—ด์—์„œ ํ˜ธ์ถœํ•˜๋ฉด ๋ฌด์กฐ๊ฑด true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. some๊ณผ ๊ฐ™์€ ์ ์€ every์—ญ์‹œ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด์„ ๋ณ€ํ˜•ํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

Array.find()

find()๋ฉ”์„œ๋“œ๋Š” callback ํ•จ์ˆ˜๊ฐ€ ์ฐธ์„ ๋ฐ˜ํ™˜ ํ•  ๋•Œ๊นŒ์ง€ ํ•ด๋‹น ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด์„œ callback ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. ๋งŒ์•ฝ ํŠน์ • ์š”์†Œ๋ฅผ ์ฐพ์•˜๋‹ค๋ฉด find ๋ฉ”์„œ๋“œ๋Š” ํ•ด๋‹น ์š”์†Œ์˜ ๊ฐ’์„ ์ฆ‰์‹œ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์•˜๋‹ค๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

Array.findIndex()

findIndex()๋ฉ”์„œ๋“œ๋Š” callback ํ•จ์ˆ˜๊ฐ€ ์ฐธ์„ ๋ฐ˜ํ™˜ ํ•  ๋•Œ๊นŒ์ง€ ํ•ด๋‹น ๋ฐฐ์—ด์˜ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด์„œ callback ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•œ๋‹ค. ๋งŒ์•ฝ ํŠน์ • ์š”์†Œ๋ฅผ ์ฐพ์•˜๋‹ค๋ฉด find ๋ฉ”์„œ๋“œ๋Š” ํ•ด๋‹น ์š”์†Œ์˜ index๋ฅผ ์ฆ‰์‹œ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์•˜๋‹ค๋ฉด -1์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

๐Ÿš€TIL(Today I Learned)

  • Day 4์— ๋”ํ•ด์„œ JavaScript์—์„œ Array์˜ ๋‹ค์–‘ํ•œ method๋“ค์„ ๋” ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • some(), every(), fint(), findIndex()

JavaScript 30 ํ”„๋กœ์ ํŠธ ๊ฒฐ๊ณผ๋ฌผ

์ €์ž‘์žํ‘œ์‹œ

'Language > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[JS] ๐Ÿ—“๏ธJavaScript 30 - Day 9  (0) 2021.11.23
[JS] ๐Ÿ—“๏ธJavaScript 30 - Day 8  (0) 2021.11.22
[JS] ๐Ÿ—“๏ธJavaScript 30 - Day 6  (0) 2021.11.19
[JS] ๐Ÿ—“๏ธJavaScript 30 - Day 5  (0) 2021.11.18
[JS] ๐Ÿ—“๏ธJavaScript 30 - Day 4  (0) 2021.11.17

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”