Arrays in JavaScript - ProgrammerTech
Language:

Search

Arrays in JavaScript

  • Share this:
Arrays in JavaScript

Arrays in JavaScript

Arrays in javascript are a way to temporarily store data of one type, called an Array. The purpose of using arrays is to store data, and an array list can contain a set of elements of one or more data types. The data in the array is enclosed in square brackets [].

Example 1

Suppose you own a company or work in a company and you want to store employee data in it, write the employee's name, age, marital status and country.

var name = "Ahmed";
var age = 23;
var isMarried = true;
var country = "Egypt";

So we recorded the data of one employee within individual variables, what if we had a lot of employees? For example, 10 employees or 100, will we repeat the same previous example with this huge number?

The answer is through the array list.

How to create an array in javascript is very simple

var id_1 = ["Ahmed",23,true,"Egypt"];
console.log(id_1);

We have defined only one variable, which refers to employee number 1, and we wrote his name id_1 and we opened square brackets and put inside the data required for this employee. We then display this employee's data via console. And we execute the code in the browser and head to the console and we find the result as follows.

array js

 

We notice from this image the display of array4 , which are the elements we wrote for the employee data.

 

Finding the position of the index elements in an array

Counting the matrix data starts from the number 0 in ascending order, that is, the first element in the matrix is ​​denoted by the number 0, the second element is 1 and the third is 2 and in this form.

Example 2

We want to display only the first type of data from this array, we write in console number 0, which means the first thing in the array.

var id_1 = ["Ahmed",23,true,"Egypt"];
console.log(id_1[0]);

We asked the program to display only the value of the first element in this array, which is centered at 0, and when we run the code.

Ahmed

Example 3

Ask the program to display more than one type of data from the previous example.

var id_1 = ["Ahmed",23,true,"Egypt"];
console.log(id_1[0] + id_1[3]);

We asked the program to display the value of the first and fourth elements of this array. And when we run the code

AhmedEgypt

 

Knowing the positioning of an element via indexOf()

If we do not want to display data within the array, we just want to know the position of an element (what is its position number within this array) via indexOf .

Example 4

var id_1 = ["Ahmed",23,true,"Egypt"];
console.log(id_1.indexOf(true));

By displaying the data, we told the program to give us the true position of the word in this array by using indexOf. And when running the code

2

 

Display the number of array elements via length()

In the event that we have an array with a lot of data and we want to know how many data are inside this array. The number of array elements can be found by using length() which gives us the number of elements of the array required.

Example 5

  • We create the h1 element in the html file and bind it in the id to display the data.
<body style="background-color: lime;>
	<h1 id="result"></h1>
</body>
  • in the javascript file
var months = ["January","February","March"];
document.getElementById("result").innerHTML = months.length;

We created an array called months and its content includes the names of 3 months. And we chose to display the data via the id associated with it in the html file. We specify the variable name for the months array in which we want to display the data. The length() element can be used to fetch the number of elements in the array. When we run the above code in the browser, the result will be:

3

Here he gave us the number of elements that were inside the array, which is 3 elements.

 

Fetching the position of the last matched element via lastIndexOf

If we have identical data within an array and we want to know where the last identical element in this array is located, we use lastIndexOf.

Example 6

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML = months.lastIndexOf("March");

We asked the program to give us the last position of the word March, which is found more than once in the program. When viewing the result in the browser, it will bring us the latest index of similar items. And when we run it in the browser, it will give us the number 3, which is the index of the last similar word from the word we passed to it.

 

Delete the last digits of the array via pop()

In the event that we want to remove the elements of the array, an element from the end we use in this, the function pop() when used will remove an element from the end of the array.

Example 7

In the html file we create a button and put it onclick.

<button onclick="removeLastItem()">delete last item</button>

And in the javascript file

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.pop();
	document.getElementById("result").innerHTML =months;
}

We used the pop() function to delete and put it in a function associated with the button button and display the data as html. When you click on the button it will delete the last value and pressing a second time deletes the previous value from the last...etc until all the elements of the array are finished.

 

Add a new value to the end of the array via push()

We can add any data to the array by using the push() function and we specify to it the data we want to add.

Example 8

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.push("Juni");
	document.getElementById("result").innerHTML =months;
}

Every click on the button will add the word Juni once and if we press twenty times it will print it twenty times.

 

Adding an element to start with unshift()

Example 9

var months = ["January","March","February","March"];
document.getElementById("result").innerHTML =months;
function removeLastItem(){
	months.unshift("Juni");
	document.getElementById("result").innerHTML =months;
}

When the button is pressed, it will add Juni to us with every click it adds once.

 

Arrange items by alphabet via sort()

Example 10

var alphabet = ["d","a","b","c"]
alphabet.sort();
console.log(alphabet.toString());

We created a variable named alphabet and gave it the values ​​of an array of several English letters and then asked to sort them via sort() and display the data via the console.


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com