JavaScript JS Tutorial JS Objects JS Functions JS Classes JS Async JS HTML DOM JS Browser BOM JS Web APIs JS AJAX JS JSON JS vs jQuery JS Graphics



JS Array Methods

JavaScript is a powerful programming language that is widely used in web development. One of the most important features of JavaScript is its ability to work with arrays. Arrays are a collection of values that can be accessed and manipulated using various methods. In this article, we will explore some of the most commonly used JavaScript array methods.

Brief Explanation of JS Array Methods

JavaScript provides a number of built-in methods that can be used to manipulate arrays. These methods include:

  • push(): Adds one or more elements to the end of an array.
  • pop(): Removes the last element from an array.
  • shift(): Removes the first element from an array.
  • unshift(): Adds one or more elements to the beginning of an array.
  • splice(): Adds or removes elements from an array at a specified index.
  • slice(): Returns a new array containing a portion of the original array.
  • concat(): Joins two or more arrays and returns a new array.
  • join(): Joins all elements of an array into a string.
  • reverse(): Reverses the order of the elements in an array.
  • sort(): Sorts the elements of an array.
  • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
  • map(): Creates a new array with the results of calling a provided function on every element in the calling array.
  • reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Code Examples

Let's take a look at some code examples to see how these array methods work.

push()

The push() method adds one or more elements to the end of an array:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.push('grape');
  console.log(fruits); // Output: ['apple', 'banana', 'orange', 'grape']
</script>

pop()

The pop() method removes the last element from an array:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.pop();
  console.log(fruits); // Output: ['apple', 'banana']
</script>

shift()

The shift() method removes the first element from an array:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.shift();
  console.log(fruits); // Output: ['banana', 'orange']
</script>

unshift()

The unshift() method adds one or more elements to the beginning of an array:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.unshift('grape');
  console.log(fruits); // Output: ['grape', 'apple', 'banana', 'orange']
</script>

splice()

The splice() method adds or removes elements from an array at a specified index:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.splice(1, 1, 'grape', 'kiwi');
  console.log(fruits); // Output: ['apple', 'grape', 'kiwi', 'orange']
</script>

slice()

The slice() method returns a new array containing a portion of the original array:

<script>
  let fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
  let citrus = fruits.slice(2, 4);
  console.log(citrus); // Output: ['orange', 'grape']
</script>

concat()

The concat() method joins two or more arrays and returns a new array:

<script>
  let fruits = ['apple', 'banana'];
  let vegetables = ['carrot', 'potato'];
  let food = fruits.concat(vegetables);
  console.log(food); // Output: ['apple', 'banana', 'carrot', 'potato']
</script>

join()

The join() method joins all elements of an array into a string:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  let fruitString = fruits.join(', ');
  console.log(fruitString); // Output: 'apple, banana, orange'
</script>

reverse()

The reverse() method reverses the order of the elements in an array:

<script>
  let fruits = ['apple', 'banana', 'orange'];
  fruits.reverse();
  console.log(fruits); // Output: ['orange', 'banana', 'apple']
</script>

sort()

The sort() method sorts the elements of an array:

<script>
  let fruits = ['orange', 'banana', 'apple'];
  fruits.sort();
  console.log(fruits); // Output: ['apple', 'banana', 'orange']
</script>

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function:

<script>
  let numbers = [1, 2, 3, 4, 5];
  let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
  });
  console.log(evenNumbers); // Output: [2, 4]
</script>

map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array:

<script>
  let numbers = [1, 2, 3, 4, 5];
  let doubledNumbers = numbers.map(function(number) {
    return number * 2;
  });
  console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
</script>

reduce()

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value:

<script>
  let numbers = [1, 2, 3, 4, 5];
  let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
  });
  console.log(sum); // Output: 15
</script>

Conclusion

JavaScript array methods are a powerful tool for manipulating arrays in web development. By using these methods, you can easily add, remove, and modify elements in an array, as well as perform more complex operations like filtering and mapping. With a solid understanding of these methods, you can take your JavaScript skills to the next level and build more dynamic and interactive web applications.

References

Activity