Blogger Ever

Adding, removing, updating and extracting values in Javascript array

A simple go through of methods in Javascript arrays.
A collection of data is simply called a array, in programming languages. The way we deal them is different from a variable, we have different methods and array have different properties - we perhaps know. Lets take us a look at some simple dos for some simple tasks.

Extracting

Extracting values from an array using index number is not difficult at all. Lets take an example:
var foo=['a','b','c'];
console.log(foo[1])
// b
If we have no idea of the item exist or not, then try using .indexOf() method, if the return value is not equals to -1 then the return value is the index number of the item in the array. Simply, to extract a value without getting an undefined is to use .indexOf() method.
var foo=['a','b','c'];
console.log(foo.indexOf('a'));
// 0
console.log(foo.indexOf('b');
// 1
console.log(foo.indexOf('d');
// -1

Updating

This was all about extracting the item, but what about updating a value. We know that putting the index number with the array returns a specific item placed at the given index number. But what if we want to update that value?
var android = ['Jellybean', 'KitKat', 'Lollipop'];
console.log(android[0]);
// Jellybean
android[0] = 'Marshmallow';
console.log(android[0]);
// Marshmallow

Adding

Now we have updated the Android. Lets move on adding something to this array. We use .push() method to add the value in the array, the item is added as the last item of array.
var android = ['Jellybean', 'KitKat', 'Lollipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
android.push('Marshmallow');
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop', 'Marshmallow']
What if we want to add item as first in the array. For that we use .unshift() method of array. Here is the look:
var android = ['Jellybean', 'KitKat', 'Lollipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
android.unshift('Marshmallow');
console.log(android);
// ['Marshmallow', 'Jellybean', 'KitKat', 'Lollipop']

Removing

The last part of this post is to remove the item from the array. Well it is not the delete to remove an item from the array because it creates holes. Have a look.

delete to remove item

var android = ['Jellybean', 'KitKat', 'Lollipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
console.log(android.length);
// 3
delete android[1];
console.log(android);
// ['Jellybean', '', 'Lollipop']
console.log(android.length);
// 3
console.log(android[1]);
// undefined
You must have noticed that remove method creates a blank space in the array. It neither updates other items nor updates the length value. So here is what to do.

Using .splice()

arr.splice(index, numberOfItemsToRemove)
Not to confuse with .slice(). The splice accepts two values, first one is the index number and second is number of items to be removed after that index.
var android = ['Jellybean', 'KitKat', 'Lollipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
console.log(android.length);
// 3
android.splice(1, 1);
console.log(android);
// ['Jellybean', 'Lollipop']
This one removed the arbitrary item from the array.

Remove the end items

To remove the first item of array we use .shift() method. This one removes the first element from the array and return that element. It doesn't need any argument.
var android = ['Jellybean', 'KitKat', 'Lolipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
console.log(android.length);
// 3
var firstItem = android.shift();
console.log(firstItem);
// Jellybean
console.log(android);
// ['KitKat', 'Lollipop']
Just like shift, we have .pop() method to remove the last element of array, this one also returns the element that is removed and doesn't requires argument.
var android = ['Jellybean', 'KitKat', 'Lolipop'];
console.log(android);
// ['Jellybean', 'KitKat', 'Lollipop']
console.log(android.length);
// 3
var firstItem = android.shift();
console.log(firstItem);
// Jellybean
console.log(android);
// ['Jellybean', 'KitKat']
Hope this helps :)
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.