Scribd
Upload
8 views

Arrays in JavaScript

Uploaded by

rukhsarahmadwarriachrah902
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Arrays in JavaScript

Uploaded by

rukhsarahmadwarriachrah902
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Arrays in JavaScript:

In JavaScript, an array is a data structure that stores a collection of elements, which can be of any
data type, such as numbers, strings, objects, or even other arrays. Arrays in JavaScript are
dynamic, meaning they can grow or shrink in size as needed.

Creating an Array

Using an array literal is the easiest way to create a JavaScript Array.

Syntax:

const array_name = [item1, item2, ...];

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Arrays</title>

</head>

<body>

<h2>Arrays in Java Script</h2>

<p id="para"></p>

<script>

let marks = [23 , 45 , 78, 12, "Not Present" , 50];

document.getElementById("para").innerHTML = marks;

</script>

</body>

</html>

Output:
Accessing Array Elements:

You access an array element by referring to the index number:

<script>

let marks = [23 , 45 , 78, 12, "Not Present" , 50];

document.getElementById("para").innerHTML = marks[2];

</script>

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays.

But, JavaScript arrays are best described as arrays.

Arrays Methods:
JavaScript provides several built-in methods that you can use to manipulate arrays efficiently.
Here are some of the most commonly used array methods along with brief explanations:

push():

Adds one or more elements to the end of an array and returns the new length of the array.

<body>

<h2>Push Method</h2>
<p id="push"></p>

<p id="new"></p>

<script>

let marks = [15,45,89,45,24,67];

document.getElementById("push").innerHTML = marks.push(67);

document.getElementById("new").innerHTML = marks

</script>

</body>

pop():

Removes the last element from an array and returns that element.

<title>Array Methods</title>

</head>

<body>

<h2>Array Methods</h2>

<h3>Pop Method</h3>

<p id="pop"></p>

<p id="output"></p>

<script>

const name = ["Insaat" , "Huma" , "Sidra" , "Jamal"]

document.getElementById("pop").innerHTML = name;

name.pop();
document.getElementById("output").innerHTML = name;

</script>

</body>

</html>

shift():

Removes the first element from an array and returns that element. This method also updates the
length property of the array.

<body>

<h2>Shift Method</h2>

<p>Shift Method also returns the elemnts that is shifted out</p>

<p id="shift"></p>

<p id="new"></p>

<script>

let marks = [15,45,89,45,24,67];

document.getElementById("shift").innerHTML = marks.shift();

document.getElementById("new").innerHTML = marks

</script>

</body>
unshift():

Adds one or more elements to the beginning of an array and returns the new length of the array.

<body>

<h2>Unshift</h2>

<h4>Adds the new elemnt in the start</h4>

<p id="unshift"></p>

<p id="new"></p>

<script>

let marks = [15,45,89,45,24,67];

document.getElementById("unshift").innerHTML = marks;

marks.unshift(77);

document.getElementById("new").innerHTML = marks;

</script>

</body>

splice():

Changes the contents of an array by removing or replacing existing elements and/or adding new
elements in place.

<body>
<h2>Splice Method</h2>

<p id="id"></p>

<p id="new"></p>

<script>

const name = ["Insaat" , "Huma" , "Sidra" , "Jamal"]

document.getElementById("id").innerHTML = name;

name.splice(1,0,"Aina", "Meno");

document.getElementById("new").innerHTML = name

</script>

</body>

slice():

Returns a shallow copy of a portion of an array into a new array object selected from start to end
(end not included). The original array will not be modified.

<body>

<h2>Slice Method</h2>

<p id="slice"></p>

<script>

const name = ["Insaat" , "Huma" , "Sidra" , "Jamal"]

const Hala = name.slice(1);

document.getElementById("slice").innerHTML = name + "<br><br>"+ Hala;


</script>

</body>

</html>

concat():

Combines two or more arrays, and returns a new array.

<body>

<h2>Concat Method</h2>

<h3>Merges Arrays </h3>

<p id="hi"></p>

<script>

const cars= ["BMW" , "fararri", "Toyota" , "Civic"]

const model = [2012 , 2017 , 2022 , 2017]

const info = cars.concat(model)

document.getElementById("hi").innerHTML = info

</script>

</body>
JavaScript Array toString:

The JavaScript method toString() converts an array to a string of (comma separated) array
values.

<body>

<h2>toString</h2>

<p id="para"></p>

<script>

const marks = [ "Not Present" , "Hello" , "Hate"];

document.getElementById("para").innerHTML = marks.toString();

</script>

</body>

The length property returns the length (size) of an array:

: <body>

<h2>toString</h2>

<p id="para"></p>

<script>

const marks = [ "Not Present" , "Hello" , "Hate"];

// document.getElementById("para").innerHTML = marks.toString();

let size = marks.length;

document.getElementById("para").innerHTML= size

</script>

</body>
Array Search Methods:
Array search methods in JavaScript refer to techniques used to find elements within an array
based on certain criteria. Here are some commonly used array search methods in JavaScript:

1. Indexof Method:

This method returns the first index at which a given element can be found in the array, or -1 if it
is not present.

<body>

<h2>Indexof Method</h2>

<p id="search"></p>

<script>

let num = [24 , 67 , 89, 90];

let position= num.IndexOf(90) + 1;

document.getElementById("search").innerHTML = "Num is found at position " + position;

</script>

</body>

2. LastIndexof Method:

Similar to indexOf(), but starts the search from the end of the array.

<body>
<h2>lastIndexof Method</h2>

<p id="search"></p>

<script>

let num = [24 , 67 , 89, 90];

let position= num.lastIndexOf(90) + 1;

document.getElementById("search").innerHTML = "Num is found at position " + position;

</script>

</body>

</html>

3. Find Method:

Returns the first element in the array that satisfies the provided testing function. Otherwise, it
returns undefined.

<body>

<h1>Find Method</h1>

<p id="search"></p>

<script>

let num = [4 , 45 , 29, 80];

let position= num.lastIndexOf(80) + 1;

document.getElementById("search").innerHTML = "Num is found at position " + position;

</script>

</html>

</body>
4. findIndex() method

The findIndex() method returns the index of the first array element that passes a test function.

This example finds the index of the first element that is larger than 18:

<body>

<h2>The findIndex() Method</h2>

<p id="ab"></p>

<script>

const numbers = [4, 9, 16, 25, 29];

document.getElementById("ab").innerHTML = "First number over 18 has index " +


numbers.findIndex(myFunction);

function myFunction(value, index, array) {

return value > 18;

</script>

<body/>
5. includes():

Determines whether an array includes a certain value among its entries, returning true or false as
appropriate.

<h2>The includes() Method</h2>

<p>Check if the fruit array contains "Mango":</p>

<p id="demo"></p>

<p><strong>Note:</strong> The includes method is not supported in Edge 13 (and earlier


versions).</p>

<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo").innerHTML = fruits.includes("Mango");

</script>

</body>

</html>
Array Sort Methods:
Sorting is the process of rearranging a sequence of elements in a specific order according to a
certain criterion. The criterion can vary depending on the context and requirements, such as
alphabetical order, numerical order, or custom-defined order based on specific properties or
rules.

Types:

Alphabetic Sort:

Alphabetic sorting refers to arranging elements based on their alphabetical order, following the
sequence of letters in the alphabet. When sorting strings alphabetically, each character in the
string is compared based on its Unicode code point value. The sorting algorithm organizes the
elements in ascending or descending order according to this sequence.

Methods:

I. Sort() Method:
Sorts Alphabetically

<body>

<h2>The sort() Method</h2>

<p>The sort() method sorts an array alphabetically:</p>

<p id="a"></p>

<p id="b"></p>

<script>

const name = ["Insbat", "Jawad", "Hala", "Ana"];

document.getElementById("a").innerHTML = name;

name.sort();

document.getElementById("b").innerHTML = name

</script>

</body>
</html>

II. Sort Reverse:

Reverse the array.

<html>

<body>

<h1>JavaScript Arrays</h1>

<h2>The reverse() Method</h2>

<p>The reverse() method reverses the elements in an array:</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

const fruits = ["Banana", "Orange", "Apple", "Mango"];

document.getElementById("demo1").innerHTML = fruits;

fruits.reverse();

document.getElementById("demo2").innerHTML = fruits;

</script>

</body>

</html>
III. TOsorted Method:

method as a safe way to sort an array without altering the original array.

<!DOCTYPE html>

<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The toSorted() Method</h2>

<p id="demo"></p>

<script>
const months = ["Jan", "Feb", "Mar", "Apr"];
const sorted = months.toSorted();

document.getElementById("demo").innerHTML = sorted;
</script>

</body>
</html>

Iv .Sorting ARRAYS Objects:

Sorting an array of objects in JavaScript involves specifying a criterion based on which


the objects should be sorted. This criterion could be a property of the objects, such as a
string, number, or even a date. You can use the sort() method and provide a custom
comparison function to achieve this.

You might also like