Arrays In JS

 JavaScript Arrays 

1. What is an Array?

An array is a special variable in JavaScript that can hold multiple values in a single variable. It is an ordered collection of elements, accessible via index numbers.

2. Creating an Array

Method 1: Using Square Brackets (Recommended)

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits);

Output:

[ 'Apple', 'Banana', 'Mango' ]

Method 2: Using the new Array() Constructor

let numbers = new Array(10, 20, 30, 40);

console.log(numbers);

Output:

[ 10, 20, 30, 40 ]

3. Accessing Array Elements

Elements in an array are accessed using zero-based indexing.

let colors = ["Red", "Green", "Blue"];

console.log(colors[0]); // First element

console.log(colors[2]); // Third element

Output:

Red

Blue

4. Modifying an Array

You can change the value of an array element by accessing it via its index.

let cars = ["BMW", "Audi", "Tesla"];

cars[1] = "Mercedes";  // Changing "Audi" to "Mercedes"

console.log(cars);

Output:

[ 'BMW', 'Mercedes', 'Tesla' ]

5. Array Methods

5.1 push() – Add Element at End

let fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);

Output:

[ 'Apple', 'Banana', 'Mango' ]

5.2 pop() – Remove Last Element

let fruits = ["Apple", "Banana", "Mango"];

fruits.pop();

console.log(fruits);

Output:

[ 'Apple', 'Banana' ]

5.3 unshift() – Add Element at Beginning

let fruits = ["Banana", "Mango"];

fruits.unshift("Apple");

console.log(fruits);

Output:

[ 'Apple', 'Banana', 'Mango' ]

5.4 shift() – Remove First Element

let fruits = ["Apple", "Banana", "Mango"];

fruits.shift();

console.log(fruits);

Output:

[ 'Banana', 'Mango' ]

5.5 splice() – Remove or Add Elements

let numbers = [10, 20, 30, 40];

numbers.splice(1, 2);  // Remove 2 elements starting from index 1

console.log(numbers);

Output:

[ 10, 40 ]

5.6 slice() – Extract a Portion of an Array

let numbers = [10, 20, 30, 40, 50];

let newNumbers = numbers.slice(1, 4); // Extracts index 1 to 3

console.log(newNumbers);

Output:

[ 20, 30, 40 ]

5.7 concat() – Merge Two Arrays

let arr1 = [1, 2, 3];

let arr2 = [4, 5, 6];

let mergedArray = arr1.concat(arr2);

console.log(mergedArray);

Output:

[ 1, 2, 3, 4, 5, 6 ]

5.8 indexOf() – Find Index of an Element

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits.indexOf("Banana"));

Output:

1

5.9 includes() – Check if Element Exists

let colors = ["Red", "Green", "Blue"];

console.log(colors.includes("Green")); 

console.log(colors.includes("Yellow"));

Output:

true

false

6. Looping Through an Array

6.1 Using for Loop

let numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {

    console.log(numbers[i]);

}

Output:

10

20

30

6.2 Using forEach() Method

let colors = ["Red", "Green", "Blue"];

colors.forEach((color) => console.log(color));

Output:

Red

Green

Blue

6.3 Using map() Method (Returns a New Array)

let numbers = [1, 2, 3];

let squares = numbers.map(num => num * num);

console.log(squares);

Output:

[ 1, 4, 9 ]

7. Sorting an Array

7.1 sort() – Ascending Order (Alphabetical)

let names = ["John", "Alice", "Bob"];

names.sort();

console.log(names);

Output:

[ 'Alice', 'Bob', 'John' ]

7.2 reverse() – Reverse an Array

let numbers = [10, 20, 30, 40];

numbers.reverse();

console.log(numbers);

Output:

[ 40, 30, 20, 10 ]

7.3 Sorting Numbers (Using Compare Function)

let numbers = [40, 100, 1, 5, 25, 10];

numbers.sort((a, b) => a - b); // Ascending order

console.log(numbers);

Output:

[ 1, 5, 10, 25, 40, 100 ]

8. Filtering an Array (filter())

let numbers = [10, 25, 30, 45, 50];

let filtered = numbers.filter(num => num > 30);

console.log(filtered);

Output:

[ 45, 50 ]

9. Finding Elements (find())

let numbers = [10, 25, 30, 45, 50];

let found = numbers.find(num => num > 30);

console.log(found);

Output:

45

10. Reduce Method (reduce()) – Sum of All Elements

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum);

Output:

15

Conclusion

  • Arrays in JavaScript store multiple values in a single variable.

  • Common operations include adding/removing elements (push(), pop(), shift(), unshift()).

  • Array methods like map(), filter(), and reduce() allow powerful data manipulation.

  • Sorting, searching, and iteration are easily done using array methods.

Comments

Post a Comment

Popular posts from this blog

Events in javascript

  Events in javascript ==>mouse events 1. click - Triggered when a mouse button is clicked 2. dblclick - triggered when a mouse button is double-clicked 3. mousedown - Triggered when a mouse button is pressed down 4. mouseup - Triggered when mouse button is released 5. mouseover - Triggered when the mouse pointer enters an element 6. mouseout - Triggered when the mouse pointer leaves an element ==>keyboard events 1. keydown - Triggered when key is pressed down 2. keypress - Triggered when key is pressed and held down 3. keyup - Triggered when key is released ==>Form Events change - Triggered when the value of an input element changes input - similar like change event Triggered when the value of an input tag changes(more frequently) submit - Triggered when a form is submitted ==> window events 1. load - Triggered when a page and its depandent resources have finished loading 2. resize - Triggered when the browser window is resized 3. scroll - Triggered when the d...
Read more

JavaScript Objects

  JavaScript Objects 1. What is a JavaScript Object? JavaScript objects are collections of key-value pairs. Keys (or properties) are strings, while values can be of any data type (numbers, strings, arrays, functions, or even other objects). Objects are used to store structured data. 2. Creating an Object There are multiple ways to create an object in JavaScript: (a) Using Object Literal let student = {     name: "John Doe",     age: 20,     course: "JavaScript",     isEnrolled: true }; console.log(student.name); // Output: John Doe (b) Using the new Object() Constructor let employee = new Object(); employee.name = "Alice"; employee.salary = 50000; console.log(employee.salary); // Output: 50000 (c) Using a Constructor Function function Car(brand, model, year) {     this.brand = brand;     this.model = model;     this.year = year; } let myCar = ...
Read more