DEV Community

Abdulsemiu Wasilat
Abdulsemiu Wasilat

Posted on

Explanation on Arrays and Arrays method

Certainly, let's break down arrays and their methods in JavaScript:

What is an Array?

  • In JavaScript, an array is a special type of object used to store a collection of values (elements) under a single variable name.
  • These values can be of different data types (numbers, strings, booleans, objects, even other arrays).

Key Characteristics:

  • Ordered: Elements in an array have a specific order, and their positions are indexed starting from 0.
  • Mutable: You can change the elements within an array after it's created.
  • Dynamic: Arrays can grow or shrink in size as needed.

Creating an Array:

  • Literal Notation:
   const myArray = [1, "hello", true, null]; 
Enter fullscreen mode Exit fullscreen mode
  • Using the Array constructor:
   const anotherArray = new Array(5); // Creates an array with 5 empty slots
   const yetAnotherArray = new Array(1, 2, 3); 
Enter fullscreen mode Exit fullscreen mode

Accessing Array Elements:

  • Use square bracket notation with the index:
   const fruits = ["apple", "banana", "orange"];
   console.log(fruits[0]); // Output: "apple" (first element)
   console.log(fruits[2]); // Output: "orange" (third element)
Enter fullscreen mode Exit fullscreen mode

Modifying Array Elements:

  • Assign a new value to the desired index:
   fruits[1] = "grape"; 
   console.log(fruits); // Output: ["apple", "grape", "orange"]
Enter fullscreen mode Exit fullscreen mode

Common Array Methods:

  • push(): Adds one or more elements to the end of the array.
   fruits.push("mango"); 
Enter fullscreen mode Exit fullscreen mode
  • pop(): Removes the last element from the array and returns it.
   const removedFruit = fruits.pop(); 
Enter fullscreen mode Exit fullscreen mode
  • unshift(): Adds one or more elements to the beginning of the array.
   fruits.unshift("kiwi"); 
Enter fullscreen mode Exit fullscreen mode
  • shift(): Removes the first element from the array and returns it.
   const firstFruit = fruits.shift(); 
Enter fullscreen mode Exit fullscreen mode
  • slice(): Creates a shallow copy of a portion of the array.
   const citrusFruits = fruits.slice(1, 3); // Elements from index 1 to 2 (exclusive)
Enter fullscreen mode Exit fullscreen mode
  • splice(): Adds/removes elements from an array at a specified position.
   fruits.splice(1, 0, "pear"); // Insert "pear" at index 1
   fruits.splice(2, 1); // Remove 1 element starting from index 2
Enter fullscreen mode Exit fullscreen mode
  • concat(): Creates a new array by concatenating existing arrays.
   const combinedFruits = fruits.concat(["pineapple", "strawberry"]); 
Enter fullscreen mode Exit fullscreen mode
  • join(): Joins all array elements into a single string, separated by a specified separator.
   const fruitString = fruits.join(", "); 
Enter fullscreen mode Exit fullscreen mode
  • indexOf(): Returns the first index of a given element.
   const index = fruits.indexOf("apple"); 
Enter fullscreen mode Exit fullscreen mode
  • includes(): Checks if an array includes a certain element.
   const hasBanana = fruits.includes("banana"); 
Enter fullscreen mode Exit fullscreen mode
  • forEach(): Executes a provided function once for each array element.
   fruits.forEach(fruit => console.log(fruit)); 
Enter fullscreen mode Exit fullscreen mode
  • map(): Creates a new array by applying a function to each element of the original array.
   const fruitLengths = fruits.map(fruit => fruit.length); 
Enter fullscreen mode Exit fullscreen mode
  • filter(): Creates a new array with only the elements that pass a test provided by a function.
   const longFruits = fruits.filter(fruit => fruit.length > 5); 
Enter fullscreen mode Exit fullscreen mode

This is a basic overview of arrays and their methods in JavaScript. There are many more methods available, each with its own specific purpose. I hope this helps!

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more