Javascript Array Tutorial for Beginners. An array is a variable for storing data sequentially. Array data is stored using an index to facilitate search. Unlike variables that only store value, arrays can hold several values.
Data contained in arrays are called Elements of arrays, and an index indicates the location of each array element. Javascript arrays have an upper and lower limit, where data stored between the two limits.
Table of Contents
- 1 Understanding Arrays in JavaScript
- 2 Array methods Javascript
- 2.1 Push() method
- 2.2 Unshift() method
- 2.3 Delete() Method
- 2.4 Pop() Method
- 2.5 Shift() Method
- 2.6 Slice() Method
- 2.7 Splice() Method
- 2.8 Concat() Method
- 2.9 Join() Method
- 2.10 Reverse() Method
- 2.11 Sort() Javascript Array Method
- 2.12 Filter() Method
- 2.13 Includes() Method
- 2.14 Map() method
- 2.15 Some() Method
- 2.16 Every() Method
- 2.17 Array.of() method
- 3 Conclusion
Understanding Arrays in JavaScript
An array is a data type that contains a collection of values or other data types.
Index numbering in the array starts at number 0, so the first element is at index 0; the second element is at index 1, and so forth. The maximum index that can be accommodated by an array in JavaScript is 4,294,967,294 (2 ^ 23 – 2), with the maximum number of elements is 4,294,967,295.
Javascript Array is an untyped array. Elements of arrays can be of type string, number and boolean in the same array, even elements of an array can be objects or other arrays.
Arrays in JavaScript are dynamic, and we don’t need to define the size of the array when creating variables. The number of elements can be added and reduced at any time.
The index array in JavaScript doesn’t have to be sequential; we can only fill in indexes 0, 5, and 10 in the array.
Javascript tutorial on how to creates an array
There are 2 ways to declare arrays in Javascript, with the bracket notation [ ] and or new Array() [ arrays are objects]. To understand how to declare variables, you can read here
using the bracket notation [ ] is the fastest and the latest method for declaring a Javascript array
Example:
1 2 3 4 | var array = [] var array = ["one",1,true,false,"hello world"] var array = new Array() var array = new Array("one",1,true,false,"hello world") |
Arrays have a length property to find out the number of elements in the array. As with strings, the length property is used to get the length of a string.
Example array length Javascript:
1 2 3 | var array = ["one",1,true,false,"hello world"] var count= array.length; console.log(count); // result => 5 |
How to display data in a Javascript array
We can change or add elements to an array. The method is straightforward, namely by adding a bracket notation [ ] and filling it with an array index that will change. We can also access elements in the same way. Here’s an example to change or add elements in the array.
Example:
1 2 3 4 5 6 7 | var array = ["one",1,true,false,"hello world"]; // Show and print array element console.log(array[0]); console.log(array[1]); // edit element array array[0] = "ten"; console.log(array[0]); |
The array stores a set of data and gives it an index number so that it is easily accessible.
The array index always starts from 0.
Multidimensional JavaScript Array
Multidimensional arrays are arrays in arrays. You can fill array elements with other arrays.
Example:
1 2 | let arraymulti = [["car","home"],[1,2,3,4],[true,false]]; console.log(arraymulti); |
Javascript array foreach
To make a loop on the Javascript array can use for or foreach method
For and Foreach loop
Example 1:
1 2 3 4 5 | var array= ["mango","orange","banana","watermelon","melon"] for (let i = 0; i < array.length; i++) { console.log("array no : "+i+" -> "+array[i]); } |
Example 2:
1 2 3 | array.forEach((data) => { console.log(data); }); |
Example 3:
1 2 3 | for(x in array){ console.log(array[x]) } |
Explanation:
- Example 1 uses “for” loop. For loop using the length property to get the length of the array. The length property used to limit the number of loops in for.
- Example 2 uses the “foreach” loop. Foreach javascript display data based on the index array sequence.
- Example 3 uses the “for/in” loop. variable x is the index number in the array
Javascript two-dimension array loop
To loop a multidimensional array or two-dimensional array JavaScript, you can use nested loops. See the following example:
1 2 3 4 5 6 7 8 9 | let arraymulti = [["car","home"],[1,2,3,4],[true,false]]; for (let i = 0; i < arraymulti.length; i++) { console.log("array index : "+i) for (let x = 0; x < arraymulti[i].length; x++) { console.log(" > "+arraymulti[i][x]) } } |
Array methods Javascript
Arrays also have several beneficial methods. Array methods are used to process data such as adding elements of an array, deleting elements in the array, filtering arrays, combining arrays, and much more.
To learn javascript, you must understand several array methods that are often used
Several types of Javascript array methods
Push() method
The push method is used to add new elements to the array. the push() method add data from behind.
Example:
1 2 3 | var fruits = [“orange”, “melon”, “banana”, “apel”] fruits.push("mango") console.log(fruits) |
Unshift() method
The unshift() method add a new element at the beginning of the array and shift the entire index.
Example:
1 2 3 | var fruits = [“orange”, “melon”, “banana”, “apel”] fruits. unshift ("mango") console.log(fruits) |
Delete() Method
The delete method is used to delete array element data based on a particular index
Example:
1 2 3 4 5 6 | var fruits = ["orange", "melon", "banana", "apel"] console.log(fruits) console.log("delete fruits[1]") console.log("after delete") delete fruits[1] console.log(fruits) |
Pop() Method
The pop method is the same as the delete method. Pop() removing the last item.
Example:
1 2 3 4 5 | var fruits = ["orange", "melon", "banana", "apel"] console.log(fruits) fruits.pop() console.log("after fruits.pop() ") console.log(fruits) |
The difference between pop() and delete()
The delete array method in Javascript creates a space in the array. So that the length of the array not change. While pop deletes the last array element, the array length decrease.
Shift() Method
The shift method has the same function as pop. The difference is that shift removes the first array element.
Example:
1 2 3 4 5 | var fruits = ["orange", "melon", "banana", "apel"] console.log(fruits) fruits.shift() console.log("after fruits.shift() ") console.log(fruits) |
Slice() Method
A Javascript array slice is a method for retrieving several parts of an array items and generating a new array
Slice() array syntax:
1 | array.slice((start_from) , (end_slice) ); |
Explanation :
- (start_from): the initial index of the array to be sliced.
- (end_slice): the final index number of the sliced array but does not enter into the new array element
Maybe the above explanation is a bit confusing, and you need to look at the following image to better understand it
Example:
1 2 3 | let home = ["kitchen", "room", "car", "homan", "pet"]; let slice = home.slice(1, 3); //result ["room", "car",] |
Splice() Method
The splice() method is used to delete data from a particular index.
The syntax of the Javascript splice method:
1 | array.splice((index),(count) ) |
Explanation:
- (index) is the index of the data in the array to be deleted.
- (count) is the amount of data that will be deleted from the index.
Usually, we give with value 1 so that it only removes single element.
Example:
1 2 3 4 5 | var fruits = ["orange", "melon", "banana", "apel"] console.log(fruits) fruits.splice(2,1) console.log("after fruits.splice(2,1) ") console.log(fruits) |
Concat() Method
The concat method is used to combine two or more arrays.
Example:
1 2 3 4 5 6 | var fruits = ["orange", "melon"] var fruits2 = [ "banana", "apel"] var fruits3 = ["mango"] var concatFruit = fruits.concat(fruits2, fruits3) console.log(concatFruit) //result (5) ["orange", "melon", "banana", "apel", "mango"] |
Join() Method
Join array method combines elements in an array Javascript uses a specific separator and converts it to a string.
Example:
1 2 3 | var fruits = ["orange", "melon", "banana", "apel"] console.log(fruits.join(", ")) // result orange, melon, banana, apel |
Reverse() Method
The reverse() method, reverses the order of elements of an array. The first array element will be the last and vice versa.
Example:
1 2 3 4 | var fruits = ["orange", "melon", "banana", "apel"] var reserveFruit = fruits.reverse(); console.log(reserveFruit) // result (4) ["apel", "banana", "melon", "orange"] |
Sort() Javascript Array Method
The sort() method will sort elements in the array in alphabetical order.
Example:
1 2 3 | var fruits = ["orange", "melon", "banana", "apel"] var sortFruit = fruits.reverse(); Console.log(sortFruit) |
Filter() Method
The filter() method filters data from an array. The filter() method creates a new arrays contain the desired conditions for each element of the existing array.
Example:
1 2 3 | var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var filterOdd = nums.filter((num) => {return num % 2 != 0}); console.log(filterOdd) |
Includes() Method
This method functions to check data contained in an array or not.
Example:
1 2 3 4 5 | var num = [1, 2, 3, 4, 5, 6, 7, 8, 9,10] var check1 = angka.includes(3); var check2 = angka.includes(0); console.log(check1); console.log(check2); // Output: false |
Map() method
Map() array Javascript method creates a new array while checking/performing operations on each array element.
Example:
1 2 3 4 5 | var num = [1, 2, 3, 4, 5, 6, 7, 8, 9] var checkArray = num.map(data => data % 2 === 0); console.log(checkArray); var multipleOfTHree = num.map(e => e * 3); console.log(multipleOfTHree); |
Some() Method
Some() method checks at least one of the element in the array fulfilling the desired condition.
Example:
1 2 3 4 | var num = [1, 2, 3, 4, 5] var check1 = num.some(data => data < 2); var check2 = num.some(data => data < 0); console.log(check1); console.log(check2); |
Every() Method
Every() method checks whether each element in the array meets the desired condition.
Example:
1 2 3 4 | var num = [1, 2, 3, 4, 5] var check1 = num. every (data => data < 2); var check2 = num. every (data => data < 10); console.log(check1); console.log(check2); |
Array.of() method
Array.of() Javascript method works to create an array of each argument that copied.
Example:
1 2 | const num = Array.of(1, 2, 3, 4, 5, 6); console.log(num); // Output: [1, 2, 3, 4, 5, 6] |
Other article : Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners
Conclusion
Arrays are variables that must understand to learn Javascript. In making business applications, we often use arrays to hold large amounts of data. For advanced javascript tutorials, the array collaborated with json which aims to hold data and process data.
There are many array operations in Javascript that you can understand and find out more. However, the primary method that I shared in the article above most often used.
Learn javascript requires perseverance and trial errors, hopefully, useful.
Next : Tutorial Javascript DOM HTML (Include 14 Example) : Easy To Understand
Leave a Reply