DEV Community

Introduction To 11 Core JavaScript Functions To Improve Code Quality

Paul Knulst on January 22, 2023

JavaScript Is Everywhere, Even In Spaceships! Level Up Your Skills & Learn 11 Core JavaScript Functions To Remarkably Improve Code Quality. Pa...

Read full post

Jon Randy 🎖️ • Jan 23 '23 • Edited

Worth pointing out that startValue in reduce is optional. If omitted, it will take the first value from the array and the reducing will proceed from there. Care should be taken with this (passing an empty array will cause a TypeError), but it can result in more efficient code.

Paul Knulst • Jan 23 '23

Thanks for adding this! This is a really important addition.
Als, as you said: It should be taken with care because creating errors is really easy as reduce is complex :-D

feldmanovitch • Jan 23 '23

Reduce is one of these things where you read it in an article like this one or in a bootcamp and think „yeah that‘s totally straightforward“ but then you see what busted shit people are able to do with it in the wild and suddenly you feel like an ape in a cave 😂

Paul Knulst • Jan 23 '23

Oh yeah. reduce is really weird :-D.

Normally, it looks so simple but in practice it destroy your sanity.

Froxx93 • Jan 25 '23

I didn't know about every(). Good to know.
I used to use filter() and compare the resulting and the origin arrays' lengths, but that's nicer.

Instead of some() I could also use find(). Is there any reason why I shouldn't use it instead?

Paul Knulst • Jan 25 '23

That's a good question.
As I know in terms of performance they are the same.

The main difference is that find() will return the first element which satisfies the provided function and some() will return true or false.

So if you want to find AND return an element you should use find(). If you only want to know if the array contains the element you should use some()

Danny Engelman • Jan 25 '23

array-methods.github.io

Paul Knulst • Jan 25 '23

This is really helpful!

React Hunter • Jan 25 '23

thank you
I didn't know about the some() function before

Paul Knulst • Jan 26 '23

No problem. Hopefully, you will use it now. It sometimes can help. Especially, if you only want to check if a given comparison is true for the array and do not want to return the element where it is true.

Matthew Joseph • Jan 23 '23

Loved the article! All of these array methods are very useful.

Paul Knulst • Jan 23 '23

Thank you for your feedback :)

junaidP7 • Jan 23 '23

Thanks so much for this ;D

Paul Knulst • Jan 23 '23

Thank you for reading it! Hope it helps :)

I, Pavlov • Jan 30 '23

It is important that the anonymous function that you pass to filter() has to return a Boolean value: true or false.

There is no requirement that the functions passed to map, filter etc. be anonymous or even arrow/lambdas. Well-named functions improve code quality (except in the most trivial cases).

const over = target => ({score}) => score > target 
console.log(students.some(over(90)); // true
console.log(students.every(over(90)); // false

Filter, some, every etc. expect "truthy" and not Boolean but using truthy instead of true in most cases is a hack which does not improve code quality:

const input = [1, 2, 3, 4];

const odd = x => x % 2 === 1; // true if odd
const oddTruthy = x => x % 2; // truthy if odd

const result1 = input.filter(odd); // [1, 3]
const result2 = input.filter(oddTruthy); // [1, 3]

function oddFunc(element, index, array) {
  return element % 2 ? "sure" : undefined; // but why?
}
const result3 = input.filter(oddFunc); // [1, 3]

Yamiteru • Jan 28 '23

You haven't defined what code quality means and I dare to disagree that these (very basic) array methods make the quality of your code better.

So maybe could you please elaborate on what code quality means and how exactly this type of methods makes the quality of the code higher?

DaveSeth601 • Jan 25 '23

Loved the article! All of these array methods are very useful. You can see more article like this on this website