Introduction to Arrays in JavaScript
If you are new to programming and are learning JavaScript, or if you already have met JavaScript you know the term "array".
In this short introduction we’ll approach 3 key points in JavaScript Arrays:
- What is an array
- Basic concept
- Properties and methods
What is an Array?
An array is a data structure in JavaScript that allows you to store multiple values in a single variable. In this article, we will explore what arrays are, how to declare them, and some of the basic properties and methods that can be used with arrays.
To understand arrays in JavaScript, we could look at them as an example of a shopping list or a To-Do list.
A shopping list can have multiple items such as eggs, bread, milk, and butter. Instead of creating separate variables for each item, we can use an array to store all the items in a single variable.
Basic Concepts
The array can be declared by using square brackets [ ] and separating each item with a comma. The first item in an array is assigned an index of 0 (zero), the second item has an index of 1, and so on. Here is an example of an array of ingredients for a bagel:
let bagel = ['dough', 'salt', 'caraway', 'honey'];
In the above example, the array bagel contains four items: dough, salt, caraway, and honey. We can access each item in the array by using its index. For example, bagel[0] will give us the first item in the array, which is "dough". Similarly, bagel[1] will give us the second item, which is "salt", and so on.
Properties and Methods.
Arrays in JavaScript also have properties and methods that can be used to access information or perform certain actions. One of the most commonly used property is the length property, which gives us the number of items in an array. Here is an example of how to use the length property:
let bagel = ['dough', 'salt', 'caraway', 'honey'];
document.getElementById('title').innerText = bagel.length;
In the above example, we first declare an array of bagel with four items. Then, we use the length property to get the number of items in the bagel array and assign it to the innerText property of an HTML element with an ID of title. The output will be the number 4, which is the length of the bagel array.
We can also use the length property to create a dynamic string that tells us the number of items in the array. Here is an example:
let bagel = ['dough', 'salt', 'caraway', 'honey'];
document.getElementById('title').innerText =
`This bagel has ${bagel.length}ingredients`;
In this example, we use a template string to display a message that tells us how many ingredients are in the bagel array. The ${bagel.length} expression is used to access the value of the length property, which is then displayed in the string.
Another useful method in JavaScript arrays is includes(), which allows us to check if an item exists in the array. Here is an example of how to use the includes() method:
let bagel = ['dough', 'salt', 'caraway', 'honey'];
let hasSalt = bagel.includes('salt');
console.log(hasSalt);
In this example, we first declare an array of bagel with four items. Then, we use the includes() method to check if the bagel array contains the string 'salt'. The includes() method returns a boolean value, which we store in the hasSalt variable.
Let’s Recap:
- An array is a data structure in JavaScript that allows you to store multiple values in a single variable.
- Declaring an array in JavaScript is done by using square brackets and separating each item with a comma.
- Arrays in JavaScript have properties and methods that can be used to access information or perform certain actions.
- One of the most commonly used properties is the length property, which gives us the number of items in an array.
Knowing and understanding arrays is an essential aspect of learning JavaScript programming. With the ability to store multiple values in a single variable, arrays make it easier to handle data in a structured and organized way.
Knowing and understanding arrays is an essential aspect of learning JavaScript programming. With the ability to store multiple values in a single variable, arrays make it easier to handle data in a structured and organized way.
Do you need to find out more about JavaScript? Perhaps this article about variables explained in a simple vocabulary will help you. If you’d like to read an in-depth explanation about arrays you can check the Mozzila Mdn Web Docs here.
Is this helpful for you? Why not subscribe to the monthly newsletter and receive an email with all the articles I write about coding, and dev things, mainly JavaScript?
