JavaScript Arrays: Exploring Methods and Immutability

Arrays are a fundamental data structure in JavaScript that allow us to store and manipulate collections of elements. In this article, we'll explore arrays, learn about accessing elements by index, and delve into some commonly used array methods. Additionally, we'll discuss array mutability and techniques to create immutable arrays.

Creating and Accessing Elements in Arrays:
Arrays are created using square brackets and can hold various data types, including numbers, strings, booleans, functions, and even other arrays. Each element in an array is assigned an index, with the first element starting at index 0. To access elements in an array, we use bracket notation.

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

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

// Accessing elements in the array
console.log(stringArray[0]); 
// "one"
console.log(stringArray[1]); 
// "two"
console.log(stringArray[2]); 
// "three"

Commonly Used Array Methods:
JavaScript provides several built-in methods that make working with arrays more convenient and efficient. Let's explore three useful array methods: map, filter, and forEach.

1) map: This method transforms each element in an array and returns a new array with the modified elements. It executes a callback function on each item and replaces it with the result.

Example:

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

2) filter: The filter method creates a new array containing elements that satisfy a given condition. It executes a callback function on each item and returns a new array with only the elements that meet the condition.

Example:

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'}]

3) forEach: The forEach method executes a callback function on each element in an array. It is useful for performing operations on each item without creating a new array.

Example:

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

Array Mutability and Immutable Techniques:
Arrays in JavaScript are mutable, meaning their elements can be changed. However, we can create a copy of an array to preserve the original data while making modifications. The spread operator (...) can be used to create a shallow copy of an array.

Example:

const array = [1, 2, 3];
const newArray = [...array, 4];
console.log(newArray); // [1, 2, 3, 4]

As you can see, arrays are a powerful data structure in JavaScript that allow us to store and manipulate collections of elements. We learned how to create arrays, access elements by index, and explored some commonly used array methods like map, filter, and forEach.

It's important to understand array mutability. Although arrays are mutable by default, we can create immutable arrays by making copies of the original array using techniques like the spread operator (...). This allows us to modify the copied content while leaving the original array unchanged. Alternatively, Object.freeze() can be used to make the array itself immutable, but not its contents.

By leveraging arrays and their methods, we can efficiently manipulate and transform data, making our code more readable and maintainable. Understanding arrays and their methods is essential for effective JavaScript programming.

Happy coding!

MDN Web Docs