DEV Community

loading...
Cover image for JavaScript-30-Day-7

JavaScript-30-Day-7

KUMAR HARSH
The best way to learn is to teach. Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
Updated on ・4 min read

07 - Array Cardio Day 2

demo

click here for demo

Today we worked on some more important JavaScript Array functions.

Let's quickly go through them.

Array.prototype.some()

This function checks if at least one thing in our Array meets what you are looking for.

According to MDN

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array.

The some() method executes the callbackFn function once for each element present in the array until it finds the one where callbackFn returns a truthy value (a value that becomes true when converted to a Boolean). If such an element is found, some() immediately returns true. Otherwise, some() returns false. callbackFn is invoked only for indexes of the array with assigned values. It is not invoked for indexes which have been deleted or which have never been assigned values.

Question we did in the project:
is at least one person 19 or older?

here is the default array provided to us

const people = [
  { name: "Wes", year: 1988 },
  { name: "Kait", year: 1986 },
  { name: "Irv", year: 1970 },
  { name: "Lux", year: 2015 },
];
Enter fullscreen mode Exit fullscreen mode

and here is our solution

const isAdult = people.some(function (person) {
   const currenYear = new Date().getFullYear();
   if (currenYear - person.year >= 19) {
     return true;
   }
 });
console.log({ isAdult });
Enter fullscreen mode Exit fullscreen mode

using ES6 arrow functions we can significantly cut down the number of lines of code. Here is the solution using arrow functions and explicit return.

const isAdult = people.some(
  (person) => new Date().getFullYear - person.year >= 19
);
console.log({ isAdult });
Enter fullscreen mode Exit fullscreen mode

Note: By using {} inside console.log(), it's going to output the name of the variable as well as the value.

Array.prototype.every()

This function checks if every single element in Array follows our criteria.

According to MDN

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

The every method executes the provided callbackFn function once for each element present in the array until it finds the one where callbackFn returns a falsy value. If such an element is found, the every method immediately returns false. Otherwise, if callbackFn returns a truthy value for all elements, every returns true.

Question we did in the project:
is everyone 19 or older?

Here is our solution:

const allAdult = people.every(
  (person) => new Date().getFullYear - person.year >= 19
);
console.log({ allAdult });
Enter fullscreen mode Exit fullscreen mode

Array.prototype.find()

.find() is kind of like .filter() but instead of returning a subset of the array, it's going to return the first item it finds.

According to MDN

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

The find method executes the callbackFn function once for each index of the array until the callbackFn returns a truthy value. If so, find immediately returns the value of that element. Otherwise, find returns undefined.

Question we did in the project:
find the comment with the ID of 823423

here is the default array provided in the question:

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 },
];
Enter fullscreen mode Exit fullscreen mode

here is our solution:

const comment = comments.find(function (comment) {
   if (comment.id === 823423) {
    return true;
  }
 });
console.log(comment);
Enter fullscreen mode Exit fullscreen mode

here is the solution using ES6 syntax:

const comment = comments.find((comment) => comment.id === 823423);
console.log(comment);
Enter fullscreen mode Exit fullscreen mode

Array.prototype.findIndex()

It finds out the index where something is inside of the array.

According to MDN

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

The findIndex() method executes the callbackFn function once for every index in the array until it finds the one where callbackFn returns a truthy value.If such an element is found, findIndex() immediately returns the element's index. If callbackFn never returns a truthy value (or the array's length is 0), findIndex() returns -1.

Question we did in the project:
Find the comment with this ID and delete the comment with the ID of 823423

here is the use of .findIndex()

const index = comments.findIndex((comment) => comment.id === 823423);
console.log(index);
Enter fullscreen mode Exit fullscreen mode

Now to delete the comment we have 2 ways:

  • first we use .splice()
comments.splice(index, 1);
Enter fullscreen mode Exit fullscreen mode
  • second we create a new array of the updated comments using .slice() and the ES6 spread operator.
const newArray = [...comments.slice(0, index), ...comments.slice(index + 1)];
Enter fullscreen mode Exit fullscreen mode

and with this our project for the day was completed.

GitHub repo:

Blog on Day-6 of javascript30

Blog on Day-5 of javascript30

Blog on Day-4 of javascript30

Follow me on Twitter
Follow me on Linkedin

DEV Profile

cenacr007_harsh image

You can also do the challenge at javascript30

Thanks WesBos to share this with us! 😊💖

Please comment and let me know your views

Thank You!

Discussion (8)

Collapse
geekmaros profile image
Mustapha Abdul-Rasaq

This is great to read, like a refresher for some of the things I already knew, great write up there. 👍

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Glad you liked it.

Collapse
rash123 profile image
RASHMI VERMA

Best👍👍

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
priteshbhoi profile image
Pritesh Bhoi

nice 👌

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
rohitk570 profile image
ROHIT KUMAR

mine too ,but is ramen real??༼ つ ◕_◕ ༽つ

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

It's a dream for me lol.