DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JavaScript: The TL;DR on Array Methods
Minchul An
Minchul An

Posted on • Updated on

JavaScript: The TL;DR on Array Methods

Arrays
Arrays are ordered lists. They are in a class of relational data types that hold items such as numbers, strings, booleans, functions, and even arrays themselves.

An array is created using square brackets that hold each element separated by commas:

// An array containing numbers
const numberArray = [1, 2, 3, 4, 5];

// An array containing strings
const stringArray = ['one', 'two', 'three', 'four', 'five'];
Enter fullscreen mode Exit fullscreen mode

Index
Elements in an array are arranged by their index values with the first element's index starting at 0. Use bracket notation to access an element in an array:

Accessing elements in the numberArray:

console.log(numberArray[0]); 
// 1
console.log(numberArray[1]); 
// 2
console.log(numberArray[2]); 
// 3
Enter fullscreen mode Exit fullscreen mode

Accessing elements in the stringArray:

console.log(stringArray[0]); 
// "one"
console.log(stringArray[1]); 
// "two"
console.log(stringArray[2]); 
// "three"
Enter fullscreen mode Exit fullscreen mode

Methods
Methods are functions. Array methods are simply functions that can be applied to arrays. They are used to perform a change or calculation and is essentially built-in to save us from repeatedly writing common functions. Methods allow us to stay DRY (Don't Repeat Yourself).

Three useful array methods and its use cases:

  1. map
  2. filter
  3. forEach

Method.map()
Map can transform every element in an array to another value. It allows us to call a function on each of the items in an array. It will also return a new array, with modified elements, that's the same length as the original array.

For example, map can be used to double every value in an array of numbers:

const numbers = [1, 2, 3, 4, 5] 
numbers.map(num => num * 2); 
// [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

Method.filter()
Filter can search through a collection and execute a callback function on each element in an array. It allows us to check if items in an array meet a certain condition by implicitly checking our condition with the strict equality operator (===). If the condition is true, the callback function returns an entirely new array comprised of elements.

For example, filter can be used to filter through just the movie titles in our movies array:

const movies = [
   {
      title: 'Golden Eye',
      category: 'Thriller',
      rating: 95,
      year: 2010
   },
   {
      title: 'The Avengers',
      category: 'Action',
      rating: 98,
      year: 2020
   },
   {
      title: 'Love Actually',
      category: 'Romantic comedy',
      rating: 85,
      year: 1998
   },

]


movies.filter(movie => movie.title); 
// [{title: 'Golden Eye'}, {title: 'The Avengers'}, {title: 'Love Actually'}]
Enter fullscreen mode Exit fullscreen mode

Method.forEach()
For-each executes a callback function on each of the elements in an array in order. Note that this method doesn't return a new array like the filter and map methods aforementioned.

For example, forEach can be used to iterate through each of the elements in our numbers array:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number); 
// [1, 2, 3, 4, 5];
Enter fullscreen mode Exit fullscreen mode

An ordered list of other array methods:

  • concat
  • every
  • find
  • includes
  • indexOf
  • join
  • push
  • pop
  • reduce
  • reverse
  • shift
  • split
  • some
  • sort
  • splice
  • unshift

Mutability
Lastly, arrays are mutable β€” they can be changed. Oppositely, variables that cannot be changed are referred to as immutable. Although arrays can assign new values to its elements, we can use const at the time of declaration to prevent reassignment. However, this still does not prevent its contents from being manipulated, which can occur when using the methods aforementioned. To prevent our array from being truly immutable, we could use Object.freeze(). Another approach is to create a copy of the data using the spread operator. This allows us to modify the copied content while leaving the contents of the original array immutable:

const array = [1, 2, 3]; 
// [1, 2, 3, 4]
const newArray = [...array]; 
// [1, 2, 3, 4]
Enter fullscreen mode Exit fullscreen mode

To dive deeper into these concepts, head over to MDN Web Docs.

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!