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 WeakMap
s 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 WeakMap
s 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.
Create an array of numbers and use a loop to print the square of each number to the console.
var numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number * number);
});
Create a Set
of strings and use the forEach
method to print each string to the console.
var set = new Set(["apple", "banana", "cherry"]);
set.forEach(function(item) {
console.log(item);
});
Create an array of objects and use the forEach
method to print the name of each object to the console.
var objects = [
{name: "John"},
{name: "Jane"},
{name: "Jim"}
];
objects.forEach(function(object) {
console.log(object.name);
});
Create a Set
of numbers and use the size
property and the has
method to check if the set contains the number 5
.
var set = new Set([1, 2, 3, 4, 5]);
console.log(set.size); // 5
console.log(set.has(5)); // true
Create a Map
of key-value pairs and use the get
method to retrieve the value of the key "key1"
.
var map = new Map([
["key1", "value1"],
["key2", "value2"]
]);
console.log(map.get("key1")); // "value1"