Working with Arrays in JavaScript — A Complete Guide for Beginners

✍️ What are arrays?

Arrays are special data structures in JavaScript that allow you to store multiple values in one place. Imagine that you need to write a to-do list in a notebook. Each task is a separate entry. Arrays can be used to conveniently store entire lists of values, whether they are numbers, strings, or other data.

Arrays allow you to store data in an ordered form, which makes them very convenient for storing collections of the same type of values. This can be useful for storing data, such as a list of users, a shopping list, or even data that is dynamically updated during the program.

⭐ Example:

let shoppingList = ['milk', 'bread', 'eggs'];

Here shoppingList is an array containing three elements: "milk", "bread" and "eggs". With the help of an array, you can easily add new items, delete existing ones, and also iterate through the entire list to perform certain operations.

Arrays are also a great way to store different types of data. For example, an array can contain both numbers and strings, objects, and even other arrays, which makes it an incredibly flexible tool.

🛠️ Why do we need arrays?

Imagine that you want to save the grades of all students in the class. You could create separate variables for each student: grade1, grade2, grade3... But when there are many students, it becomes inconvenient and difficult to manage.

Arrays allow you to store all the scores in one variable and access them easily and conveniently:

let grades = [5, 4, 3, 5, 2];

Thus, you can use arrays to store multiple values in one variable. With arrays, it is much easier to add or remove grades, find the average value, and perform other operations.

In addition, arrays allow you to organize data in a more convenient format, which simplifies working with them. You can create an array of objects representing students, where each object will contain information about the student, such as name and grade:

let students = [
  { name: 'Anna', grade: 5 },
  { name: 'Boris', grade: 4 },
  { name: 'Victor', grade: 3 }
];

This approach makes your data structured and simplifies its use in programs.

🌱 How to work with arrays

Each element in the array has an index — this is the position at which the element is located. Indexing starts from scratch. For example:

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 'apple'

Here fruits[0] means "the first element of the array", that is, "apple". This is very important to remember, as many mistakes of novice programmers are associated with the incorrect use of indexing.

You can also change the values of array elements by simply assigning new values to certain indices:

fruits[1] = 'kiwi';
console.log(fruits); // ['apple', 'kiwi', 'orange']

Arrays make it easy to modify data, add new elements, and delete old ones.

🔧 Methods of working with arrays

Arrays in JavaScript have many convenient methods. Let's look at the most popular ones:

1. push() — Adding an element to the end of an array

The push() method adds a new element to the end of the array.

⭐ Example:

let shoppingList = ['milk', 'bread', 'eggs'];
shoppingList.push('cheese');
console.log(shoppingList); // ['milk', 'bread', 'eggs', 'cheese']']

This method is especially convenient when you need to expand the array and add new elements to the end of the list.

2. pop() — Removing an element from the end of an array

The pop() method removes the last element from the array.

⭐ Example:

let shoppingList = ['milk', 'bread', 'eggs'];
let lastItem = shoppingList.pop();
console.log(lastItem); // 'eggs'
console.log(shoppingList); // ['milk', 'bread']

pop() is useful when you need to remove the last element from an array, for example, when you no longer want to store the last added value.

3. shift() and unshift() — Working with the beginning of an array

shift() — removes the first element of the array:

⭐ Example:

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

This is useful when you need to remove the very first element and leave the rest.

unshift() — adds a new element to the beginning of the array:

⭐ Example:

let fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']

unshift() adds an element to the beginning of the array, shifting all other elements to the right.

4. forEach() — Iteration of array elements

The forEach() method allows you to perform a specific action for each element of the array.

⭐ Example:

let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// Conclusion:
// 'apple'// 'banana''
// 'orange'

This method allows you to iterate through all the elements of the array and perform a certain action with them, for example, display them on the screen.

5. map() — Transforming array elements

The map() method creates a new array by applying the function to each element of the original array.

⭐ Example:

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // [1, 4, 9, 16]

map() is useful when you need to convert all elements of an array while keeping the original array intact.

📈 Other useful methods

filter() — Creates a new array only with elements that satisfy the condition.

⭐ Example of using filter():

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

filter() allows you to select only those elements that match certain criteria, for example, only even numbers.

find() — Finds the first element that matches the condition.

⭐ Example:

let numbers = [1, 2, 3, 4, 5];
let firstEvenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});
console.log(firstEvenNumber); // 2

find() returns the first element that satisfies the condition, or undefined if there is no such element.

includes() — Checks if an element is in the array.

⭐ Example:

let fruits = ['apple', 'banana', 'orange'];
let hasApple = fruits.includes('apple');
console.log(hasApple); // true

let hasGrape = fruits.includes('grapes');
console.log(hasGrape); // false

includes() is useful when you need to quickly check if a certain value is contained in an array.

🏠 Results

Arrays are a powerful tool that allows you to conveniently store and work with data in JavaScript. They have many useful methods that will make it easier for you to manage lists and data collections. Arrays allow you to organize data and perform various operations with them, which makes them indispensable when working with JavaScript.

Learn how to use them, and working with JavaScript will become much more convenient and enjoyable! ✨😊

Don't be afraid to try different methods of working with arrays, experiment and learn in practice — this is the best way to master working with this important tool!