If you are new to programming and you are learning JavaScript, or if you already have met JavaScript you know the term “array”.
In this basic short introduction we’ll approach 3 keys in JavaScript Arrays that I consider important:
- What is an array
- Basic concept
- Properties and methods
3 Keys in JavaScript Arrays
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 it 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]
it will give us the first item in the array, which is “dough”. Similarly, bagel[1] this 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 properties 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 the 3 Keys in JavaScript Arrays:
- 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.
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.