Over the last two weeks, I have been practicing JavaScript by solving challenges on Codewars. Many of my solutions worked, but I often solved problems using longer loops and multiple conditions before realizing that JavaScript already had methods that could express the same logic more clearly.<\/p>\n
Two methods that stood out to me were:<\/p>\n
.some()<\/code><\/li>\n.sort()<\/code><\/li>\n<\/ul>\nLearning these methods showed me that improving as a programmer is not only about getting the correct answer. It is also about learning how to make code shorter, clearer, and easier to understand.<\/p>\n
<\/p>\n
What I Learned From Solving Codewars Kata<\/h2>\n
Before learning more about array methods, I often approached challenges by manually building the entire solution.<\/p>\n
My usual process involved:<\/p>\n
\n- Creating an empty array.<\/li>\n
- Writing one or more
for<\/code> loops.<\/li>\n- Comparing values with several
if<\/code> and else if<\/code> statements.<\/li>\n- Adding values to a new array with
.push()<\/code>, .unshift()<\/code>, or .splice()<\/code>.<\/li>\n- Keeping track of additional variables, indexes, or flags.<\/li>\n<\/ol>\n
This approach helped me understand how the logic worked internally. Even when my solution was longer than necessary, writing it manually taught me how values move through a loop and how conditions control a program.<\/p>\n
However, I also learned that many JavaScript array methods already contain common looping behavior.<\/p>\n
Lesson One: Using .some()<\/code><\/h2>\nThe .some()<\/code> method checks whether at least one element<\/strong> in an array passes a test.<\/p>\nThe general syntax is:<\/p>\n
\n<\/span>array<\/span>.<\/span>some<\/span>((<\/span>element<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span>\n <\/span>return<\/span> <\/span>condition<\/span>;<\/span>\n});<\/span>\n<\/code><\/pre>\n<\/div>\nThe method returns a Boolean value:<\/p>\n
\n<\/span>true<\/span>\n<\/code><\/pre>\n<\/div>\nor:<\/p>\n
\n<\/span>false<\/span>\n<\/code><\/pre>\n<\/div>\nFor example:<\/p>\n
\n<\/span>const<\/span> <\/span>numbers<\/span> <\/span>=<\/span> <\/span>[<\/span>2<\/span>,<\/span> <\/span>4<\/span>,<\/span> <\/span>7<\/span>,<\/span> <\/span>10<\/span>];<\/span>\n\nconst<\/span> <\/span>hasOddNumber<\/span> <\/span>=<\/span> <\/span>numbers<\/span>.<\/span>some<\/span>((<\/span>number<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span>\n <\/span>return<\/span> <\/span>number<\/span> <\/span>%<\/span> <\/span>2<\/span> <\/span>!==<\/span> <\/span>0<\/span>;<\/span>\n});<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>hasOddNumber<\/span>);<\/span>\n\/\/ true<\/span>\n<\/code><\/pre>\n<\/div>\nThe result is true<\/code> because the array contains at least one odd number: 7<\/code>.<\/p>\nUnderstanding the Callback Parameter<\/h3>\n
In this example:<\/p>\n
\n<\/span>numbers<\/span>.<\/span>some<\/span>((<\/span>number<\/span>)<\/span> <\/span>=><\/span> <\/span>{<\/span>\n <\/span>return<\/span> <\/span>number<\/span> <\/span>%<\/span> <\/span>2<\/span> <\/span>!==<\/span> <\/span>0<\/span>;<\/span>\n});<\/span>\n<\/code><\/pre>\n<\/div>\nthe variable number<\/code> is created as a parameter of the callback function.<\/p>\nJavaScript passes each array element into number<\/code>, one at a time:<\/p>\n\n<\/span>First test:\n\nnumber = 2\n\n2 % 2 !== 0\n\nfalse\n<\/code><\/pre>\n<\/div>\n\n<\/span>Second test:\n\nnumber = 4\n\n4 % 2 !== 0\n\nfalse\n<\/code><\/pre>\n<\/div>\n\n<\/span>Third test:\n\nnumber = 7\n\n7 % 2 !== 0\n\ntrue\n<\/code><\/pre>\n<\/div>\nAs soon as .some()<\/code> finds a result that is true<\/code>, it can stop checking and return:<\/p>\n\n<\/span>true<\/span>\n<\/code><\/pre>\n<\/div>\nHow I Used .some()<\/code> in a Codewars Solution<\/h2>\nOne Codewars challenge required determining whether two characters had at least one possible replacement letter in common.<\/p>\n
Each character could be changed to the letter immediately before or after it in the alphabet.<\/p>\n
For example:<\/p>\n
\n<\/span>d \u2192 c or e\n<\/code><\/pre>\n<\/div>\nA helper function returned the possible choices:<\/p>\n
\n<\/span>function<\/span> <\/span>getChoices<\/span>(<\/span>letter<\/span>)<\/span> <\/span>{<\/span>\n <\/span>const<\/span> <\/span>alphabet<\/span> <\/span>=<\/span> <\/span>"abcdefghijklmnopqrstuvwxyz"<\/span>;<\/span>\n <\/span>const<\/span> <\/span>index<\/span> <\/span>=<\/span> <\/span>alphabet<\/span>.<\/span>indexOf<\/span>(<\/span>letter<\/span>);<\/span>\n\n <\/span>if<\/span> <\/span>(<\/span>letter<\/span> <\/span>===<\/span> <\/span>"a"<\/span>)<\/span> <\/span>{<\/span>\n <\/span>return<\/span> <\/span>[<\/span>"b"<\/span>];<\/span>\n <\/span>}<\/span>\n\n <\/span>if<\/span> <\/span>(<\/span>letter<\/span> <\/span>===<\/span> <\/span>"z"<\/span>)<\/span> <\/span>{<\/span>\n <\/span>return<\/span> <\/span>[<\/span>"y"<\/span>];<\/span>\n <\/span>}<\/span>\n\n <\/span>return<\/span> <\/span>[<\/span>\n <\/span>alphabet<\/span>[<\/span>index<\/span> <\/span>