Arrays in Javascript
what is an Array?
Array is just a collection of data.
Creating array in javascript
- we use brackets separated by comma in array notation
//using arrayy literal notation
const arr1 = ['India', 'USA'];
//using the Array() constructor.
const arr2 = new Array('India', 'USA');
Note
- Array index always start from zero.
- You can store multiple datatypes array items as shown. ```javascript const arr = ["String",9,'a',true,3.14]
- ``Array.length`` gives the length of the array
```javascript
const arr = ["String",9,'a',true,3.14]
console.log(arr.length);
Output:
5
Access array items using index
```javascript const arr = ["String",9,'a',true,3.14] console.log(arr[0]); console.log(arr[2]);
Output:
```output
String
a
As you can see from above example we are able to get array item by its index.
Getting index using array items
const arr = ["String",9,'a',true,3.14] console.log(arr.indexOf(9));
To get index of a known array item we make use of method1indexOf(array item)which will return the index of that array item
Important methods in an array
Array.push(array item)
const arr = ['a','b','c','d',2,3];
arr.push(23)
console.log(arr);
Output:
[
'a', 'b', 'c', 'd',
2, 3, 23
]
Syntax: Array.push(array item)
If we use push method we must put array item which needs to be pushed into array as parameter, here it is 23. From the above example we can understand that, array item 23 is pushed i.e added to the array in the end of the array.
Array.pop()
const arr = ['a','b','c','d',2,3];
console.log(arr);
//using pop method
console.log(arr.pop());
//original array after using pop method
console.log(arr);
Output:
[ 'a', 'b', 'c', 'd', 2, 3 ]
3
[ 'a', 'b', 'c', 'd', 2 ]
syntax: Array.pop()
Array.pop() method deletes the last array item here 3 (in genereal pops last element) and return the array item which it deletes.
In above example you can see that in the array arr last array item is 3 we make use of pop method on arr array. This will delete the last array item 3 and returns the same which is printed in output.
Array.includes(Array item)
const arr = ["India","USA"];
console.log(arr.includes("India"));//true
console.log(arr.includes("Japan"));//false
Syntax:Array.includes(Array item)
Array.includes(Array item) checks wheather the array item which is sent as parameter is present in the array or no.
If the array item is present it will return true, else false.
From above example you can understand.
Array.splice(start)
const arr = ['cat', 'dog', 'horse', 'racoon', 'giraffe'];
//original arr
console.log("arr:");
console.log(arr);
// using splice and returning it to new array Rarr
const Rarr = arr.splice(3);
console.log("Rarr");
console.log(Rarr);
// arr changed
console.log("arr:");
console.log(arr);
Output:
arr:
[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
Rarr
[ 'racoon', 'giraffe' ]
arr:
[ 'cat', 'dog', 'horse' ]
Syntax:Array.splice(start)
From the last method pop you might of got a way to delete one array item from end, but if you want to delete more then one array item you can use splice
Array.splice(start) takes integer as parameter, here we take 3, so as name suggestes splice method starts deleting items from index 3, i.e 'racoon' and goes until end of the array.
It also returns the deleted array items, we make use of another array Rarr to store the returned array items.
you may have got good explination from the above example, if you are confused just try it once for different integers, you will get.
Array.splice(start,deleteCount)
const arr = ['cat', 'dog', 'horse', 'racoon', 'giraffe'];
//original arr
console.log("arr:");
console.log(arr);
// using splice and returning it to new array Rarr
const Rarr = arr.splice(1,2);
console.log("Rarr");
console.log(Rarr);
// arr changed
console.log("arr:");
console.log(arr);
Output:
arr:
[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
Rarr
[ 'dog', 'horse' ]
arr:
[ 'cat', 'racoon', 'giraffe' ]
Syntax: Array.splice(start,deleteCount)
Array.splice(start,deleteCount) method will delete/remove deleteCount number of array items from the Array from index start .
Consider the above example start is 1 and deleteCount is 2, therefore it deleted/removed 2 array elemets starting from index 1(dog).
NOTE: If you wish to delete Array item which is at index 3 only you can do it using splice by keeping deleteCount to 1 arr.splice(3,1)
NOTE: You can also use Array.splice(item) to delete particular item from the Array , if you don't know the index of that item .
DIY: try negative numbers in start.
Array.shift()
const arr = ['cat', 'dog', 'horse', 'racoon', 'giraffe'];
//original arr
console.log("arr:");
console.log(arr);
//using shift method
console.log(arr.shift());
//original arr after using shift()
console.log("arr:");
console.log(arr);
Output:
arr:
[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
cat
arr:
[ 'dog', 'horse', 'racoon', 'giraffe' ]
syntax:Array.shift()
Array.shift() is simillar to pop but here the first array item will be deleted/removed and returned.
Array.unshift(new item)
const arr = ['cat', 'dog', 'horse', 'racoon', 'giraffe'];
//original arr
console.log("arr:");
console.log(arr);
//using unshift
arr.unshift("new Item");
//original arr after unshifting
console.log("arr:");
console.log(arr);
Output:
arr:
[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
arr:
[ 'new Item', 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
Syntax: Array.unshift(new item)
Array.unshift(new item) is used when you want to add certain new item in front of the array(opposite to push).
Array1.concat(Array2)
const arr1 = ['cat', 'dog'];
const arr2 =['horse', 'racoon', 'giraffe'];
const arr = arr1.concat(arr2);
console.log(arr);
Output:
[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
Sytax: Array1.concat(Arra2)
Array1.concat(Arra2) will return a combined array of Array1 and Array2 or concat method concatinates Array2 to Array1 and returns the same.
Array.slice(start,end)
const arr =[ 'cat', 'dog', 'horse', 'racoon', 'giraffe' ]
const Rarr = arr.slice(2,4);
console.log(Rarr);
Output:
[ 'horse', 'racoon' ]
Syntax:Array.slice(start,end)
Here in the above example,2 is start and 4 is end, the method copies items from 2 and ends at 4( 4 is not included) i.e 2,3.
Therefore, slice copies the items from start and end-1 elements from the Array .Keep in mind that slice will not affect the parent array Array here arr.
NOTE: If you don't specify end it will copy until the end of the array.
I discussed the most commonly used methods here, and if you want to learn more, visit [MDN](Array - JavaScript | MDN (mozilla.org)).
Thank you for reading ☺️