Adding, removing, updating and extracting values in Javascript array

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:

1var 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.

1var 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?

1var 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.

1var 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:

1var 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

1var 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()

1arr.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.

1var 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.

1var 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.

1var 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 :)