JavaScript tutorial to add and delete elements from an array.
push() method: Used to insert an element at the end of the array. Can used for inserting multiple elements at the end of the array by supplying multiple arguments. Using the push method increases the array length by number of arguments to push method.
pop() method: Works along with pop method. Allows us to remove the last element from the array. Using the pop method decreases the array length by 1. pop() method also returns the element removed from the array. pop() and push() method together make the array behave like a stack(Element that is last inserted into the stack comes out first - Last In First Out - LIFO)
unshift() method: Used to add an element at the beginning of the array. Can used for inserting multiple elements at the start of the array by supplying multiple arguments. Using the unshift method increases the array length by number of arguments to unshift method. Its shifts the existing elements up the array making their index number of times greater than their current index as the number of arguments passed.
shift() method(): Its the opposite of unshift method. Used to remove an element at the beginning of the array. Always removes a single element. Arguments passed to the shift method doesn't impact the its result. It reduces the array length by 1. It also shifts the current element up the array making their index 1 lesser than their current index.
delete operator: Removes the element present at the specified index just as we can delete an object property. The element at the index becomes undefined. But its subtly different. Array behaves as if the index never existed. Using delete operator doesn't affect array length as it remains same.
You can run find the demo of the above mentioned operator and methods in the code snippet below.
Save the below code in an file with extesnion .html and open that file in any browser.
To run it just Press F12 in your browser window. Go to console tab and observe the output. Press F5 to refresh the page and the console.
(Make sure the console is enabled)
<html>
<script type="text/javascript">
var array = [1,2,3,4,5];
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
output += '\n';
console.log('Array: ' + output);
/*******************************************/
console.log('pushing element 6');
array.push(6);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('pushing element 7,8,9,10');
array.push(7,8,9,10);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('popping last element');
var poppedElement = array.pop();
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Element popped: ' + poppedElement);
var poppedElement = array.pop(6,7);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Element popped: ' + poppedElement);
console.log('Pop method always removes last element only and reduces aray length');
console.log('Argument passed to pop method has doesn\'t affect output');
console.log('Array length: ' + array.length);
console.log('adding 0 to the beginning of the array');
array.unshift(0);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Adding -3,-2,-1 to the beginning of the array');
array.unshift(-3,-2,-1);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Using shift method affects array length');
console.log('Array length: ' + array.length);
console.log('Removing element from the beginning');
array.shift(3);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Array length: ' + array.length);
console.log('Shift method always removes first element only and reduces aray length');
console.log('Argument passed to shift method doesn\'t affect output');
console.log('Using delete method to remove an array element');
delete array[0];
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Array length: ' + array.length);
console.log('Array length is same even after deleting element at index 0');
console.log('So what is present at 0th index: ' + array[0]);
console.log('Does this array even have an index of 0: ' + (0 in array));
console.log('Using the delete operator makes the array sparse');
</script>
</html>
push() method: Used to insert an element at the end of the array. Can used for inserting multiple elements at the end of the array by supplying multiple arguments. Using the push method increases the array length by number of arguments to push method.
pop() method: Works along with pop method. Allows us to remove the last element from the array. Using the pop method decreases the array length by 1. pop() method also returns the element removed from the array. pop() and push() method together make the array behave like a stack(Element that is last inserted into the stack comes out first - Last In First Out - LIFO)
unshift() method: Used to add an element at the beginning of the array. Can used for inserting multiple elements at the start of the array by supplying multiple arguments. Using the unshift method increases the array length by number of arguments to unshift method. Its shifts the existing elements up the array making their index number of times greater than their current index as the number of arguments passed.
shift() method(): Its the opposite of unshift method. Used to remove an element at the beginning of the array. Always removes a single element. Arguments passed to the shift method doesn't impact the its result. It reduces the array length by 1. It also shifts the current element up the array making their index 1 lesser than their current index.
delete operator: Removes the element present at the specified index just as we can delete an object property. The element at the index becomes undefined. But its subtly different. Array behaves as if the index never existed. Using delete operator doesn't affect array length as it remains same.
You can run find the demo of the above mentioned operator and methods in the code snippet below.
Save the below code in an file with extesnion .html and open that file in any browser.
To run it just Press F12 in your browser window. Go to console tab and observe the output. Press F5 to refresh the page and the console.
(Make sure the console is enabled)
<html>
<script type="text/javascript">
var array = [1,2,3,4,5];
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
output += '\n';
console.log('Array: ' + output);
/*******************************************/
console.log('pushing element 6');
array.push(6);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('pushing element 7,8,9,10');
array.push(7,8,9,10);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('popping last element');
var poppedElement = array.pop();
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Element popped: ' + poppedElement);
var poppedElement = array.pop(6,7);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Element popped: ' + poppedElement);
console.log('Pop method always removes last element only and reduces aray length');
console.log('Argument passed to pop method has doesn\'t affect output');
console.log('Array length: ' + array.length);
console.log('adding 0 to the beginning of the array');
array.unshift(0);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Adding -3,-2,-1 to the beginning of the array');
array.unshift(-3,-2,-1);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Using shift method affects array length');
console.log('Array length: ' + array.length);
console.log('Removing element from the beginning');
array.shift(3);
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Array length: ' + array.length);
console.log('Shift method always removes first element only and reduces aray length');
console.log('Argument passed to shift method doesn\'t affect output');
console.log('Using delete method to remove an array element');
delete array[0];
/*******************************************/
var output = "";
for(e in array){
output += array[e] + ' ';
}
console.log('Array: ' + output);
/*******************************************/
console.log('Array length: ' + array.length);
console.log('Array length is same even after deleting element at index 0');
console.log('So what is present at 0th index: ' + array[0]);
console.log('Does this array even have an index of 0: ' + (0 in array));
console.log('Using the delete operator makes the array sparse');
</script>
</html>
