JavaScript 101: Arrays and Array Methods Made Easy

JavaScript 101: Arrays and Array Methods Made Easy

In this tutorial, we'll cover the basics of arrays and some of the most commonly used array methods in JavaScript

An array is a collection of values that can be used to store multiple items of the same data type. Arrays are a fundamental data structure in JavaScript, and they can be used to store and manipulate a wide range of information.

Creating an Array:

To create an array in JavaScript, you can use the [] notation. For example, to create an array of numbers, you can write:

let numbers = [1, 2, 3, 4, 5];

You can also create an array of strings, like this:

let fruits = ['apple', 'banana', 'orange'];

You can even create an array of mixed data types, like this:

let mixed = [1, 'hello', true, [1, 2, 3]];

Accessing Array Elements:

Once you have an array, you can access its elements using the [] notation. The index of the first element in an array is 0, and the index of the last element is the length of the array minus 1. For example, to access the first element of the fruits array, you can write:

let fruits = ['apple', 'banana', 'orange']; // indexing starts from 0
console.log(fruits[0]); // Output: 'apple'

Adding and Removing Elements:

JavaScript provides a variety of methods that can be used to add and remove elements from an array. The .push() method adds an element to the end of an array, like this:

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

The .unshift() method adds an element to the beginning of an array, like this:

let fruits = ['apple', 'banana', 'orange', 'Mango'];
fruits.unshift('kiwi');
console.log(fruits); // Output: ['kiwi', 'apple', 'banana', 'orange', 'mango']

The .pop() method removes the last element of an array, like this:

let fruits = ['Kiwi', 'apple', 'banana', 'orange', 'Mango'];
fruits.pop();
console.log(fruits); // Output: ['kiwi', 'apple', 'banana', 'orange']

The .shift() method removes the first element of an array, like this:

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

Array Methods:

JavaScript provides a variety of built-in methods that can be used to manipulate arrays. Some of the most commonly used array methods include:

  • .sort(): Sorts the elements of an array in ascending or descending order.
let numbers = [5, 2, 7, 1, 3];
numbers.sort();
console.log(numbers); // Output: [1, 2, 3, 5, 7]
  • .reverse(): Reverses the order of the elements in an array.
let fruits = ['apple', 'banana', 'orange'];
fruits.reverse();
console.log(fruits)
  • .slice(): Extracts a portion of an array and returns a new array.
let fruits = ['apple', 'banana', 'orange', 'mango'];
let newFruits = fruits.slice(1, 3);
console.log(newFruits); // Output: ['banana', 'orange']
  • .map(): Creates a new array with the results of calling a provided function on every element in the calling array.
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
  • .filter(): Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0; // even numbers
});
console.log(evenNumbers); // Output: [2, 4]
  • .reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
});
console.log(sum); // Output: 15
  • .forEach(): Executes a provided function once for each array element.
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) { 
  console.log(fruit);
});
// Output: 'apple'
//         'banana'
//         'orange'

These are just a few examples of the many array methods available in JavaScript. By mastering these methods, you can become proficient in manipulating arrays, which is a crucial skill for any JavaScript developer.

In conclusion, arrays are fundamental data structures in javascript and it's important for developers to be familiar with array methods that could help manipulate the data in arrays. It is also important to note that array methods do not change the original array but they return a new array with the changes made.

I'd love to connect with you via Twitter & LinkedIn

Happy hacking!