An array is a special variable, which can hold more than one value at a time: it can hold many values under a single name, and the values can be access by referring to an index number.
Syntax: var array_name = [item1, item2, ...]; with JavaScript, the full array can be accessed by referring to the array name.
P.S. Note/Important: array indexes start with 0. [0] is the first element. [1] is the second element. JavaScript array elements are accessed using numeric indexes (starting from 0).
<div>
<a id="ex10"></a><br>
<a id="ex11"></a><br>
<a id="ex12"></a>
</div>
<script>
// mix of values
let arr = [ 'Apple', { name: 'John' }, true, {greeting: 'hello'} ];
document.getElementById('ex10').innerHTML = "object at index 1: " + (arr[1].name); // John
document.getElementById('ex11').innerHTML = "object at index 3: " + arr[3].greeting; // hello
document.getElementById('ex12').innerHTML = "object at index 2: " + arr[2];
</script>
code:
<div>
<a id="ex13"></a><br>
<a id="ex14"></a><br>
<a id="ex15"></a><br>
</div>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
var last = fruits[fruits.length-1];
var third = fruits[2];
document.getElementById("ex13").innerHTML = "using the first index [0]: " + first;
document.getElementById("ex14").innerHTML = "using the last index [4-1]: " + last;
document.getElementById("ex15").innerHTML = "using the third index [2]: " + third;
</script>
copyWithin() - copies array elements within the array, to and from specified positions
Syntax: array.copyWithin(target, start, end)
parameters:
target : required. The index (position) to copy the elements to. start : optional. The start index (position). Default is 0. end : optional. The end index (position). Default is the array length.
The copyWithin() method overwrites the existing values and does not add items to the array.
function : required. A function to be run for each element in the array. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default "undefined". A value passed to the function as its this value.
The every() method executes a function for each array element. It returns true if the function returns true for all elements. It returns false if the function returns false for one element. The every() method does not execute the function for empty elements and does not change the original array.
fill() - fill the elements in an array with a static value
Syntax:array.fill(value, start, end)
parameters:
value : required. The value to fill in. start : optional. The start index (position). Default is 0. end : optional. The stop index (position). Default is array length.
The fill() method overwrites the original array. Start and end position can be specified. If not, all elements will be filled.
function : required. A function to run for each array element. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default "undefined". A value passed to the function as its this value.
The filter() method creates a new array filled with elements that pass a test provided by a function. It does not execute the function for empty elements and does not change the original array.
Example
Click "test" to get every element in the array that has a value above this number:
code:
<div>
<p id="ex7a"></p>
<p id="ex8a"></p><br>
<p>Click "test" to get every element in the array that has a value above this number:</p>
<p><input type="number" id="ageToCheck" value="30"></p>
<button onclick="ageCheck()">test</button>
<p id="ex9a"></p>
</div>
<script>
const leeftijden = [32, 33, 16, 40];
document.getElementById("ex7a").innerHTML = "ages: " + leeftijden
document.getElementById("ex8a").innerHTML = leeftijden.filter(checkAdult);
function checkAdult(leeftijd) {
return leeftijd >= 18;
}
const leeftijden_a = [32, 33, 12, 40, 16, 54];
function checkAge(leeftijd_a) {
return leeftijd_a > document.getElementById("ageToCheck").value;
}
function ageCheck() {
document.getElementById("ex9a").innerHTML = leeftijden_a.filter(checkAge);
}
</script>
find() - returns the value of the first element in an array that passes a test
function : required. A function to run for each array element. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default "undefined". A value passed to the function as its this value.
The find() method executes a function for each array element and returns undefined if no elements are found. It does not execute the function for empty elements and does not change the original array.
Example
Click "test" to return the value of the first element in the array that has a value above this number:
code:
<div>
<p id="ex10a"></p>
<p id="ex11a"></p><br>
<p>Click "test" to return the value of the first element in the array that has a value above this number:</p>
<p><input type="number" id="ageToCheck_c" value="18"></p>
<button onclick="leeftijdFunctie()">test</button>
<p id="ex12a"></p>
</div>
<script>
const leeftijden_b = [3, 10, 18, 20, 24, 35];
document.getElementById("ex10a").innerHTML = "ages: " + leeftijden_b
document.getElementById("ex11a").innerHTML = leeftijden_b.find(checkLeeftijd);
function checkLeeftijd(leeftijd_b) {
return leeftijd_b > 18;
}
const leeftijden_c = [4, 12, 16, 20, 30, 35, 53, 67, 72];
function leeftijdCheck(leeftijd_c) {
return leeftijd_c > document.getElementById("ageToCheck_c").value;
}
function leeftijdFunctie() {
document.getElementById("ex12a").innerHTML = leeftijden_c.find(leeftijdCheck);
}
</script>
Use the built-in find() method to find an element matching a specific criterion.
function : required. A function to run for each array element. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default "undefined". A value passed to the function as its this value.
The findIndex() method executes a function for each array element and returns the index (position) of the first element that passes a test. It returns -1 if no match is found. It does not execute the function for empty elements and does not change the original array.
Example
Click "test" to return the index of the first array element that has a value above this number:
code:
<div>
<p id="ex13a"></p>
<p id="ex14a"></p><br>
<p>Click "test" to return the index of the first array element that has a value above this number:</p>
<p><input type="number" id="toCheck" value="21"></p>
<button onclick="numberFunction()">test</button>
<p id="ex15a"></p>
</div>
<script>
const ages_h = [3, 10, 18, 20];
document.getElementById("ex13a").innerHTML = "ages: " + ages_h;
document.getElementById("ex14a").innerHTML = ages_h.findIndex(checkAge_h);
function checkAge_h(age) {
return age > 18;
}
const numbers_A = [4, 12, 16, 20, 25, 34, 67];
function checkValue1(x) {
return x > document.getElementById("toCheck").value;
}
function numberFunction() {
document.getElementById("ex15a").innerHTML = numbers_A.findIndex(checkValue1);
}
</script>
flat() - concatenates sub-array elements.
Syntax : array.flat(depth)
parameters:
depth : optional. How deep a nested array should be flattened. Default is 1.
function : required. A function to be run for each array element.. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default value "undefined". A value passed to the function to be used as its "this" value.
"flatMap()" does not execute the function for empty elements and does not change the original array.
function : required. A function to be run for each array element.. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default value "undefined". A value passed to the function to be used as its "this" value.
The "forEach() method" does not execute the function for empty elements.
Example
code:
<div>
<p id="ex22a"></p>
<p id="ex23a"></p>
<p id="ex24a"></p><br>
<p id="ex25a"></p>
</div>
<script>
let som = 0;
const nummers = [65, 44, 12, 4];
document.getElementById("ex22a").innerHTML = nummers;
nummers.forEach(firstFunction);
document.getElementById("ex23a").innerHTML = som;
function firstFunction(item) {
som += item;
}
nummers.forEach(secondFunction);
document.getElementById("ex24a").innerHTML = nummers;
function secondFunction(item_b, index, arr) {
arr[index] = item_b * 10;
}
["Bilbo", "Gandalf", "Nazgul", "Louis"].forEach((item, index, array) => {
document.getElementById('ex25a').innerHTML += "index in array: " + (`${item} is at index ${index} in ${array}`) + "<br>";
});
</script>
object :required. The object to convert to an array. . mapFunction : optional. A map function to call on each item. thisValue : optional. A value to use as "this" for the mapFunction.
The "Array.from() method" returns an array from any object with a length property. It returns an array from any iterable object.
includes() - check if an array contains the specified element
Syntax: array.includes(element, start)
parameters:
element : required. The value to search for. start : optional. Start position. Default is 0.
The "includes() method" returns true if an array contains a specified value and false if the value is not found. The includes() method is case sensitive.
Instead of using the indexOf() method to check if an element is in the array, you can use the includes() method, which determines whether an array includes a certain value among its entries, returning true or false as appropriate.
base
let numbers = [1, 2, 3];
var str = "Welcome to javascript tutorial";
let str = 'JavaScript String';
indexOf() - search the array for an element and returns its position
Syntax: array.indexOf(item, start)
parameters:
item : required. The value to search for. start : optional. Where to start the search. Default value is 0. Negative values start the search from the end of the array.
The "indexOf() method" returns the first index (position) of a specified value. It returns -1 if the value is not found. The method starts at a specified index and searches from left to right. By default the search starts at the first element and ends at the last. Negative start values counts from the last element (but still searches from left to right).
Example
code:
<div>
<a id="ex31a"></a><br>
<a id="ex32a"></a><br><br>
<a id="ex33a"></a><br>
<a id="ex34a"></a><br><br>
<a id="ex35a"></a><br>
<a id="ex36a"></a><br>
<a id="ex37a"></a><br>
<a id="ex38a"></a><br>
<a id="ex39a"></a><br><br>
</div>
<script>
const fruits_q = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex31a").innerHTML = "array: " + fruits_q;
let index_q = fruits_q.indexOf("Apple");
document.getElementById("ex32a").innerHTML = "index of Apple: " +index_q;
const fruits_r = ["Banana", "Orange", "Apple", "Mango", "Apple"];
document.getElementById("ex33a").innerHTML = "array: " + fruits_r;
let index_r = fruits_r.indexOf("Apple", 3);
document.getElementById("ex34a").innerHTML = "index of Apple starting from index 3: " + index_r;
let arr8 = [1, 0, false];
document.getElementById('ex35a').innerHTML = "orginal array: " + arr8;
document.getElementById('ex36a').innerHTML = " index of zero: " + arr8.indexOf(0);
document.getElementById('ex37a').innerHTML = " index of false: " + arr8.indexOf(false);
document.getElementById('ex38a').innerHTML = " index of null: " + arr8.indexOf(null);
document.getElementById('ex39a').innerHTML = "one is included: " +arr8.includes(1);
</script>
bitwise indexOf:
When performing a lookup using an array, the indexOf() function is used to retrieve the position of the item you are looking for. If the item is not found, the value -1 is returned. In JavaScript, 0 is considered 'falsy', while numbers greater or lesser than 0 are considered 'truthy'. The bitwise(~) operator will return a truthy value for anything but -1. Negating it is as simple as doing !~. Alternatively, we can also use the includes() function.
longhand
if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
}
shorthand
if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
}
isArray() - checks whether an object is an array
Syntax: Array.isArray(obj)
parameters:
obj : required. An object (or any data type) to be tested.
The "isArray()" method returns true if an object is an array, otherwise false.
keys() - returns a Array Iteration Object, containing the keys of the original array.
Syntax: array.keys()
parameters: none.
The "keys() method" does not change the original array.
Example
code:
<div>
<p id="ex7b"></p>
<p id="ex8b"></p>
<p id="ex9b"></p>
</div>
<script>
const fruits_w = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex7b").innerHTML = "array: " + fruits_w;
const keys = fruits_w.keys();
let text_w = "";
for (let x of keys) {
text_w += x + " , ";
}
document.getElementById("ex8b").innerHTML = "keys: " + text_w;
const keys_w = Object.keys(fruits_w);
let text_ww = "";
for (let x of keys_w) {
text_ww += x + " , ";
}
document.getElementById("ex9b").innerHTML = "keys: " + text_ww;
</script>
lastIndexOf() -search the array for an element, starting at the end, and returns its position
Syntax: array.lastIndexOf(item, start)
parameters:
item : required. The value to search for . start : optional. Where to start the search. Default is the last element (array.length-1). Negative start values counts from the last element (but still searches from right to left).
The "lastIndexOf() method" returns -1 if the value is not found. It starts at a specified index and searches from right to left. By defalt the search starts at the last element and ends at the first. Negative start values counts from the last element (but still searches from right to left).
Example
Click the button to locate the last occurrence of "planet".
code:
<div>
<p>Click the button to locate the last occurrence of "planet".</p>
<a id="ex10b"></a><br>
<button onclick="myFunctionA()">try it</button><br><br>
<a id="ex11b"></a><br>
<p id="ex12b"></p>
<p id="ex13b"></p>
<p id="ex14b"></p>
<p id="ex15b"></p>
<p id="ex16b"></p>
</div>
<script>
var str = "Hello planet earth, you are a great planet.";
document.getElementById("ex10b").innerHTML = str;
function myFunctionA() {
var n = str.lastIndexOf("planet");
document.getElementById("ex11b").innerHTML = "lastIndexOf of 'planet': " + n;
}
const fruits_x = ["Orange", "Apple", "Orange", "Banana", "Apple", "Mango", "Banana"];
document.getElementById("ex12b").innerHTML = "array: " + fruits_x;
let index_x = fruits_x.lastIndexOf("Apple");
document.getElementById("ex13b").innerHTML = "last index of Apple: " + index_x;
let index_xx = fruits_x.lastIndexOf("Apple", 1);
document.getElementById("ex14b").innerHTML = "last index of Apple, starting from index 1: " + index_xx;
let index_xxx = fruits_x.lastIndexOf("Apple", 4);
document.getElementById("ex15b").innerHTML = "last index of Apple, starting from index 4: " + index_xxx;
let index_xxxx = fruits_x.lastIndexOf("Apple", -2);
document.getElementById("ex16b").innerHTML = "last index of Apple, starting from index -1: " + index_xxxx;
</script>
length - sets or returns the number of elements in an array
Syntax: return the length of an array: array.length; set the length of an array: array.length = number
parameters: none.
The "length" property provides an easy way to append new elements to an array without using the push() method.
Example
append new elements to the array
code:
<div>
<p id="ex17b"></p>
<p id="ex18b"></p>
<p id="ex19b"></p>
<p id="ex20b"></p><br>
<p id="ex21b"></p>
<p id="ex22b"></p><br>
<p>append new elements to the array</p>
<a id="ex23b"></a><br>
<button onclick="appendFunction()">try it</button><br><br>
<a id="ex24b"></a>
</div>
<script>
const fruits_y = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex17b").innerHTML = "array: " + fruits_y;
let length = fruits_y.length;
document.getElementById("ex18b").innerHTML = "array length: " + length;
fruits_y.length = 2;
document.getElementById("ex19b").innerHTML = "array length set to 2: " + fruits_y;
document.getElementById("ex20b").innerHTML = "length of fruit array: " + length;
let array_A = ["Bilbo", "Gandalf", "Nazgul"];
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
document.getElementById("ex21b").innerHTML = "array: " + array_A;
document.getElementById('ex22b').innerHTML = "length of items in array: " + lengths;
const fruits6 = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex23b").innerHTML = "original array: " + fruits6;
function appendFunction() {
fruits6[fruits6.length] = "Lemon";
document.getElementById("ex24b").innerHTML = "extended array: " + fruits6;
}
</script>
map() - creates a new array with the result of calling a function for each array element
function : required. A function to be run for each array element.. currentValue : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array of the current element. thisValue : optional. Default value "undefined". A value passed to the function to be used as its "this" value.
The "map() method" does not execute the function for empty elements and does not change the original array.
prototype - allows you to add properties and methods to an Array object
Syntax: Array.prototype.name = value
parameters: none.
"prototype" is a property available with all JavaScript objects. Warning!!! You are not advised to change the prototype of an object that you do not control. You should not change the prototype of built in JavaScript datatypes like: Numbers, Strings, Arrays, Dates, Booleans, Function, Objects. Only change the prototype of your own objects.
Example
code:
<div>
<p id="ex38b"></p>
<p id="ex39b"></p><br>
<p id="ex40b"></p>
<p id="ex1c"></p>
<p id="ex2c"></p>
</div>
<script>
// Add a new method
Array.prototype.myUcase = function() {
for (let i = 0; i < this.length; i++) {
this[i] = this[i].toUpperCase();
}
};
// Use the method on any array
const fruits_z = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex38b").innerHTML = "original array: " + fruits_z;
fruits_z.myUcase();
document.getElementById("ex39b").innerHTML = "array with new method: " + fruits_z;
function Person(first, last, eye) {
this.firstName = first;
this.lastName = last;
this.eyeColor = eye;
}
const myFather = new Person("John", "Doe", "blue");
const myMother = new Person("Sally", "Rally", "green");
Person.prototype.nationality = "English";
document.getElementById("ex40b").innerHTML = JSON.stringify(myFather);
document.getElementById("ex1c").innerHTML = JSON.stringify(myMother);
document.getElementById("ex2c").innerHTML = "My father is " + myFather.nationality + "<br>" + "My mother is " + myMother.nationality;
</script>
push() - adds new elements to the end of an array, and returns the new length
Syntax: array.push(item1, item2, ..., itemX)
parameters:
item1, item2, ..., itemX : The item(s) to add to the array. Minimum one item is required.
function : required. A function to be run for each element in the array.. total : required. The initialValue, or the previously returned value of the function. currentValue : required. The value of the current element. currentIndex : optional. The index of the current element. arr : optional. The array the current element belongs to. initialValue : optional. A value to be passed to the function as the initial value.
The "reduce() method" returns a single value: the function's accumulated result. It does not execute the function for empty array elements and does not change the original array.
At the first callback, there is no return value from the previous callback. Normally, array element 0 is used as initial value, and the iteration starts from array element 1.If an initial value is supplied, this is used, and the iteration starts from array element 0.
function : required. A function to be run for each element in the array.. total : required. The initialValue, or the previously returned value of the function. currentValue : required. The value of the current element. currentIndex : optional. The index of the current element. arr : optional. The array the current element belongs to. initialValue : optional. A value to be passed to the function as the initial value.
The "reduceRight() method" works from right to left and returns a single value: the function's accumulated result. It does not execute the function for empty array elements and does not change the original array.
At the first callback, there is no return value from the previous callback. Normally, the last array element is used as initial value, and the iteration starts from array the element before. If an initial value is supplied, this is used, and the iteration starts from the last element.
reverse() - reverses the order of the elements in an array
Syntax: array.reverse()
parameters: none.
The "reverse() method" overwrites the original array.
Example
Click the button to reverse the order of the elements in the array.
code:
<div>
<a id="ex17c"></a><br>
<p>Click the button to reverse the order of the elements in the array.</p>
<button onclick="myFunctionB()">Try it</button><br>
<a id="ex18c"></a><br>
</div>
<script>
var fruits2 = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex17c").innerHTML = "fruits array: " + fruits2;
function myFunctionB() {
fruits2.reverse();
document.getElementById("ex18c").innerHTML = "fruits array reverse: " + fruits2;
}
</script>
shift() - removes the first element of an array, and returns that element
slice() - selects a part of an array, and returns the new array
Syntax: array.slice(start, end)
parameters:
start : optional. Start position. Default is 0. Negative numbers select from the end of the array.. end : optional. End position. Default is last element.Negative numbers select from the end of the array.
The "slice() method" selects from a given start, up to a (not inclusive) given end. It does not change the original array.
function :required. A function to run for each array element. . value : required. The value of the current element. index : optional. The index of the current element. arr : optional. The array the current element belongs to. this :optional. Default "undefined". A value passed to the function to be used as its "this" value.
The "some() method" returns true (and stops) if the function returns true for one of the array elements. It returns false if the function returns false for all of the array elements. The "some() method" does not execute the function for empty array elements and does not change the original array.
Example
Click the button to test if any array elements has a higher value than the input.
Input:
Values higher:
code:
<div>
<p id="ex34c"></p>
<p id="ex35c"></p><br>
<p>Click the button to test if any array elements has a higher value than the input.</p>
<p id="ex36c"></p>
<p>Input: <input type="number" id="thisToCheck" value="15"></p>
<button onclick="myF()">test</button>
<p>Values higher: <span id="ex37c"></span></p>
</div>
<script>
const ages_zz = [3, 10, 18, 20];
document.getElementById('ex34c').innerHTML = "original array - ages: " + ages_zz;
document.getElementById("ex35c").innerHTML = ages_zz.some(checkAdult);
function checkAdult(age) {
return age > 18;
}
const numbers22 = [4, 12, 16, 20];
document.getElementById('ex36c').innerHTML = "original array - numbers: " + numbers22;
function checkValue(x) {
return x > document.getElementById("thisToCheck").value;
}
function myF() {
document.getElementById("ex37c").innerHTML = numbers22.some(checkValue);
}
</script>
sort() - sorts the elements of an array
Syntax: array.sort(compareFunction)
parameters:
compareFunction : optional. A function that defines a sort order. The function should return a negative, zero, or positive value, depending on the arguments: function(a, b){return a-b}. When sort() compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.
Example: the sort function will sort 40 as a value lower than 100. When comparing 40 and 100, sort() calls the function(40,100). The function calculates 40-100, and returns -60 (a negative value).
The "sort()" overwrites the original array and sorts the elements as strings in alphabetical and ascending order.
Example
code:
<div>
<p id="ex38c"></p>
<p id="ex39c"></p>
<p id="ex40c"></p>
<p id="ex1d"></p><br>
<p id="ex2d"></p>
<p id="ex3d"></p>
<p id="ex4d"></p>
<p id="ex5d"></p>
<p id="ex6d"></p><br>
<p id="ex7d"></p>
</div>
<script>
const fruits_ww = [" Banana", " Orange", " Apple", " Mango"];
document.getElementById('ex38c').innerHTML = "original array: " + fruits_ww;
document.getElementById("ex39c").innerHTML = "sort without function: " + fruits_ww.sort();
fruits_ww.sort();
document.getElementById("ex40c").innerHTML = "sort without function: " + fruits_ww;
fruits_ww.reverse();
document.getElementById("ex1d").innerHTML = "reverse the order" + fruits_ww;
const points = [40, 100, 1, 5, 25, 10];
document.getElementById('ex2d').innerHTML = "original array: " + points;
points.sort(function(a, b){return a-b});
document.getElementById("ex3d").innerHTML = "sorted array from low to high: " + points;
points.sort(function(a, b){return b-a});
document.getElementById("ex4d").innerHTML = "sorted array from high to low: " + points;
// Sort the numbers in ascending order:
points.sort(function(a, b){return a-b});
// points[0] is now the lowest value:
document.getElementById("ex5d").innerHTML = "lowest value: " + points[0];
// Sort the numbers in descending order:
points.sort(function(a, b){return b-a});
// points[0] is now the highest value:
document.getElementById("ex6d").innerHTML = "highest value: " + points[0];
function compareNumeric(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}
let arr9 = [ 1, 2, 15 ];
arr9.sort(compareNumeric);
document.getElementById('ex7d').innerHTML = "sort array: " + arr9;
</script>
index :required. Negative value defines the position from the end of the array. howmany : optional. Number of items to be removed. item1, ..., itemX : optional. New elements(s) to be added..
This method overwrites the original array.
Example
code:
<div>
<a id="ex8d"></a><br>
<a id="ex9d"></a><br><br>
<a id="ex10d"></a><br>
<a id="ex11d"></a><br><br>
<a id="ex12d"></a><br>
<a id="ex13d"></a><br>
<a id="ex14d"></a><br>
<a id="ex15d"></a><br>
</div>
<script>
let arr4 = ["I", "study", "JavaScript", "right", "now"];
document.getElementById('ex8d').innerHTML = "before splice(): " + arr4;
arr4.splice(0, 3, "Let's", "dance");
document.getElementById('ex9d').innerHTML = "after splice(): " + arr4;
let arr5 = ["I", "study", "JavaScript", "right", "now"];
document.getElementById('ex10d').innerHTML = "original array: " + arr5;
let removed = arr5.splice(0, 2);
document.getElementById('ex11d').innerHTML = "removed elements: " + removed;
let garden_pp = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex12d").innerHTML = "original array: " + garden_pp;
// At position 2, add 2 elements:
garden_pp.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("ex13d").innerHTML = "new array without removing: " + garden_pp;
// At position 2, remove 2 items:
garden_pp.splice(2, 2);
document.getElementById("ex14d").innerHTML = "new array with removing: " + garden_pp;
// // At position 2, add 2 elements, remove 1:
garden_pp.splice(2, 1, "Lemon", "Kiwi");
document.getElementById("ex15d").innerHTML = "new array without/with removing: " +garden_pp;
</script>
toString() - converts an array to a string, and returns the result
Syntax: array.toString()
parameters: none.
The "toString() method" returns a string with array values separated by commas. It does not change the original array.
Every JavaScript object has a toString() method. The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string. Normally, you will not use it in your own code.
valueOf() - returns the primitive value of an array
Syntax: array.valueOf()
parameters: none.
The "valueOf() method" does not change the original array.
Example
Click the button to return the primitive value of the string object.
code:
<div>
<p>Click the button to return the primitive value of the string object.</p>
<button onclick="myFunctionC()">Try it</button><br>
<a id="ex23d"></a><br><br>
<a id="ex24d"></a><br>
</div>
<script>
function myFunctionC() {
var str = "Hello World!";
var res = str.valueOf();
document.getElementById("ex23d").innerHTML = res;
}
const fruits_jj = ["Banana", "Orange", "Apple", "Mango"];
const myArray_jj = fruits_jj.valueOf();
document.getElementById("ex24d").innerHTML = "primitive value of array: " + myArray_jj;
</script>
Adding elements with high indexes can create undefined "holes" in an array.
Example
code:
<div>
<a id="ex25d"></a>
</div>
<script>
var fruits7, text, fLen, i;
fruits7 = ["Banana", "Orange", "Apple", "Mango"];
fruits7[6] = "Lemon";
fLen = fruits7.length;
text = "";
for (i = 0; i < fLen; i++) {
text += fruits7[i] + " , ";
}
document.getElementById("ex25d").innerHTML = text;
</script>
Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator "delete". Deleting elements leaves undefined holes in an array.
Example
code:
<div>
<a id="ex26d"></a><br>
<a id="ex27d"></a><br><br>
<a id="ex28d"></a><br>
<a id="ex29d"></a><br>
<a id="ex30d"></a><br>
</div>
<script>
var fruits19 = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("ex26d").innerHTML = "Before deleting: the first fruit is: " + fruits19[0];
delete fruits19[0];
document.getElementById("ex27d").innerHTML = "After deleting, the first fruit is: " + fruits19[0];
let arr12 = ["I", "go", "home"];
document.getElementById('ex28d').innerHTML = "original array: " + arr12;
delete arr12[1];
document.getElementById('ex29d').innerHTML = "second element deleted: " + arr12[1];
document.getElementById('ex30d').innerHTML = "array length: " + arr12.length;
</script>
Find and filter:
Example
code:
<div>
<a id="ex31d"></a><br>
<a id="ex32d"></a><br>
<a id="ex33d"></a><br>
<a id="ex34d"></a><br>
</div>
<script>
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
document.getElementById('ex31d').innerHTML += "users: " + JSON.stringify(users);
document.getElementById('ex32d').innerHTML = "find user with id 1: " + user.name;
let someUsers = users.filter(item => item.id < 3);
document.getElementById('ex33d').innerHTML = "some users: " + JSON.stringify(someUsers);
document.getElementById('ex34d').innerHTML = "length of filtering array (someUsers): " + someUsers.length;
</script>
Filter out all falsy values from an array: using this function you will be able to filter out all falsy values(0, null, undefined, false) from an array.
JavaScript is very tricky when it comes to its built-in sort method. It doesn't handle numbers well, so this function is a simple way of sorting your array.
In the past, we always used the “indexOf” method to check if the array contained a value. If the value returned by “indexOf” is greater than -1, it means that there is one.
But now the data is more complex. We will not be able to directly confirm whether "fatfish" exists in the array through the indexOf method. Fortunately, the findIndex method is provided in ES6.
There are a couple of ways to merge arrays. One of them is using the “concat” method. Another one is using the spread operator (”…”). We can also eliminate duplicates from the final array using the “Set” object. Also, Array.concat method with spread operator can be used.
Example - code
// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];
// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
const merge = [...new Set([...a, ...b])];
// Merge but don't remove the duplications
nums1.push(...nums2, ...nums3);
console.log(nums1);
Get common items from multiple arrays
Using this function, common items from arrays can be found, and any number of arrays can be passed. The function will return the common items and a blank array if the arrays don’t have any items in common.
const array1 = ['a', 'b', 'c', 'd', 'e'];
// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]
// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]
const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// expected output: true
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"
arraybuffer-bytrelength:
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(8);
// use byteLength to check the size
const bytes = buffer.byteLength;
console.log(bytes);
// expected output: 8
arraybuffer-constructor:
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(8);
console.log(buffer.byteLength);
// expected output: 8
arraybuffer-isview:
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(16);
console.log(ArrayBuffer.isView(new Int32Array()));
// expected output: true
arraybuffer-slice:
// create an ArrayBuffer with a size in bytes
const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
// produces Int32Array [0, 0, 0, 0]
int32View[1] = 42;
const sliced = new Int32Array(buffer.slice(4, 12));
// produces Int32Array [42, 0]
console.log(sliced[0]);
// expected output: 42
JavaScript.info - examples
examples
declaration:
let arr = new Array();
let arr = [];
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum
fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"]
fruits[3] = 'Lemon'; // now ["Apple", "Orange", "Pear", "Lemon"]
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits.length ); // 3
alert( fruits ); // Apple,Orange,Plum
// mix of values
let arr = [ 'Apple', { name: 'John' }, true, function() { alert('hello'); } ];
// get the object at index 1 and then show its name
alert( arr[1].name ); // John
// get the function at index 3 and run it
arr[3](); // hello
get last element with "at":
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits[fruits.length-1] ); // Plum
// same as fruits[fruits.length-1]
alert( fruits.at(-1) ); // Plum
methods pop/push, shift/unshift:
let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // remove "Pear" and alert it
alert( fruits ); // Apple, Orange
fruits.push("Pear");
alert( fruits ); // Apple, Orange, Pear
let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // remove Apple and alert it
alert( fruits ); // Orange, Pear
fruits.unshift('Apple');
alert( fruits ); // Apple, Orange, Pear
let fruits = ["Apple"];
fruits.push("Orange", "Peach");
fruits.unshift("Pineapple", "Lemon");
// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
alert( fruits );
internals:
let fruits = ["Banana"]
let arr = fruits; // copy by reference (two variables reference the same array)
alert( arr === fruits ); // true
arr.push("Pear"); // modify the array by reference
alert( fruits ); // Banana, Pear - 2 items now
loops:
let arr = ["Apple", "Orange", "Pear"];
for (let i = 0; i < arr.length; i++) {
alert( arr[i] );
}
let fruits = ["Apple", "Orange", "Plum"];
// iterates over array elements
for (let fruit of fruits) {
alert( fruit );
}
let arr = ["Apple", "Orange", "Pear"];
for (let key in arr) {
alert( arr[key] ); // Apple, Orange, Pear
}
length:
let fruits = [];
fruits[123] = "Apple";
alert( fruits.length ); // 124
let arr = [1, 2, 3, 4, 5];
arr.length = 2; // truncate to 2 elements
alert( arr ); // [1, 2]
arr.length = 5; // return length back
alert( arr[3] ); // undefined: the values do not return
new Array:
let arr = new Array("Apple", "Pear", "etc");
let arr = new Array(2); // will it create an array of [2] ?
alert( arr[0] ); // undefined! no elements.
alert( arr.length ); // length 2
multidomensional arrays:
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
alert( matrix[1][1] ); // 5, the central element
alert( [] == [] ); // false
alert( [0] == [0] ); // false
alert( 0 == [] ); // true
alert('0' == [] ); // false
// after [] was converted to ''
alert( 0 == '' ); // true, as '' becomes converted to number 0
alert('0' == '' ); // false, no type conversion, different strings
splice:
arr.splice(start[, deleteCount, elem1, ..., elemN])
let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // from index 1 remove 1 element
alert( arr ); // ["I", "JavaScript"]
let arr = ["I", "study", "JavaScript", "right", "now"];
// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]
let arr = ["I", "study", "JavaScript", "right", "now"];
// remove 2 first elements
let removed = arr.splice(0, 2);
alert( removed ); // "I", "study" <-- array of removed elements
let arr = ["I", "study", "JavaScript"];
// from index 2
// delete 0
// then insert "complex" and "language"
arr.splice(2, 0, "complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"
let arr = [1, 2, 5];
// from index -1 (one step from the end)
// delete 0 elements,
// then insert 3 and 4
arr.splice(-1, 0, 3, 4);
alert( arr ); // 1,2,3,4,5
slice:
arr.slice([start], [end])
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3)
alert( arr.slice(-2) ); // s,t (copy from -2 till the end)
concat:
arr.concat(arg1, arg2...)
let arr = [1, 2];
// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4
// create an array from: arr and [3,4] and [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// create an array from: arr and [3,4], then add values 5 and 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6
let arr = [1, 2];
let arrayLike = {
0: "something",
length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]
iterate: forEach:
arr.forEach(function(item, index, array) {
// ... do something with item
});
// for each element call alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
alert(`${item} is at index ${index} in ${array}`);
});
let result = arr.find(function(item, index, array) {
// if true is returned, item is returned and iteration is stopped
// for falsy scenario returns undefined
});
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
alert(user.name); // John
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"},
{id: 4, name: "John"}
];
// Find the index of the first John
alert(users.findIndex(user => user.name == 'John')); // 0
// Find the index of the last John
alert(users.findLastIndex(user => user.name == 'John')); // 3
filter:
let results = arr.filter(function(item, index, array) {
// if true item is pushed to results and the iteration continues
// returns empty array if nothing found
});
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
// returns array of the first two users
let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length); // 2
map:
let result = arr.map(function(item, index, array) {
// returns the new value instead of item
});
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6
sort(fn):
let arr = [ 1, 2, 15 ];
// the method reorders the content of arr
arr.sort();
alert( arr ); // 1, 15, 2
function compareNumeric(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}
let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr); // 1, 2, 15
let names = 'Bilbo, Gandalf, Nazgul';
let arr = names.split(', ');
for (let name of arr) {
alert( `A message to ${name}.` ); // \A message to Bilbo (and other names)
}
let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
alert(arr); // Bilbo, Gandalf
let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
let str = arr.join(';'); // glue the array into a string using ;
alert( str ); // Bilbo;Gandalf;Nazgul
reduce/reduceRight:
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15
let arr = [1, 2, 3, 4, 5];
// removed initial value from reduce (no 0)
let result = arr.reduce((sum, current) => sum + current);
alert( result ); // 15
