Working with Arrays and Collections

Arrays and collections are data structures that allow you to store and manipulate a group of values. They are an essential part of JavaScript programming and can be used to store a wide variety of data types, including numbers, strings, objects, and more.

In this article, we’ll go over the basics of arrays and collections in JavaScript and how to use them to store and manipulate data.

Arrays

An array is an ordered collection of values. You can create an array in JavaScript by enclosing a comma-separated list of values in square brackets []. Here’s an example of how to create an array of numbers:

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

You can access the values in an array by using the array’s index. Array indices start at 0, so to access the first element of an array, you would use the index 0. Here’s an example of how to access the first element of an array:

var firstElement = numbers[0]; 
// firstElement is 1

You can also use the length property to get the number of elements in an array:

var numberOfElements = numbers.length; 
// numberOfElements is 5

Modifying Arrays

You can use various methods to modify the values in an array. Here are a few examples:

• The push method adds an element to the end of an array:

numbers.push(6); 
// numbers is now [1, 2, 3, 4, 5, 6]

• The unshift method adds an element to the beginning of an array:

numbers.unshift(0); 
// numbers is now [0, 1, 2, 3, 4, 5, 6]

• The splice method removes elements from an array and, optionally, adds new elements:

numbers.splice(3, 2); 
// numbers is now [0, 1, 2, 5, 6]

numbers.splice(3, 0, 3, 4); 
// numbers is now [0, 1, 2, 3, 4, 5, 6]

Iterating Over Arrays

You can use a for loop to iterate over the elements of an array. Here’s an example of how to use a for loop to iterate over an array:

for (var i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

You can also use the forEach method to iterate over an array. The forEach method takes a callback function as an argument, and the callback function is called for each element in the array. Here’s an example of how to use the forEach method:

numbers.forEach(function(number) {
  console.log(number);
});

Collections

In addition to arrays, JavaScript also has several built-in collection types, including Set, Map, and WeakMap.

A Set is a collection of unique values, meaning that it cannot contain duplicate values. You can create a Set by using the Set constructor.

Here’s an example of how to create a Set and add items to it:

var set = new Set();
set.add(1);
set.add(2);
set.add(3);

You can use the size property to get the number of items in a Set, and the has method to check if a Set contains a specific value.

Here’s an example of how to use the size property and the has method:

console.log(set.size); // 3
console.log(set.has(1)); // true
console.log(set.has(4)); // false

A Map is a collection of key-value pairs, where each key is unique. You can create a Map by using the Map constructor.

Here’s an example of how to create a Map and add items to it:

var map = new Map();
map.set("name", "John");
map.set("age", 30);

You can use the size property to get the number of items in a Map, and the get method to get the value of a specific key.

Here’s an example of how to use the size property and the get method:

console.log(map.size); // 2
console.log(map.get("name")); // "John"

A WeakMap is similar to a Map, but it only holds weak references to its keys, meaning that the keys can be garbage collected if there are no other references to them. This makes WeakMaps useful for storing data that you want to be automatically cleaned up when it is no longer needed.

To create a WeakMap, you need to use the WeakMap constructor and pass in an iterable of key-value pairs.

Here’s an example of how to create a WeakMap and add items to it:

var weakMap = new WeakMap([
  [{}, "value1"],
  [{}, "value2"]
]);

You can use the get method to retrieve the value of a specific key in a WeakMap.

Here’s an example of how to use the get method to retrieve a value from a WeakMap:

var value = weakMap.get(key); // "value"

Note that WeakMaps do not have a size property or a has method, so you cannot get the number of items in a WeakMap or check if a WeakMap contains a specific key.

Conclusion

In this article, we’ve covered the different types of arrays and collections in JavaScript and how to use them to store and manipulate data. By understanding how to work with arrays and collections, you’ll have the skills you need to create efficient and effective data structures for your JavaScript applications.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number * number);
});

var set = new Set(["apple", "banana", "cherry"]);
set.forEach(function(item) {
  console.log(item);
});

var objects = [
  {name: "John"},
  {name: "Jane"},
  {name: "Jim"}
];
objects.forEach(function(object) {
  console.log(object.name);
});

var set = new Set([1, 2, 3, 4, 5]);
console.log(set.size); // 5
console.log(set.has(5)); // true

var map = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);
console.log(map.get("key1")); // "value1"