JavaScript Array- Part 1
What is Array in JavaScipt?
The
Arrayobject, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name, and has members for performing common array operations.
Array allows you to do tasks like Add, Remove, and much more. There are countless methods to manipulate them. This manipulation falls under two categories, first one is destructive and other one is non-destructive methods.
Create an Array
Method 1
// name created using Array literal
const name = ['John', 'Doe'];Method 2
// name created using Array() constructor
const name = new Array('John', 'Doe');Destructive Methods
This means the methods can change the value in memory, and you won’t have any original copy of the array.
push()
Adds one or more elements to the end of an array, and returns the new length of the array.
let numbers = [2,4,6,8];
numbers.push(10);
// 5console.log(numbers);
// [2,4,6,8,10]
unshift()
Adds one or more elements to the front of an array, and returns the new length of the array.
let numbers = [2,4,6,8];
numbers.unshift(0);
// 5console.log(numbers);
// [0,2,4,6,8]
pop()
The pop() method removes the last element from an array and returns that element.
let numbers = [2,4,6,8];
numbers.pop();
// 8console.log(numbers);
// [2,4,6]
shift()
The shift() method removes the first element from an array and returns that removed element.
let numbers = [2,4,6,8];
numbers.shift();
// 2console.log(numbers);
// [4,6,8]
splice()
The splice() method changes the contents of an array by removing or replacing existing elements.
The syntax is :
array.splice(start, deleteCount, item1, item2, itemN);- Start: The index at which to start changing the array.
- DeleteCount: An integer indicating the number of elements in the array to remove from
start. - item1…itemN: The elements to add to the array, beginning from
start.
Removing elements:
let numbers = [2,4,6,8];
numbers.splice(0,3);
// [2,4,6]console.log(numbers);
// [8]
Adding elements:
To add items, we need to set the deleteCount to zero
let numbers = [2,4,6,8];
numbers.splice(4,0,10,12);
// []console.log(numbers);
// [2, 4, 6, 8, 10, 12]
Above methods are great and simple to use. But in our day to day basis we like to manipulate an array and still keep the original unchanged. So for that, we go with non-destructive methods, those are bit complex, but will not change the original array.
Non-Destructive Methods
slice()
This method is same as splice() , but very different. It returns subarrays. This method copies a given part of an array and returns that copied part as a new array. It does not change the original array.
The syntax is :
array.slice(start, end)How to use it.
let numbers = [2,4,6,8];
numbers.slice(0,2);
// [2,4]console.log(numbers); // returns the original array
// [2,4,6,8]
Best way to use slice is to assign it to the new value like below:
let numbers = [2,4,6,8];
let newNumber = numbers.slice(0,2);console.log(newNumber);
// [2,4]
filter()
This method creates a new array filled with elements that pass a test provided by a function and does not execute the function for empty elements. This returns a new array.
The syntax is:
array.filter((element, index, array) => {
// returns true if the item passes the filter
});How to use it.
const names = ["Albert", "Joey", "Chandler", "Anne", "Arya"];
const filteredNames = names.filter(item => item[0] === "A");
// ["Albert", "Anne", "Arya"]console.log(filteredNames, names);
// ["Albert", "Anne", "Arya"] ["Albert", "Joey", "Chandler", "Anne", "Arya"]
map()
This method creates a new array by manipulating the values in an array.
// Adding dollar sign to the numbers
let numbers = [2,4,6,8];
const dollars = numbers.map(number => '$' + number);console.log(dollars, numbers);
// ['$2', '$4', '$6', '$8'] [2, 4, 6, 8]
Conclusion
Using non-destructive methods is safer than destructive methods, when you work with large real time applications. Manipulating the array and objects are some of the common functionalities we deal with day to day bases. Think twice, write quality and scalable code.
