Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

🏠 » Javascript » Complete Reference Javascript Array Tutorial for Beginners

Complete Reference Javascript Array Tutorial for Beginners

By ∙ ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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.

Complete Reference Javascript Array Tutorial For Beginners Min

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.

Related Articles :

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 Two Dimension Tutorial Min

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])
}

Javascript Arrays Loop Method

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])
}
}

How To Loop Multi Dimension Javascript Arrays Tutorial Min

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.

Array Push Methods Javascript Min

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.

Unshift Javascript Array Method Min

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

Delete Method Array Javascript Min

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.

Pop Method Array Javascript Min

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.

Shift Array Javascript Method Tutorial Min

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

Tutorial Javascript Array Slice Min

Example:

1
2
3
let home = ["kitchen", "room", "car", "homan", "pet"];
let slice = home.slice(1, 3);
//result  ["room", "car",]

How To Use Slice Array Javascript Example Min

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.

Array Splice Javascript Tutorial Beginners Min

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) =&gt; {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 =&gt; data % 2 === 0);
console.log(checkArray);  
var multipleOfTHree = num.map(e =&gt; 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 =&gt; data &lt; 2); var check2 = num.some(data =&gt; data &lt; 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 =&gt; data &lt; 2); var check2 = num. every (data =&gt; data &lt; 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

Another Javascript Related Post :

Reader Interactions

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.