Array Methods Flashcards
Converting Arrays to Strings
The JavaScript method toString() converts an array to a string of (comma separated) array values.
The toString() method returns an array as a comma separated string: Banana,Orange,Apple,Mango
The join() method also joins all array elements into a string. It behaves just like toString(), but in addition you can specify the separator:
The join() method joins array elements into a string. It this example we have used " * " as a separator between the elements: Banana * Orange * Apple * Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
The toString() method returns an array as a comma separated string: Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
The join() method joins array elements into a string. It this example we have used " * " as a separator between the elements: Banana * Orange * Apple * Mango
Popping and Pushing
When you work with arrays, it is easy to remove elements and add new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
Popping and Pushing
When you work with arrays, it is easy to remove elements and add new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.
Popping
The pop() method removes the last element from an array:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.pop(); // Removes the last element (“Mango”) from fruits
The pop() method returns the value that was “popped out”:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // the value of x is "Mango"
The pop() method removes the last element from an array. Banana,Orange,Apple,Mango Banana,Orange,Apple
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document. getElementById(“demo1”).innerHTML = fruits;
fruits. pop();
document. getElementById(“demo2”).innerHTML = fruits;
The pop() method returns the value that was “popped out”:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document. getElementById(“demo1”).innerHTML = fruits;
document. getElementById(“demo2”).innerHTML = fruits.pop();
document. getElementById(“demo3”).innerHTML = fruits;
The pop() method removes the last element from an array. The return value of the pop() method is the removed item. Banana,Orange,Apple,Mango Mango Banana,Orange,Apple
Pushing The push() method adds a new element to an array (at the end):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits
The push() method returns the new array length:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits. push(“Kiwi”);
document. getElementById(“demo”).innerHTML = fruits;
The push() method appends a new element to an array. button onclick="myFunction()">Try it/button> Banana,Orange,Apple,Mango Banana,Orange,Apple,Mango,Kiwi
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
document. getElementById(“demo2”).innerHTML = fruits.push(“Kiwi”);
document. getElementById(“demo1”).innerHTML = fruits;
The push() method returns the new array length. button onclick="myFunction()">Try it/button> Banana,Orange,Apple,Mango Banana,Orange,Apple,Mango,Kiwi
5
Shifting Elements
Shifting is equivalent to popping, working on the first element instead of the last.
The shift() method removes the first array element and “shifts” all other elements to a lower index.
"Banana", "Orange", "Apple", "Mango" //Removes the first element "Banana" from fruits
The shift() method returns the string that was “shifted out”:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.shift(); // the value of x is "Banana"
The unshift() method adds a new element to an array (at the beginning), and “unshifts” older elements:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
The unshift() method returns the new array length.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Returns 5
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document. getElementById(“demo1”).innerHTML = fruits;
fruits. shift();
document. getElementById(“demo2”).innerHTML = fruits;
// Removes the first element "Banana" from fruits The shift() method removes the first element of an array (and "shifts" all other elements to the left): Banana,Orange,Apple,Mango Orange,Apple,Mango
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document. getElementById(“demo1”).innerHTML = fruits;
document. getElementById(“demo2”).innerHTML = fruits.shift();
document. getElementById(“demo3”).innerHTML = fruits;
The shift() method returns the element that was shifted out. Banana,Orange,Apple,Mango Banana Orange,Apple,Mango
button onclick=”myFunction()”>Try it/button>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
The unshift() method adds new elements to the beginning of an array. Banana,Orange,Apple,Mango Lemon,Banana,Orange,Apple,Mango
unshift() The unshift() method returns the length of the new array:
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document. getElementById(“demo1”).innerHTML = fruits;
document. getElementById(“demo2”).innerHTML = fruits.unshift(“Lemon”);
document. getElementById(“demo3”).innerHTML = fruits;
Banana,Orange,Apple,Mango
5
Lemon,Banana,Orange,Apple,Mango
Note: The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be undefined.
Changing Elements
Array elements are accessed using their index number:
Array indexes start with 0. [0] is the first array element, [1] is the second, [2] is the third …
// Changes the first element of fruits to “Kiwi”
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[0] = "Kiwi";
The length property provides an easy way to append a new element to an array: // Appends "Kiwi" to fruits
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Kiwi";
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
JavaScript Array Methods
Array elements are accessed using their index number:
Banana,Orange,Apple,Mango
Kiwi,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits[fruits.length] = "Kiwi";
document.getElementById("demo").innerHTML = fruits;
}
The length property provides an easy way to append new elements to an array without using the push() method.
button onclick=”myFunction()”>Try it/button>
Banana,Orange,Apple,Mango
Banana,Orange,Apple,Mango,Kiwi
Deleting Elements Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete: // Changes the first element in fruits to undefined
var fruits = ["Banana", "Orange", "Apple", "Mango"]; delete fruits[0];
Using delete may leave undefined holes in the array. Use pop() or shift() instead.
JavaScript Array Methods
Deleting elements leaves undefined holes in an array.
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“demo1”).innerHTML =
“The first fruit is: “ + fruits[0];
delete fruits[0];
document.getElementById(“demo2”).innerHTML =
“The first fruit is: “ + fruits[0];
The first fruit is: Banana
The first fruit is: undefined
Splicing an Array The splice() method can be used to add new items to an array:
Example
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 0, “Lemon”, “Kiwi”);
The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
The splice() method returns an array with the deleted items:
The splice() method adds new elements to an array, and returns an array with the deleted elements (if any).
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 2, "Lemon", "Kiwi");
The splice() method adds new elements to an array.
button onclick=”myFunction()”>Try it/button>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
}
The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
The splice() method returns an array with the deleted items:
The splice() method adds new elements to an array, and returns an array with the deleted elements (if any).
button onclick=”myFunction()”>Try it/button>
Original Array:
Banana,Orange,Apple,Mango
New Array:
Banana,Orange,Lemon,Kiwi
Removed Items:
Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
function myFunction() {
var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed;
}
Using splice() to Remove Elements With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:
Example: // Removes the first element of fruits
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(0, 1);
The first parameter (0) defines the position where new elements should be added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
JavaScript Array Methods
splice()
The splice() methods can be used to remove array elements.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
button onclick=”myFunction()”>Try it/button>
Banana,Orange,Apple,Mango
Orange,Apple,Mango
Apple,Mango
The first parameter (0) defines the position where new elements should be added (spliced in).
The second parameter (1) defines how many elements should be removed.
The rest of the parameters are omitted. No new elements will be added.
Merging (Concatenating) Arrays The concat() method creates a new array by merging (concatenating) existing arrays:
Example (Merging Two Arrays) var myGirls = ["Cecilie", "Lone"]; var myBoys = ["Emil", "Tobias", "Linus"]; var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoys
The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments:
Example (Merging Three Arrays) var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias", "Linus"]; var arr3 = ["Robin", "Morgan"]; var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2 and arr3
The concat() method can also take values as arguments:
var arr1 = ["Cecilie", "Lone"]; var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
JavaScript Array Methods
concat()
The concat() method is used to merge (concatenate) arrays:
Cecilie,Lone,Emil,Tobias,Linus
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments:
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
Cecilie,Lone,Emil,Tobias,Linus,Robin,Morgan
The concat() method can also merge values to arrays:
Cecilie,Lone,Emil,Tobias,Linus
var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);
document.getElementById("demo").innerHTML = myChildren;
Slicing an Array The slice() method slices out a piece of an array into a new array.
This example slices out a part of an array starting from array element 1 (“Orange”):
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(1);
The slice() method creates a new array. It does not remove any elements from the source array.
This example slices out a part of an array starting from array element 3 ("Apple"):
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
The slice() method can take two arguments like slice(1, 3). The method then selects elements from the start argument, and up to (but not including) the end argument.
If the end argument is omitted, like in the first examples, the slice() method slices out the rest of the array. var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]; var citrus = fruits.slice(2);
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
This example slices out a part of an array starting from array element 1 (“Orange”):
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon,Apple,Mango
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
slice()
This example slices out a part of an array starting from array element 3 (“Apple”)
Banana,Orange,Lemon,Apple,Mango
Apple,Mango
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
The slice() method can take two arguments like slice(1, 3).
The method then selects elements from the start argument, and up to (but not including) the end argument.
Banana,Orange,Lemon,Apple,Mango
Orange,Lemon
var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var citrus = fruits.slice(2);
document.getElementById(“demo”).innerHTML = fruits + “<br></br><br></br>” + citrus;
This example slices out a part of an array starting from array element 2 (“Lemon”):
Banana,Orange,Lemon,Apple,Mango
Lemon,Apple,Mango
Automatic toString() JavaScript automatically converts an array to a comma separated string when a primitive value is expected. This is always the case when you try to output an array. These two examples will produce the same result:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
The toString() method returns an array as a comma separated string:
Banana,Orange,Apple,Mango
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
JavaScript automatically converts an array to a comma separated string when a simple value is expected:
Banana,Orange,Apple,Mango
All JavaScript objects have a toString() method.
