👉What is an Array in JavaScript?
JavaScript Array Methods: An array is an object that stores multiple values in a single variable. It is useful for handling large datasets of the same type. Instead of creating multiple variables, you can store data in an array and access each element using an index number (starting from 0).
For example, to store names of students:
javascript
var students = [“John”, “Ann”, “Kevin”];
- “John” → index 0
- “Ann” → index 1
- “Kevin” → index 2
👉How to Create an Array in JavaScript
JavaScript Array Methods: You can create an array in two ways:
1. Using Array Literals (Recommended)
javascript
var students = [“John”, “Ann”, “Kevin”];
2. Using the Array Constructor
javascript
var students = new Array(“John”, “Ann”, “Kevin”);
OR
javascript
var students = new Array();
students[0] = “John”;
students[1] = “Ann”;
students[2] = “Kevin”;
👉JavaScript Array Methods
JavaScript Array Methods: JavaScript provides multiple built-in methods to work with arrays efficiently.
1. length Property
The length property returns the number of elements in an array.
javascript
var students = [“John”, “Ann”, “Kevin”];
console.log(students.length); // Output: 3
2. push() – Add Element at End
Adds a new element to the end of the array.
javascript
students.push(“Emma”);
console.log(students); // [“John”, “Ann”, “Kevin”, “Emma”]
3. pop() – Remove Last Element
Removes the last element of the array.
javascript
students.pop();
console.log(students); // [“John”, “Ann”, “Kevin”]
4. shift() – Remove First Element
Removes the first element and shifts all elements left.
javascript
students.shift();
console.log(students); // [“Ann”, “Kevin”]
5. reverse() – Reverse the Array
Reverses the order of elements in an array.
javascript
students.reverse();
console.log(students); // [“Kevin”, “Ann”, “John”]
6. sort() – Sort an Array
Sorts the array in ascending order.
javascript
students.sort();
console.log(students); // [“Ann”, “John”, “Kevin”]
👉JavaScript Array Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Methods</title>
<script>
var students = [“John”, “Ann”, “Aaron”, “Edwin”, “Elizabeth”];
document.write(“<b>Original Array:</b><br>”);
document.write(students.join(“, “) + “<br><br>”);
document.write(“<b>Sorted Array:</b><br>”);
students.sort();
document.write(students.join(“, “) + “<br><br>”);
document.write(“<b>Reversed Array:</b><br>”);
students.reverse();
document.write(students.join(“, “) + “<br><br>”);
document.write(“<b>After Removing Last Element:</b><br>”);
students.pop();
document.write(students.join(“, “) + “<br><br>”);
document.write(“<b>After Adding a New Element:</b><br>”);
students.push(“Emma”);
document.write(students.join(“, “) + “<br><br>”);
</script>
</head>
<body>
</body>
</html>
👉Loops in JavaScript: for, while, and do-while
Why Use Loops?
JavaScript Array Methods: Loops allow us to execute repetitive tasks efficiently. Instead of writing code multiple times, loops help in iterating through arrays or performing repeated actions based on conditions.
Types of Loops in JavaScript
- for loop
- for…in loop (Explained later)
- while loop
- do…while loop
👉1. for Loop in JavaScript
JavaScript Array Methods: The for loop is used when you know how many times you want to execute a block of code.
Syntax:
javascript
for(initialization; condition; increment/decrement) {
// Code to execute
}
Example: Using for Loop to Display Array Elements
html
<!DOCTYPE html>
<html>
<head>
<script>
var students = [“John”, “Ann”, “Aaron”, “Edwin”, “Elizabeth”];
document.write(“<b>Using for loop:</b><br>”);
for (var i = 0; i < students.length; i++) {
document.write(students[i] + “<br>”);
}
</script>
</head>
<body>
</body>
</html>
👉2. while Loop in JavaScript
JavaScript Array Methods: The while loop is useful when you don’t know the number of iterations in advance.
Syntax:
javascript
while(condition) {
// Code to execute
}
Example: Using while Loop
html
<!DOCTYPE html>
<html>
<head>
<script>
var students = [“John”, “Ann”, “Aaron”, “Edwin”, “Elizabeth”];
var i = 0;
document.write(“<b>Using while loop:</b><br>”);
while (i < students.length) {
document.write(students[i] + “<br>”);
i++;
}
</script>
</head>
<body>
</body>
</html>
👉3. do…while Loop in JavaScript
The do…while loop is similar to while, but ensures the code runs at least once, even if the condition is false.
Syntax:
javascript
do {
// Code to execute
} while (condition);
Example: Using do…while Loop
html
<!DOCTYPE html>
<html>
<head>
<script>
var students = [“John”, “Ann”, “Aaron”, “Edwin”, “Elizabeth”];
var i = 0;
document.write(“<b>Using do…while loop:</b><br>”);
do {
document.write(students[i] + “<br>”);
i++;
} while (i < students.length);
</script>
</head>
<body>
</body>
</html>
👉Conclusion
Key Takeaways:
✔ Arrays store multiple values and can be accessed using index numbers.
✔ JavaScript provides various array methods (push(), pop(), sort(), reverse(), etc.) to manipulate data.
✔ Loops (for, while, do…while) are used for repetitive tasks and help reduce redundant code.
By mastering arrays and loops, you can efficiently handle large datasets and improve your JavaScript programming skills!
