arr1.splice(2,0, 3,4)Unlike Java, an array in JavaScript don’t need to be fixed in size. You don’t have to give it a length when declaring and it can be extended as long as you want. The data type of elements inside an array, also, don’t need to be in the same types. You can put every kind of data into one array.
Declaring an Array in JavaScript
As easy as you can imagine, to make a new array in JavaScript below is a common way:
var arr = [1,2,"a", "b",[1,2,3],{name: "Tom"}]
The array above holds various datatype: number, string, array, object. You can access the element using its index, which starts from 0 in the array.
arr[0]
//1
arr[5]
//{name: "Tom"}
arr[4]
//(3) [1, 2, 3]
arr[4][0]
//1
Adding an element to the array
JavaScript is a flexible language, and it allows you to add a new element to the array either in the front or at the end of it.
- .push() to add a new element at the end of the array
arr.push("new end")
//[1, 2, "a", "b", Array(3), {…}, "new end"]
- To add a new element in the front we use unshift()
arr.unshift("new front")
// ["new front", 1, 2, "a", "b", Array(3), {…}, "new end"]
removing elements in the array
Removing an element in the array can be applied to both edges in Javascript.
- To remove the last element we can use pop():
arr.pop()
//"new end" will be removed
// ["new front", 1, 2, "a", "b", Array(3), {…}]
- The first element will be removed using shift()
arr.shift()
//"new front" will be removed
//[1, 2, "a", "b", Array(3), {…}]
Looping through array
Every array have its own length property to let us know how many elements are currently stored inside. So the index of the last item will be equals to array.length - 1
for (var i = 0; i < arr.length; i++)
{ console.log(arr[i])}
// 1
// 2
// a
// b
// [1, 2, 3]
// {name: "Tom"}
Sorting an array
JavaScript provides the built-in sort() method for the Array. By default when using this method, the order will be according to string Unicode code points.
arr.sort()
// [1, Array(3), 2, {…}, "a", "b"]
Using splice() to remove or add new elements at a specific position.
splice() is a special method as you can do some different things with it.
arr1 = [1,2,3,4,5,6,7,8] // make new array name arr1 arr1.splice(2,2) // [1, 2, 5, 6, 7, 8]
arr1.splice() takes 2 parameters, first one is the index to start, the second one is the number of elements will be taken out. As you can see, we will take out 2 items at the index of 2.
arr1.splice(2,0, 3,4) //[1, 2, 3, 4, 5, 6, 7, 8]
This time, there are more than 2 parameters that passed in splice() method. So, after the first two, the rest of the parameters is the new elements that we want to add to the array. arr1.splice(2,0, 3,4) start from the index of 2 and take out 0 item, then add 3 and 4 at the index of 2, and 3 and push the current elements from two forward 2 indexes.
arr2 = arr1.splice(0,3) arr1 // [4, 5, 6, 7, 8] arr2 // [1, 2, 3]
The code above we make new array arr2 by taking out 3 first elements of arr1. Therefore, the array arr1 now have 5 elements left. And arr2 have 3 elements.
slice() method to copy an array
arr1 = [1,2,3,4,5,6] arr2 = arr1. slice(3) arr2 //[4, 5, 6] arr1//[1,2,3,4,5,6]
slice() method will return a new array if you pass only 1 parameter that is the starting point, and it will copy from there to the end of the array. arr2 = arr1. slice(3) will make a new array of arr2 that contains the element at the index of 3 to the end of array arr1.
arr1 = [1, 2, 3, 4, 5, 6] arr2 = arr1.slice(2,4) arr1 //[1, 2, 3, 4, 5, 6] arr2 // [3, 4]
This time we provided 2 parameters. arr2 = arr1.slice(2,4) will make a new array of arr2 that contains the elements from the index of 2 and stop in front of the index of 4 in the array arr1.
What are the difference between slice() and splice()
The main difference here is slice doesn’t affect the original array while splice() does. So next time, you must consider when using slice() or splice because if you accidentally make some change in the original array can cause some problem in your program.