{"id":16554,"date":"2022-09-08T04:50:43","date_gmt":"2022-09-08T11:50:43","guid":{"rendered":"https:\/\/coderpad.io\/?p=16554"},"modified":"2023-06-05T14:10:21","modified_gmt":"2023-06-05T21:10:21","slug":"javascript-some-method","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/javascript-some-method\/","title":{"rendered":"JavaScript .some() Method: When and How to Use It"},"content":{"rendered":"\n

Arrays in JavaScript offer many built-in functionalities that many developers are unaware of, among these is the .some()<\/code> method.<\/p>\n\n\n\n

The .some()<\/code> method comes in handy when the developer needs to check for a condition on an array and wants to know if at least one element fulfills that condition. This condition is passed in as a function that runs for each element of the array and exits execution the moment a true value is returned from the function. You also have access to that particular element as one of the function arguments. <\/p>\n\n\n\n

Let\u2019s understand the syntax of the .some()<\/code> method. <\/p>\n\n\n

some((element, index, array<\/span>) =><\/span> { \/* condition function returns boolean *\/<\/span> } )\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here we have the element in context (the element of the array). The condition function<\/em> will run on each member of the array unless the array is exhausted or the condition function returns true<\/code>. Let’s take a simple example to understand this better. <\/p>\n\n\n\n
Understanding some() with an example<\/strong><\/h3>\n\n\n\n
Say we run an online direct-from-the-farm fruit delivery service. If a user has any item that costs more than $30.00 added to their cart, we’ll offer them free delivery. We can assume that the cart items in memory exist as per the following basic data structure: <\/p>\n\n\n
const<\/span> itemsInCart = [\n\u00a0\u00a0{ id<\/span>: 123<\/span>, name<\/span>: \u201cApple\u201d, cost<\/span>: 10<\/span>, quantity<\/span>: 6<\/span> },\n\u00a0\u00a0{ id<\/span>: 456<\/span>, name<\/span>: \u201cCoconut\u201d, cost<\/span>: 40<\/span>, quantity<\/span>: 1<\/span> },\n\u00a0\u00a0{ id<\/span>: 789<\/span>, name<\/span>: \u201cOrange\u201d, cost<\/span>: 15<\/span>, quantity<\/span>: 2<\/span> }\n]<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The first thing we’ll do is set a flag variable isOver30<\/code> as false <\/code>so that we can set it to true <\/code>once our desired condition is fulfilled. We’ll then run a .forEach()<\/code> loop on the cart items’ array to keep looking for any item that costs more than $30. If we find an item that costs more than $30, the flag will be set totrue<\/code>, and the loop will be exited.<\/p>\n\n\n
let<\/span> isOver30= false<\/span>;\n\nitemsInCart.forEach((item<\/span>) =><\/span> {\n  if<\/span> (item.cost > 30<\/span>) {\n    isOver30= true<\/span>;\n    return<\/span>;\n  }\n});\n\n\/\/ use the isOver30 flag to make further decisions<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Wait a minute. The .forEach()<\/code>method does not let us exit the loop once done. Once the function passes the “coconut” object, our condition would be renderedtrue<\/code>. Thus, we don’t need to continue anymore. But .forEach<\/code> runs on all the elements of an array. This means it’s overkill in our case. <\/p>\n\n\n\n
Even return statements inside .forEach()<\/code> act as continue statements\u2014not like break statements, which we require. Well, it’s quite easy to exit out of a good old for<\/code> loop. So, let’s give it a shot: <\/p>\n\n\n
let<\/span> isOver30= false<\/span>;\nfor<\/span> (let<\/span> index = 0<\/span>; index < itemsInCart.length; index++) {\n  const<\/span> item = itemsInCart[index];\n  if<\/span> (item.cost > 30<\/span>) {\n    isOver30 = true<\/span>;\n    break<\/span>;\n  }\n}\n\/\/ use the isOver30 flag to make further decisions<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
While this would suffice, it\u2019s not the most readable code.<\/p>\n\n\n\n
Making the code cleaner<\/strong><\/h3>\n\n\n\n
Now let us use the .some()<\/code> method to take care of this logic in a cleaner manner. <\/p>\n\n\n
const<\/span> conditionFunc = item<\/span> =><\/span> item.cost > 30<\/span>;\nconst<\/span> isEligibleForFreeDelivery = itemsInCart.some(conditionFunc);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Two lines \u2013that\u2019s all it takes. We\u2019ve cut our code length by almost 75% with the .some()<\/code>method. We could technically even bring this down to one line, as our conditionFunc<\/code> is a straightforward function. <\/p>\n\n\n
const<\/span> isEligibleForFreeDelivery = itemsInCart.some((item<\/span>) =><\/span> item.cost > 30<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The .some()<\/code>method stops execution once our condition function returnstrue<\/code>. That means that .some()<\/code> does not even operate on all the elements of an array, unlike methods like .forEach()<\/code>. This makes .some()<\/code> an ideal method when you don\u2019t want to iterate over every element of an array. Apart from the element itself, we also have access to the index and the whole array, as well as inside the conditionFunc<\/code>. Developers can use this to solve their problems as they see fit. <\/p>\n\n\n\n
Understanding the difference between some() and every()<\/strong><\/h2>\n\n\n\n
The .some()<\/code> method is built on the same foundation as that of the methods .every()<\/code> and .find()<\/code>. The .every()<\/code> method returnstrue <\/code>if every array element passes the provided condition, stops execution, and returns false <\/code>the moment even one element does not fulfill the condition. <\/p>\n\n\n\n
On the other hand, the .find()<\/code> method returns the first element that satisfies the provided condition. Because of this, it’s similar to the functionality of the .some()<\/code> method. <\/p>\n\n\n\n
Of course, this could all technically be achieved with a for<\/code> loop or in a custom manner. However, you’re also required to appropriately document andexplain your functions<\/a> so that other developers can use them. You have to name them right, add tons of comments, and hope future devs understand what you’re talking about. <\/p>\n\n\n\n
You don\u2019t have to worry about that with standardized JavaScript functions like .some()<\/code> and .find()<\/code>. With these methods, it’s much easier to deduce the purpose of that particular block of code without understanding its actual logic. This is the reason it’s best practice to use a built-in function if there’s one for what a developer is trying to achieve. <\/p>\n\n\n\n
Just check out this code snippet to see for yourself:<\/p>\n\n\n
const<\/span> users = [\n  { name<\/span>: \"John\"<\/span>, age<\/span>: 20<\/span> },\n  { name<\/span>: \"Sarah\"<\/span>, age<\/span>: 19<\/span> },\n  { name<\/span>: \"Bob\"<\/span>, age<\/span>: 30<\/span> },\n  { name<\/span>: \"Alice\"<\/span>, age<\/span>: 25<\/span> },\n];\n\n\/\/ Using some() functions to check if any of the users are older than 20<\/span>\nconst<\/span> olderThan20 = users.some((user<\/span>) =><\/span> user.age > 20<\/span>);\nconsole<\/span>.log(olderThan20);  \/\/ true<\/span>\n\n\/\/ Using every() function to check if all users are older than 20<\/span>\nconst<\/span> allOlderThan20 = users.every((user<\/span>) =><\/span> user.age > 20<\/span>);\nconsole<\/span>.log(allOlderThan20); \/\/false<\/span>\n\n\/\/ Using find() function to find the first user older than 20<\/span>\nconst<\/span> firstOlderThan20 = users.find((user<\/span>) =><\/span> user.age > 20<\/span>);\n\n\/\/ Using find() function to find the first user older than 20 and return the name<\/span>\nconst<\/span> firstOlderThan20Name = users.find((user<\/span>) =><\/span> user.age > 20<\/span>).name;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Best practices for using some() in JavaScript<\/strong><\/h2>\n\n\n\n
The advantage of using .some()<\/code> over other methods for similar tasks is that the final code is cleaner than the conventional approaches we discussed. This will allow future devs to understand this code’s purpose and extend it accordingly. <\/p>\n\n\n\n
There are a few instances when we should stick to the for<\/code> loops: <\/p>\n\n\n\n
  1. If the conditions are more complex than in our example above<\/li>
  2. If we need to operate on multiple arrays<\/li>
  3. If there are multiple exit conditions, which will then make your functions highly tailored to your problem and not a one-size-fits-all approach<\/li><\/ol>\n\n\n\n
    It all depends on your use case. If you need to run condition checks on elements of an array and need at least one of them to be true, then .some()<\/code> is the way to go.<\/p>\n\n\n\n
    Wrapping up<\/strong><\/h2>\n\n\n\n
    JavaScript keeps coming up with practical built-in methods that offer ease and convenience for current and future developers of any given codebase, thus allowing everyone to build solutions rapidly. The .some()<\/code> array<\/a> is another method that solves a particular problem. It won’t be the solution to all our problems, but whenever it is, it can render a final code output that is extremely clean and high quality. <\/p>\n\n\n\n
    This post was written by Keshav Malik. <\/em>Keshav<\/em><\/a> is a full-time developer who loves to build and break stuff. He is constantly looking for new and exciting technologies and enjoys working with diverse technologies in his spare time. He loves music and plays badminton whenever the opportunity presents itself.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    JavaScript arrays offer lots of built-in functionality. Explore the usability of the .some() function, what it offers, and what it can achieve.<\/p>\n","protected":false},"author":12,"featured_media":16560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[33],"keyword-cluster":[],"class_list":["post-16554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/16554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=16554"}],"version-history":[{"count":66,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/16554\/revisions"}],"predecessor-version":[{"id":16713,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/16554\/revisions\/16713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/16560"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=16554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=16554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=16554"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=16554"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=16554"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=16554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}