SlideShare a Scribd company logo
ARRAYS IN
JAVASCRIPT
BY : KHURSHEED AHMAD
An array is a special variable, which can hold more than one value:
Syntax:
const array_name = [item1, item2, ...];
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
If you have a list of items (a list of car names, for example), storing the cars in single variables could
look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had
not 3 cars, but 300?
The solution is an array!
An array can hold many values under a single name, and you can access the values by referring to
an index number.
Access the Full Array
With JavaScript, the full array can be accessed by referring to the array name:
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
Looping Array Elements
One way to loop through an array, is using a for loop:
<html> <body>
<h1>JavaScript Arrays</h1>
<h2>Looping an Array</h2>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Associative Arrays
Many programming languages support arrays with named indexes.
Arrays with named indexes are called associative arrays (or hashes).
JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes.
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =person[0] + " " + person.length;
</script>
</body>
</html>
Basic Array Methods
Array length Returns the length (size) of an array
Array toString() Converts an array to a comma separated string of values
Array at() Returns an indexed element from an array
Array join() Joins all array elements into a string
Array pop() Removes the last element from an array
Array push() Adds a new element to an array
Array shift() Removes the first array element
Array unshift() Adds a new element at the beginning of an array
Array delete() Creates undefined holes in the array
Array concat() Creates a new array by merging existing arrays
Array copyWithin() Copies array elements to another position in the array
Array flat() Creates a new array from sub-array elements
Array slice() Slices out a part of an array
Array splice() Adds new items to an array
Array toSpliced() Adds new items to an array in a new array
JavaScript Array length
The length property returns the length (size) of an array:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property returns the length of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;
document.getElementById("demo").innerHTML = size;
</script>
</body>
</html>
Sorting an Array
The sort() method sorts an array alphabetically:
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Reversing an Array
The reverse() method reverses the elements in an 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>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
// Reverse the array:
fruits.reverse();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

More Related Content

Similar to arrays and its types and examples of sorting reversing arrays.pptx (20)

PPTX
Module 7 : Arrays
Prem Kumar Badri
 
PPTX
Data structure array
MajidHamidAli
 
PDF
02 arrays
Rajan Gautam
 
PPTX
CHAPTER 5 oop chapter 5 programming sem2
TSha7
 
PDF
Algorithm and Programming (Array)
Adam Mukharil Bachtiar
 
PPT
2 arrays
trixiacruz
 
PDF
Java ArrayList Tutorial | Edureka
Edureka!
 
PPT
ajava arrays topic brief explanation data
VenkatasaireddyMarth
 
PDF
Object Oriented Programming - 5.1. Array
AndiNurkholis1
 
PDF
Unit-5-Part1 Array in Python programming.pdf
582004rohangautam
 
PDF
Python programming : Arrays
Emertxe Information Technologies Pvt Ltd
 
PPT
Lecture no 9.ppt operating system semester four
VaibhavBhagwat18
 
PPT
Strings Arrays
phanleson
 
PDF
Java Arrays
OXUS 20
 
PPTX
Pemrograman Terstruktur 4
Moch Mifthachul M
 
PDF
CF5_Unit4.ppt.pdf java collection frameworks
mpfbaa
 
PPTX
Collections
sagsharma
 
PPT
Collection Core Concept
Rays Technologies
 
PDF
Array String - Web Programming
Amirul Azhar
 
PDF
Java arrays (1)
Liza Abello
 
Module 7 : Arrays
Prem Kumar Badri
 
Data structure array
MajidHamidAli
 
02 arrays
Rajan Gautam
 
CHAPTER 5 oop chapter 5 programming sem2
TSha7
 
Algorithm and Programming (Array)
Adam Mukharil Bachtiar
 
2 arrays
trixiacruz
 
Java ArrayList Tutorial | Edureka
Edureka!
 
ajava arrays topic brief explanation data
VenkatasaireddyMarth
 
Object Oriented Programming - 5.1. Array
AndiNurkholis1
 
Unit-5-Part1 Array in Python programming.pdf
582004rohangautam
 
Python programming : Arrays
Emertxe Information Technologies Pvt Ltd
 
Lecture no 9.ppt operating system semester four
VaibhavBhagwat18
 
Strings Arrays
phanleson
 
Java Arrays
OXUS 20
 
Pemrograman Terstruktur 4
Moch Mifthachul M
 
CF5_Unit4.ppt.pdf java collection frameworks
mpfbaa
 
Collections
sagsharma
 
Collection Core Concept
Rays Technologies
 
Array String - Web Programming
Amirul Azhar
 
Java arrays (1)
Liza Abello
 

Recently uploaded (20)

PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
PPTX
PPT-Q1-WK-3-ENGLISH Revised Matatag Grade 3.pptx
reijhongidayawan02
 
PDF
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
PDF
The Different Types of Non-Experimental Research
Thelma Villaflores
 
PDF
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
PPTX
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PPTX
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
PPTX
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
PPTX
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
PPTX
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
PPTX
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
PPTX
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
PDF
Horarios de distribución de agua en julio
pegazohn1978
 
PPTX
QUARTER 1 WEEK 2 PLOT, POV AND CONFLICTS
KynaParas
 
PPTX
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
PPTX
GRADE-3-PPT-EVE-2025-ENG-Q1-LESSON-1.pptx
EveOdrapngimapNarido
 
PPTX
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
PDF
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
PPTX
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
How to Create a PDF Report in Odoo 18 - Odoo Slides
Celine George
 
PPT-Q1-WK-3-ENGLISH Revised Matatag Grade 3.pptx
reijhongidayawan02
 
Biological Bilingual Glossary Hindi and English Medium
World of Wisdom
 
The Different Types of Non-Experimental Research
Thelma Villaflores
 
Exploring the Different Types of Experimental Research
Thelma Villaflores
 
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
ASRB NET 2023 PREVIOUS YEAR QUESTION PAPER GENETICS AND PLANT BREEDING BY SAT...
Krashi Coaching
 
Unit 2 COMMERCIAL BANKING, Corporate banking.pptx
AnubalaSuresh1
 
I AM MALALA The Girl Who Stood Up for Education and was Shot by the Taliban...
Beena E S
 
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
Neurodivergent Friendly Schools - Slides from training session
Pooky Knightsmith
 
Horarios de distribución de agua en julio
pegazohn1978
 
QUARTER 1 WEEK 2 PLOT, POV AND CONFLICTS
KynaParas
 
How to Convert an Opportunity into a Quotation in Odoo 18 CRM
Celine George
 
GRADE-3-PPT-EVE-2025-ENG-Q1-LESSON-1.pptx
EveOdrapngimapNarido
 
Growth and development and milestones, factors
BHUVANESHWARI BADIGER
 
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
How to Manage Large Scrollbar in Odoo 18 POS
Celine George
 
Ad

arrays and its types and examples of sorting reversing arrays.pptx

  • 1. ARRAYS IN JAVASCRIPT BY : KHURSHEED AHMAD
  • 2. An array is a special variable, which can hold more than one value: Syntax: const array_name = [item1, item2, ...]; const cars = ["Saab", "Volvo", "BMW"]; Why Use Arrays? If you have a list of items (a list of car names, for example), storing the cars in single variables could look like this: let car1 = "Saab"; let car2 = "Volvo"; let car3 = "BMW"; However, what if you want to loop through the cars and find a specific one? And what if you had not 3 cars, but 300? The solution is an array! An array can hold many values under a single name, and you can access the values by referring to an index number.
  • 3. Access the Full Array With JavaScript, the full array can be accessed by referring to the array name: <html> <body> <h1>JavaScript Arrays</h1> <p id="demo"></p> <script> const cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars; </script> </body> </html>
  • 4. Looping Array Elements One way to loop through an array, is using a for loop: <html> <body> <h1>JavaScript Arrays</h1> <h2>Looping an Array</h2> <p id="demo"></p> <script> const fruits = ["Banana", "Orange", "Apple", "Mango"]; let fLen = fruits.length; let text = "<ul>"; for (let i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; </script> </body> </html>
  • 5. Associative Arrays Many programming languages support arrays with named indexes. Arrays with named indexes are called associative arrays (or hashes). JavaScript does not support arrays with named indexes. In JavaScript, arrays always use numbered indexes. <html> <body> <h1>JavaScript Arrays</h1> <p id="demo"></p> <script> const person = []; person[0] = "John"; person[1] = "Doe"; person[2] = 46; document.getElementById("demo").innerHTML =person[0] + " " + person.length; </script> </body> </html>
  • 6. Basic Array Methods Array length Returns the length (size) of an array Array toString() Converts an array to a comma separated string of values Array at() Returns an indexed element from an array Array join() Joins all array elements into a string Array pop() Removes the last element from an array Array push() Adds a new element to an array Array shift() Removes the first array element Array unshift() Adds a new element at the beginning of an array Array delete() Creates undefined holes in the array Array concat() Creates a new array by merging existing arrays Array copyWithin() Copies array elements to another position in the array Array flat() Creates a new array from sub-array elements Array slice() Slices out a part of an array Array splice() Adds new items to an array Array toSpliced() Adds new items to an array in a new array
  • 7. JavaScript Array length The length property returns the length (size) of an array: <html> <body> <h1>JavaScript Arrays</h1> <h2>The length Property</h2> <p>The length property returns the length of an array:</p> <p id="demo"></p> <script> const fruits = ["Banana", "Orange", "Apple", "Mango"]; let size = fruits.length; document.getElementById("demo").innerHTML = size; </script> </body> </html>
  • 8. Sorting an Array The sort() method sorts an array alphabetically: <html> <body> <h1>JavaScript Arrays</h1> <h2>The sort() Method</h2> <p>The sort() method sorts an array alphabetically:</p> <p id="demo1"></p> <p id="demo2"></p> <script> const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo1").innerHTML = fruits; fruits.sort(); document.getElementById("demo2").innerHTML = fruits; </script> </body> </html>
  • 9. Reversing an Array The reverse() method reverses the elements in an 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> // Create and display an array: const fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo1").innerHTML = fruits; // Reverse the array: fruits.reverse(); document.getElementById("demo2").innerHTML = fruits; </script> </body> </html>