A collection of the most used JavaScript methods for writing clean and efficient code
Photo by Tyler Franta on Unsplash
JavaScript is a language that needs no introduction. With 69% of the mighty developer population using it in their daily lives, it’s very easy to say it’s one of the most popular programming languages that exist out there. According to The State of Developer Ecosystem 2019 survey conducted by JetBrains, JavaScript and its frameworks top all the categories in the poll.
Although ES7 or ECMAScript 2016 syntax is already out, a majority of developers still use ES6 or ES5 while writing code. In this article, we are going to take a look at some of the most useful JS methods available as of the ES 2016 release.
Arrays
Arrays are one of the most used data types in JS, and luckily we have a very good set of methods to make any array operation a walk in the park.
1. find()
Finding if a particular value exists in a given array is one of the most basic operations we will have to perform on an array in almost every case. The find method is a very short and sleek method that does this for you in JS, avoiding the need to write loops on your own every time you want to find something.
This is very useful in conditional statements where want to proceed only if the value is present. Line 8 in the above code snippet statement will return true if 4 exists in the array, and false otherwise. Short and simple! And you can perform the same operation on an array of objects as well.
find() on an array of objects
2. findIndex()
It does what it says, gives you the index value if the value is present in the array and -1 if it’s not present.
Note:find and findIndex() methods will return the first element or its position that satisfies the given test function or expression.
3. filter()
It gives you a new array, with all the values from the given array that satisfy the given condition or test.
The same method works with an array of objects as well.
filter() on array of objects
4.includes()
The include method simply returns true or false after checking whether the given array contains the provided element or not.
5. Spread operator
The spread operator is a utility operator that be used for multiple purposes, like copying an array or concatenating two arrays.
spread operat
Strings
Now let’s take a look at some of the most commonly used methods on strings available on JS. One important thing to note here is that all these methods are case sensitive, so be cautious when you use them in such scenarios.
1.startsWith()
Yes, you guessed it right. It tells you if a given string starts with a particular substring.
2.endsWith()
Obviously there is an endsWith() as well. It returns true if a given string starts with a particular substring, and false otherwise.
3. includes()
includes() method quickly checks if the string includes a given substring and returns a corresponding boolean value.
Objects
“In JavaScript, objects are king. If you understand objects, you understand JavaScript “— W3Schools
Everything in JS can be considered as an object. But in this case, we will be talking about methods on objects as in common JSON object lit.
Creating and copying objects
The Object.assign() method can be used to copy all enumerable own properties values to a target object from one or more source objects.
Object.assign()
This method can also be used to clone an existing object into a new one.
If you’re dealing with nested objects, you should note that Object.assign() will only create a shallow copy, which will duplicate the top-level properties, but the nested object is shared between the original object and the copied object, i.e. a reference to the original object was copied.
One of the quickest ways to get around this shortcoming in JS is to stringify the JSON and parse it again before assigning it to the new object.
This gives us a copy of the original object with all the nested properties (except methods), and it creates this copy without reference to the original object. So any changes made to the new object will not be reflected in the original Object.
Note: Some of these methods may not work in legacy browsers like IE. Check browser compatibility and make sure you’re using transpilers or polyfills in your project if you need to support these browsers.