No announcement
 

Forming Arrays, Array Methods, and Iterating through Arrays

Forming Arrays

Arrays in JavaScript are used to store multiple values in a single variable. You can create an array using an array literal (enclosed in square brackets []) or using the Array constructor.

Example:

forming_arrays.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Forming Arrays Example</title>
</head>
<body>

<h2>JavaScript Forming Arrays:</h2>
<script>
// Array Literal
let fruits = ["Apple", "Banana", "Orange"];

// Array Constructor
let numbers = new Array(1, 2, 3, 4, 5);

console.log(fruits); // Output: ["Apple", "Banana", "Orange"]
console.log(numbers); // Output: [1, 2, 3, 4, 5]
</script>

</body>
</html>

Output
["Apple", "Banana", "Orange"] [1, 2, 3, 4, 5]

In this example, we formed two arrays: fruits using an array literal and numbers using the Array constructor. Both arrays contain multiple elements.

Array Methods

Arrays in JavaScript have built-in methods to perform various operations. Some common array methods are push, pop, and slice.

Example:

array_methods.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Array Methods Example</title>
</head>
<body>

<h2>JavaScript Array Methods:</h2>
<script>
let numbers = [1, 2, 3, 4, 5];

// push() - Add elements to the end of the array
numbers.push(6, 7);
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6, 7]

// pop() - Remove the last element from the array
numbers.pop();
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

// slice() - Create a new array from a subset of the original array
let slicedArray = numbers.slice(2, 4);
console.log(slicedArray); // Output: [3, 4]
</script>

</body>
</html>

Output
[1, 2, 3, 4, 5, 6, 7] [1, 2, 3, 4, 5, 6] [3, 4]

In this example, we used the array methods push, pop, and slice on the numbers array. The push method added elements 6 and 7 to the end of the array. The pop method removed the last element from the array. The slice method created a new array containing elements at indices 2 and 3 from the original array.

Iterating through Arrays

JavaScript provides several methods for iterating through arrays, such as forEach, map, and filter.

Example:

array_iteration.html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Iterating through Arrays Example</title>
</head>
<body>

<h2>JavaScript Iterating through Arrays:</h2>
<script>
let numbers = [1, 2, 3, 4, 5];

// forEach() - Iterate through each element of the array
numbers.forEach(function(num) {
  console.log(num * 2);
});

// map() - Create a new array by applying a function to each element
let doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

// filter() - Create a new array with elements that pass a test
let evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]
</script>

</body>
</html>

Output
2 4 6 8 10 [2, 4, 6, 8, 10] [2, 4]

In this example, we used the array methods forEach, map, and filter to iterate through the numbers array. The forEach method iterated through each element of the array and logged its double. The map method created a new array containing elements that are double the elements of the original array. The filter method created a new array with only the even elements from the original array.

Array methods make it easier to perform various operations on arrays, such as adding and removing elements, creating new arrays based on existing ones, and filtering elements based on certain conditions. These methods are powerful tools for working with arrays in JavaScript.