The number of methods and properties that you need to know and remember to solve JavaScript problems and build apps can be intimidating. In learning JavaScript, I noticed that there were method names that are used by both strings and arrays.
In this article, I cover 7 methods that are used by both arrays and strings. Learn these 7 methods and you actually have learned 14 JavaScript methods. I also cover an additional 7 methods that use different method names for the same or opposite purpose.
String and Array methods in common
The easiest set of methods to learn is the methods that work for both arrays and strings. There are 5 methods that have the same name and same effect for both strings and arrays. There are also two “properties” in common to both strings and arrays.
The string and array slice() method
Use slice to return a copy or a portion of a string or array without mutating the original.
Use str.slice() to return a copy of the string.
Use arr.slice() to return a copy of the array.
Both methods can be used without any arguments, with a start index only, or with both a start and ending index. For more information on the methods check out MDN String Slice and Array Slice pages.
The string and array concat() method
The concat method concatenates, or merges, two or more strings or arrays together by adding the value in the parentheses to the end of the calling string/array. Check out MDN String concat and Array concat for more information.
Use str.concat(str2, str3, …) to join 2 or more strings and return a copy of the joined strings.
Use arr.concat(arr2, arr3, …) to join 2 or more arrays and return a copy of the joined arrays.
NOTE: Using the + and += assignment operators used with strings accomplishes the same effect as concat(). It is strongly recommended to use the assignment operators instead of the concat() method with strings.
The string and array includes() method
The includes method is extremely useful, especially as a condition in if statements. Take a look at MDN string includes and array includes for syntax and examples.
Use str.includes(value) to perform a case-sensitive search to determine whether one string may be found within another string, returning true or false as appropriate.
Use arr.includes(value) to determine whether an array includes a certain value among its entries, returns true or false.
The string and array indexOf() method
The indexOf method is also extremely useful for various purposes. Check out MDN string indexOf and array indexOf for more examples and syntax.
Use str.indexOf(value) to return the first index at which a given element can be found in the string, or -1 if it is not present.
Use arr.indexOf(value) to return the first index at which a given element can be found in the array, or -1 if it is not present.
The string and array lastIndexOf() method
The lastIndexOf method works as the indexOf method but searches starting at the end of the string or array. Check the string lastIndexOf and array lastIndexOf methods on MDN.
Use str.lastIndexOf(value) to return the last index at which a given element can be found in the string, or -1 if it is not present.
Use arr.lastIndexOf(value) to return the last index at which a given element can be found in the array, or -1 if it is not present.
Two properties in common: length and bracket notation
The following two techniques are not methods but are common to both strings and arrays. Both .length and bracket notation are very useful and you probably are already aware of them, but I wanted to include them all the same.
Use str.length and arr.length to return the length of the string and array respectively.
Use str[index] and arr[index] to return the string character and array value at the specified index respectively.
String and Array methods with different names but with similarities
Here are some other methods that have different names but have the same or opposite results. Personally, I do not use the first two methods and have only occasionally used the substring method.
charAt and at methods
Using str.charAt and arr.at returns the value at the index similar to bracket notation. There are reasons why you would use the arr.at() method over bracket notation (see MDN array at method), but I fail to see the application for the string charAt method.
Use str.charAt(index) to return the character at the index.
Use arr.at(index) to return the array item at the index.
Substring and splice (and slice) methods
Splice, slice, and substring all extract a part of an array or string. Substring and slice are identical with the exception of edge cases.
Use str.substring() to return a part of a string.
Use arr.splice() to return part of an array.
Slice and substring do not mutate the original source, but arr.splice() does. Check out MDN substring and array splice pages for more information. You should use all 3 methods on strings and arrays where applicable to understand the differences.
Split vs. Join methods
The split method is fantastic when working with strings. I believe I have only used the array join method in conjunction with split.
Use str.split() to turn a string into an array of substrings.
Use arr.join() to turn an array into a string.
NOTE: These two are often used in tandem. A common problem you will see is to turn a page or blog post title into a URL slug with a dash (-) as a separator. freeCodeCamp has an intermediate algorithm called Spinal Tap for that scenario but with some tricky test cases.
Check out the MDN pages on string split and array join for more information.
Final Thoughts
Hopefully, comparing JavaScript string and array methods like this has made learning JavaScript a little easier.
There are a handful of other string methods you should learn, and a lot more array methods as well. Let this article start you on the road to improving your understanding of JavaScript.
I have a repository on Github called JavaScript Cheat Sheet though it is way bigger than a cheat sheet, and is still a work-in-progress. Take a look at it and start building your own JavaScript cheat sheet to help you get coding better and faster!