What is an Array?
- An array is a collection of multiple values stored in a single variable.
- It is an Object type.
- List of values known as element.
- The first element is at index 0, the second at index 1, and so on.
- Arrays can grow or shrink as elements are added or removed.
- Arrays can store elements of different data types. So it is Heterogeneous.
Why use Array?
- Instead of declaring dozens of separate variables for related items (like car1, car2, etc.), they can be grouped into one array.
- Unlike in many other languages, JavaScript arrays are resizable and can hold a mix of different data types.
- Arrays make it easy to loop through thousands of items to perform bulk operations.
Creating an Array:
const fruits = ["apple","orange","banan"]
//You can also create an empty array, and provide elements later:
const fruits = [];
fruits[0] = "Apple";
fruits[1] = "Orange";
fruits[2] = "Banana";
//The following example also creates an Array, and assigns values to it:
const fruits = new Array("Apple", "Orange", "Banana");
Accessing Array Elements:
document.write(fruits[0]);
document.write("<br>")
document.write(fruits[1]);
Loop through Array :
Normal :
const fruits = ["apple","orange","banan"]
for(let i =0; i<fruits.length; i++){
document.write(fruits[i]);
document.write("<br>");
}
Output:
apple
orange
banan
Using for of :
const fruits = ["apple","orange","banan"]
for(let a of fruits)
{
document.write(a);
document.write("<br>");
}
Using forEach :
const fruits = ["apple","orange","banan"]
fruits.forEach(a=>
{
document.write(a);
document.write("<br>");
}
);
----------------------
const numbers = [1,2,3,4,5];
let sum = 0;
numbers.forEach(a=> sum=sum+a);
document.write(sum);
Output : 15
Updating value:
const fruits = ["apple","orange","banan"]
document.write(fruits);
fruits[1] = "grapes";
document.write(fruits);
Output :
apple,orange,banan
apple,grapes,banan
Array Length:
const fruits = ["apple","orange","banan"]
document.write(fruits.length);
Output : 3
push() - add at end :
- The push() method adds a new element to an array at the end.
const fruits = ["apple","orange","banan"]
document.write(fruits);
document.write("<br>");
fruits.push("papaya","guava");
document.write(fruits);
Output :
apple,orange,banan
apple,orange,banan,papaya,guava
unshift() - add at beginning:
- The unshift() method adds a new element to an array at the beginning.
const fruits = ["apple","orange","banan"]
document.write(fruits);
document.write("<br>");
fruits.unshift("papaya","guava");
document.write(fruits);
Output :
apple,orange,banan
papaya,guava,apple,orange,banan
pop() - remove last:
- The pop() method removes the last element from an array.
const fruits = ["apple","orange","banan"]
document.write(fruits);
document.write("<br>");
fruits.pop();
document.write(fruits);
Output :
apple,orange,banan
apple,orange
shift() - remove first:
- The shift() method removes the first array element and shifts all other elements to a lower index.
const fruits = ["apple","orange","banan"]
document.write(fruits);
document.write("<br>");
fruits.shift();
document.write(fruits);
Output :
apple,orange,banan
orange,banan
toString() :
- The toString() method returns the elements of an array as a comma separated string.
const fruits = ["apple","orange","banan"]
let fruitsList = fruits.toString();
document.write(fruitsList);
Output :
apple,orange,banan
at():
- The at() method returns an indexed element from an array. The at() method returns the same as [].
- Negative Index Counts backward from the end of the array. For example, -1 returns the last element, and -2 returns the second to last.
const fruits = ["apple","orange","banan"]
document.write(fruits[2]);
document.write("<br>");
document.write(fruits.at(2));
output:
banan
banan
join() :
- The join() method also joins all array elements into a string.
- It behaves just like toString(), but in addition you can specify the separator.
const fruits = ["apple","orange","banan"]
document.write(fruits.toString());
document.write("<br>");
document.write(fruits.join("*"));
Output:
apple,orange,banan
apple*orange*banan
delete :
- The delete operator removes a property from an object.
const fruits = ["apple","orange","banan"]
document.write(fruits);
delete fruits[1];
document.write("<br>");
document.write(fruits[0]);
document.write("<br>");
document.write(fruits[1]);
document.write("<br>");
document.write(fruits[2]);
Output :
apple,orange,banan
apple
undefined
banan
concat() :
- The concat() method creates a new array by merging (concatenating) existing arrays.
- Does not modify original.
- Can take multiple arrays/values.
const fruits = ["apple","orange","banana"];
const vegetables = ["onion","tomato","brinjal"];
const liquid = ["water","juice"]
document.write(fruits.concat(vegetables,liquid));
Output :
apple,orange,banana,onion,tomato,brinjal,water,juice
copyWithin() :
- The copyWithin() method in JavaScript is used to copy a sequence of array elements from one position to another within the same array.
- It is a mutating method, meaning it modifies the original array in place without changing its length.
array.copyWithin(target, start, end)
- default value of starting position, if not mentioned explicitly is 0.
- default value of ending position, if not mentioned explicitly is array length.
document.write( fruits.copyWithin(2,0,3) );
document.write("<br>");
document.write(fruits);
document.write("<br>");
const vegetables = ["carrot","onion","tomato","brinjal","garlic"];
document.write( vegetables.copyWithin(2) );
document.write("<br>");
document.write(vegetables);
document.write("<br>");
const colors = ["red","orange","yellow","white","pink"]
document.write( colors.copyWithin(2,1) );
document.write("<br>");
document.write(colors);
document.write("<br>");
const shapes = ["circle","square","rectangle","triangle","diamond"]
document.write( shapes.copyWithin(-2,2) );
document.write("<br>");
document.write(shapes);
Output :
apple,orange,apple,orange,banana
apple,orange,apple,orange,banana
carrot,onion,carrot,onion,tomato
carrot,onion,carrot,onion,tomato
red,orange,orange,yellow,white
red,orange,orange,yellow,white
circle,square,rectangle,rectangle,triangle
circle,square,rectangle,rectangle,triangle
flat() :
- It is used to flatten nested arrays.
- It converts a multi-level array into single-level array.
- flat(depth) removes one level of nesting by default(depth =1).
- Returns new array.Does NOT change original array.
const fruits = ["apple",["orange",["banana","papaya"]],"pomegranate"];
console.log(fruits.flat());
console.log(fruits.flat(1));
console.log(fruits.flat(2));
console.log(fruits.flat(3));
console.log(fruits.flat(Infinity));
Output :
slice() :
- It is used to extract a portion of an array.
- It returns a new array.It does NOT modify the original array.
array.slice(start, end)
start - starting index(included)
end - ending index(excluded)
const fruits = ["apple","orange","banana","papaya","pomegranate"];
const fruitsslice1 = fruits.slice(); //copy entire array
document.write(fruitsslice1);
document.write("<br>");
const fruitsslice2 = fruits.slice(2);
document.write(fruitsslice2);
document.write("<br>");
const fruitsslice3 = fruits.slice(2,3);
document.write(fruitsslice3);
document.write("<br>");
const fruitsslice4 = fruits.slice(-4,-2);
document.write(fruitsslice4);
document.write("<br>");
const fruitsslice5 = fruits.slice(-4);
document.write(fruitsslice5);
document.write("<br>");
Output :
apple,orange,banana,papaya,pomegranate
banana,papaya,pomegranate
banana
orange,banana
orange,banana,papaya,pomegranate
splice() :
- This function is used to modify the contents of an array by removing, replacing, or adding new elements.
- It changes the original array.
array.splice(start, deleteCount, item1, item2, /* …, */ itemN)
start : index where operation begins
deleteCount : how many elements to remove
item1, item2 : elements to add(optional)
const fruits = ["apple","orange","banana","papaya","tomato"];
fruits.splice(2);
document.write(fruits); //removes element from index 2.
document.write("<br>");
const vegetables = ["carrot","onion","tomato","brinjal","garlic"];
vegetables.splice(3,2)
document.write(vegetables); //starting from 3rd index and removing 2 elements.
document.write("<br>");
const colors = ["red","orange","yellow","white","pink"]
colors.splice(1,2,"brown","black")
document.write(colors); //replacing 2 elements(brown,black) against orange and yellow(from position 1).
document.write("<br>");
const shapes = ["circle","square","rectangle"]
shapes.splice(2,0,"triangle","diamond")
document.write(shapes); //not removing any element and adding triangle and diamond from index 2.
Output :
apple,orange
carrot,onion,tomato
red,brown,black,white,pink
circle,square,triangle,diamond,rectangle
toSpliced() :
- Does not mutate the original array. Returns a new array containing all elements after the modification.
- same logic as splice().
const fruits = ["apple","orange","banana","papaya","tomato"];
const fruitsSliced = fruits.toSpliced(2);
document.write(fruitsSliced);
document.write("<br>");
const vegetables = ["carrot","onion","tomato","brinjal","garlic"];
const vegetablesSliced = vegetables.toSpliced(3,2)
document.write(vegetablesSliced);
document.write("<br>");
const colors = ["red","orange","yellow","white","pink"]
const colorsSliced = colors.toSpliced(1,2,"brown","black")
document.write(colorsSliced);
document.write("<br>");
const shapes = ["circle","square","rectangle"]
const shapesSliced = shapes.toSpliced(2,0,"triangle","diamond")
document.write(shapesSliced);
Output :
apple,orange
carrot,onion,tomato
red,brown,black,white,pink
circle,square,triangle,diamond,rectangle
Top comments (0)