Removing object property and array element in JavaScirpt is quite a different world. It is one of defining features that differentiate prototypal from classical OO languages.

Objects vs Arrays

First thing first, what are objects and arrays in JavaScirpt?

An array, declared using ‘[ ]’, is made up of a list of indexed elements. It works like a collection or list depends on which language you compare it to, and therefore comes with push, pop and other methods as expected.

An object, declared using ‘{ }’, implemented like associative arrays, or set in mathematical terms, has one or more key-value pairs as its properties. And because it is in the prototypal world, meaning objects are mutable, you can modify its properties on the fly as you wish.

Deleting Properties from an Object

Assuming an objet like this:

var myObj = { "name": "banana", "colour": "yellow", "texture": "mushy" }

The question of 'how can I remove properties from an object' has been asked over and over again, with surprisingly high ratings.

Apparently, the best way is to use delete operator.

delete myObj.colour // return: true

This way, the property key value pair will be removed from the object, for good.

Modifying an Array

Given the following array:

var myArray = [ "apple", "banana", "orange" ]

If you try to employ the delete method like it is in object,

delete myArray[1] // return: true

Your array will end up with a big black hole in the middle.

["apple", undefined, "orange"]

Unless that’s what you want, the best way to remove some elements from an array is either to slice or splice.

When slicing an array, you are creating a new array from a portion of the existing array. Meanwhile, the original array stays untouched.

var myArray = [ "apple", "banana", "orange" ]

// Give the slice of elements between index 1 and 2 of the array
var result = myArray.slice(1, 2)
// result = ["banana"]

// Give the slice of elements from index 1 to the end of the array
result = myArray.slice(1)
// result = ["banana", "orange"]

// Give the whole array
result = myArray.slice()
// result = ["apple", "banana", "orange"]

While splicing an array, the content of the exiting array is changed, as well as spitting out the elements as a new array.

var myArray = [ "apple", "banana", "orange" ]

// Remove 0 elements from index 1, and insert "peach"
var removed = myArray.splice(1, 0, "peach")
// removed = [], myArray = ["apple", "peach", "banana", "orange"]

// Remove 1 element from index 3
removed = myArray.splice(3, 1)
// removed = ["orange"], myArray = ["apple", "peach", "banana"]

// Remove 2 elements from index 0, and insert "grape", "kiwi"
removed = myArray.splice(0, 2, "grape", "kiwi")
// removed = ["apple", "peach"], myArray = ["grape", "kiwi", "banana"]

// Remove all elements from index 2 to the end
removed = myArray.splice(2)
// removed = ["banana"], myArray = ["grape", "kiwi"]

Additionally, as a handy way to clean up the empty elements in an array, you can also include this in your code.

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

test = new Array("","One","Two","", "Three","","Four").clean("");

test2 = [1,2,,3,,3,,,,,,4,,4,,5,,6,,,,];
test2.clean(undefined)