Arrays are one of JavaScript's most powerful and widely used data structures. They work like magic boxes, allowing you to store many values in a single variable. Whether you're developing a basic app or working on complex projects, arrays are your go-to tool.
Let's break out arrays step by step, using simple examples and practical use cases. π
π What is an Array?
An array is a special variable, which can hold more than one value.
β How to Create an Array?
Using an array literal is the easiest way to create a JavaScript Array.
β Syntax:
const array_name = [value1, value2, ...];
π Example:
const languages = ["JavaScript", "PHP", "Python"];
βοΈ Explanation:
-
languages
is an array. - It holds three values:
"JavaScript"
,"PHP"
, and"Python"
. - Each value has a position (called an index).
π‘ Understanding Array Index
Array indexes start from 0
. Here's how you access the elements:
console.log(languages[0]); // Output: JavaScript
console.log(languages[1]); // Output: PHP
console.log(languages[2]); // Output: Python
π Iterating Over an Array
You may use loops to go through all the elements in an array. The forEach()
method is easy and beginner-friendly.
π Example:
languages.forEach(function(language, index) {
console.log(index +" => "+ language);
});
/* Output:
0 => JavaScript
1 => PHP
2 => Python
*/
π Array Methods and Properties
Here are some cool methods and properties to play with arrays:
1οΈβ£ length
Property
It returns the length of an array, which is the number of its items.
π Example:
let length = languages.length;
console.log(length); // Output: 3
2οΈβ£ push()
method
For adding a new element at the end.
π Example:
languages.push("Java");
console.log(languages); // Output: ['JavaScript', 'PHP', 'Python', 'Java']
3οΈβ£ unshift()
method
For adding a new element at the beginning.
π Example:
languages.unshift("C");
console.log(languages); // Output: ['C', 'JavaScript', 'PHP', 'Python', 'Java']
4οΈβ£ pop()
method
To remove the last element.
π Example:
languages.pop();
console.log(languages); // Output: ['C', 'JavaScript', 'PHP', 'Python']
5οΈβ£ shift()
method
To remove the first element.
π Example:
languages.shift();
console.log(languages); // Output: ['JavaScript', 'PHP', 'Python']
6οΈβ£ toString()
method
Converts an array to a string of array values separated by commas.
π Example:
let arrString = languages.toString();
console.log(arrString); // Output: JavaScript,PHP,Python
7οΈβ£ at()
method
It accepts an integer value and returns the item at that index, accepting both positive and negative integers. Negative integers count in reverse from the last item in the array.
π Example:
let value1 = languages.at(2);
console.log(value1); // Output: Python
let value2 = languages.at(-1);
console.log(value2); // Output: Python
8οΈβ£ join()
method
Combines all elements into a string. It behaves exactly like toString()
, except you can also provide the separator.
π Example:
let arrJoin = languages.join(" | ");
console.log(arrJoin); // Output: JavaScript | PHP | Python
9οΈβ£ find()
method
This will return the first entry in the array that passes the specified condition. If none of the values satisfy the condition, undefined
is returned.
π Example:
let arrFind1 = languages.find(language => language === "PHP");
console.log(arrFind1); // Output: PHP
let arrFind2 = languages.find(language => language === "javascript");
console.log(arrFind2); // Output: undefined
π sort()
method
Sorts the elements of an array.
π Example:
let numberArr = [40,34,1,12,78,90];
console.log(numberArr.sort()); // Output: [1, 12, 34, 40, 78, 90]
let monthsArr = ['March', 'Jan', 'Feb', 'Dec'];
console.log(monthsArr.sort()); // Output: ['Dec', 'Feb', 'Jan', 'March']
There are numerous additional array methods available. Explore them on your own with the help of a search engine and experiment with them; it will be fun to do!π
βοΈ Why Learn Arrays?
Arrays are everywhere in JavaScript! Understanding arrays will open up new opportunities for you as a developer, from data management in apps to API processing.
Conclusion
Arrays are your best buddy when dealing with many values. Start to practice the concepts we discussed, and try out arrays in tiny projects.
Happy coding!β¨
Top comments (0)