JavaScript Array Methods

Arrays are a fundamental data structure in JavaScript, and they come equipped with a powerful set of methods that allow to manipulate and work with array data efficiently. In this article, we'll explore some of the most commonly used JavaScript array methods.

✔Array Methods

JavaScript array methods are pre-built functions that operate on arrays, making it easier to perform common tasks like iterating over elements, adding or removing items, searching for elements, and more.

✔Common Array Methods:

push() and pop() :
- push(): Adds one or more elements to the end of an array. Changes the length of the array and returns the new length.
- pop(): Removes (pops) the last element of an array. Changes the original array and returns the removed element.

    const fruits = ["Banana", "Orange", "Apple"];
    fruits.push("Mango"); // ["Banana", "Orange", "Apple", "Mango"]

    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.pop(); // "Mango"

unshift() and shift():
- unshift(): Adds new elements to the beginning of an array. Overwrites the original array.
- shift(): Removes the first item of an array. Changes the original array and returns the shifted element.

    const fruits = ["Banana", "Orange", "Apple"];
    fruits.unshift("Lemon","Mango"); 
    // ["Lemon","Mango","Banana", "Orange", "Apple"];

    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.shift(); // "Banana"

concat(): Combines two or more arrays and returns a new array, containing the joined arrays. Does not change the existing arrays.

  const arr1 = ["Yousra", "Baha"];
  const arr2 = ["Hosam", "Hazim"]; 
  const family = arr1.concat(arr2);
  // ["Yousra", "Baha", "Hosam", "Hazim"]

filter(): Creates a new array filled with elements that pass a test provided by a function. Does not change the original array.
```
  const ages = [32, 33, 16, 40];
  const result = ages.filter((age)=> age >= 18);
  // [32, 33, 40]
```

includes(): Returns true if an array contains a specified value and false if the value is not found.

  const fruits = ['apple', 'banana'];
  const hasBanana = fruits.includes('banana'); // true
  const hasOrange = fruits.includes('orange'); // false

slice(): Returns a shallow copy of a portion of an array into a new array, without modifying the original array. The method selects from a given start, up to a (not inclusive) given end.
```
  const fruits = ['apple', 'banana', 'cherry', 'date'];
  const slicedFruits = fruits.slice(1, 3); // ['banana', 'cherry']
```
map(): Creates a new array by calling a function for every array element. Does not execute the function for empty elements and does not change the original array.
```
  const numbers = [1, 2, 3];
  const doubledNumbers = numbers.map((num) => num * 2); // [2, 4, 6]
```

sort(): The sort() method in JavaScript is used to sort the elements of an array in place and return the sorted array. By default, it sorts elements alphabetically as strings. For example:

  const fruits = ['banana', 'apple', 'cherry'];
  fruits.sort();
  console.log(fruits); // Output: ['apple', 'banana', 'cherry']

To sort numbers numerically, you can provide a compare function as an argument to sort(), For example, to sort numbers in ascending order:

  const numbers = [3, 1, 100, 2, 10];
  numbers.sort((a, b) => a - b);
  console.log(numbers); // Output: [1, 2, 3, 10, 100]

To sort in descending order, simply reverse the order in the compare function.

You can also use sort() to sort an array of objects. Just provide a compare function that specifies how to compare the objects:

  const people = [
    { name: 'John', age: 30 },
    { name: 'Sara', age: 25 },
    { name: 'Bob', age: 35 }
  ];

  people.sort((a, b) => a.age - b.age);
  console.log(people);
  // Output: [
  //   { name: 'Sara', age: 25 },
  //   { name: 'John', age: 30 },
  //   { name: 'Bob', age: 35 }
  // ]

✔Conclusion

In conclusion, mastering JavaScript array methods is essential for any developer. These methods are foundational for many programming tasks, from simple iteration and data filtering to more complex data transformations and aggregations.