Javascript Course

List with useful JavaScript methods of the Array object, and functions to work with arrays in JS scripts.

Array.isArray(arr) - returns True if 'arr' is an array, otherwise, False.
let arr =['ab', 'cd', 90];

//if arr is an array, shows the value of first item
if(Array.isArray(arr)) document.write('<p>First item: '+arr[0]+'</p>');
arr.concat() - joins two or more arrays, does not change the existing arrays, it only returns a copy of the joined arrays.
let arr =['ab', 'cd'];
let arr2 =[34, 'xy'];
let arr3 = arr.concat(arr2);

console.log(arr3); //['ab', 'cd', 34, 'xy']
console.log(arr); //['ab', 'cd']
arr.fill(val, start, end) - fills all the elements of an array from a start index to an end index (not included) with a static value.
let arr =['ab', 'cd', 90, 123];

//replace with 'xy' the values from index 1 till the third item
let arr2 = arr.fill('xy', 1, 3);
console.log(arr2); //['ab', 'xy', 'xy', 123]
arr.includes(val) - determines whether an array contains a certain value (val), returning true or false.
let arr =['ab', 'cd', 90];
if(arr.includes('cd')) document.write('<p>arr contains the value: cd</p>');
arr.indexOf(val) - returns the first index of an element within the array equal to the specified value, or -1 if none is found.
let arr =['ab', 'cd', 90];
var ixv = arr.indexOf('cd');
if(ixv !=-1) document.write('<p>arr contains the value: cd, with index: '+ixv+'</p>');
arr.join(separator) - joins the elements of an array into a single string with a separator character.
let arr =['ab', 'cd', 90];
document.write('<p>arr contains: '+arr.join('-')+'</p>');
arr.pop() - removes the last element from an array and then returns the removed element.
let arr =['ab', 'cd', 90];
var del_last = arr.pop();

console.log('Deleted item: '+ del_last);
console.log(arr); //['ab', 'cd']
arr.push(e1, e2) - adds one or more elements to the end of an array, and returns the new length.
let arr =['ab', 'cd'];
var nra = arr.push('xy', 89);

console.log(nra); //4
console.log(arr); //['ab', 'cd', 'xy', 89];
arr.reverse() - reverses the position of the elements in an array: the first element is moved to the last slot and the last element is moved to the first slot, and so on.
let arr =['ab', 'cd', 90];

console.log(arr); //[90, 'cd', 'ab']
arr.shift() - removes the first element from an array and returns that element.
let arr =['ab', 'cd', 90];
var del_e = arr.shift();

console.log(del_e); //ab
console.log(arr); //['cd', 90]
arr.slice(i_start, end) - gets a part of an array, from i_start till index 'end' (not included), and returns the new array (The original array will not be changed).
let arr =['ab', 'cd', 90, 'xy', 78];
let arr2 = arr.slice(1, 3);

console.log(arr2); //['cd', 90]
arr.sort() - sorts the elements of an array into alphabetical order based on the string values of the elements.
let arr =['ef', 'a8', 9, 78];

console.log(arr); //[78, 9, 'a8', 'ef']
arr.splice(start, nrDelete, [e1, e2,..]) - removes/ adds elements in an array, beginning from the 'start' position, and returns the moved elements.
- nrDelete - The number of elements to be removed from 'start'. If set to 0, no elements will be removed.
- [e1, e2,..] - (optional) The new elements to be added to the array.
let arr =['ab', 'cd', 90, 'xy'];

//removes an item after index 2 (the third), and adds other two items from index 2
var del_e = arr.splice(2, 1, 'ad1', 'ad2');

console.log(del_e); //[90]
console.log(arr); //['ab', 'cd', 'ad1', 'ad2', 'xy']
arr.toString() - converts an array to a string, with the elements separated by comma, and returns the string.
let arr =['ab', 'cd', 90];
document.write('<p>arr contains: '+arr.toString()+'</p>');
arr.unshift() - adds elements to the beginning of an array and returns the number of the elements in the new array.
let arr =['ab', 90];
var nra = arr.unshift('ad1', 'ad2');

console.log(nra); //4
console.log(arr); //['ad1', 'ad2', 'ab', 90]

Methods with callback function

Methods that use a callback function.
The 'callback' function from these methods is automatically executed for each element in the array to which the method is applied.

Except the reduce() method, for all other cases, the 'callback' function has this syntax:
var callbackF =(va, index, array)=>{
 //code of the function
- 'val' is the value of current item.
- 'index' (optional) is the item index
- 'array' (optional) is the traversed array.

arr.filter(callback) - creates a new array with all of the elements of this array for which the callback function returns True.
let arr =[1, 2, 5, 8, 28];

//keep the items divisible by two
let arr2 = arr.filter((v, i)=>{ return (v%2)==0; });

console.log(arr2); //[2, 8, 28]
arr.find(callback) - returns the first item from array for which the 'callback' function returns True; or undefined if not found.
let arr =[1, 'ab', 2, 5, 8];

//gets the first item in arr divisible by two
let e_par = arr.find((v, i)=>{ return (v%2)==0; });

if(e_par) document.write('<p>The first item in arr divisible by two is: '+e_par+'</p>');
arr.findIndex(callback) - returns the index of the first element in array for which the 'callback' returns True; or -1 if not found.
let arr =[1, 'ab', 4, 5, 8];

//the index of the first item in arr divisible by two
let i_par = arr.findIndex((v, i)=>{ return (v%2)==0; });

if(i_par) document.write('<p>The first item in arr divisible by two is: '+arr[i_par]+'; with index: '+i_par+'</p>');
arr.forEach(callback) - calls the 'callback' for each element in the array.
let arr =['HTML', 'CSS', 'JavaScript'];

//traverses the array and displays each element
arr.forEach((v, i)=>{
 document.write('<br>'+i+' - '+v);
}); - creates a new array with the results of the 'callback' function on every element in this array.
var arr = [1, 4, 9, 16];

//creates an array with the values from arr, doubled
const arr2 =, i)=>v*2);

console.log(arr2); //[2, 8, 18, 32]
arr.reduce(clbRedu) - apply the function from 'clbRedu' against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value. - 'clbRedu' is a callback function with 4 arguments:
clbRedu(acumulator, currentValue, index, array)
- acumulator - acumulates the values returned by this function. The initial value is the first element from array, or currentValue (if it is specified).
- currentValue (optional) if it is added, it gives its value to 'acumulator', and the 'currentValue' parameters will represent the first element. If it is not specified, this parameter will be the second element from array.
- index (optional) the index of current item.
- array (optional) is the traversed array.
const arr =[1, 2, 3, 4];

//sum of the elements in arr
const ar_sum = arr.reduce((a, b)=>a+b);

//product of elements in arr
const ar_prd = arr.reduce((a, b)=>a*b);

document.write('<p>The sum of the numbers from [1, 2, 3, 4] is: '+ar_sum+'; The product: '+ar_prd+'</p>');

- A list with methods of the Array object you can find to MDN: Array JavaScript.

Daily Test with Code Example

Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em></em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
Indicate the PHP variable that contains data from a form sent with method="post".
if(isset($_POST["field"])) {
  echo $_POST["field"];
Methods of the Array object in JS

Last accessed pages

  1. Add and Remove HTML elements and Content with jQuery (27311)
  2. Chaining multiple jQuery effects (3837)
  3. sPBM - Simple PHP Backup Manager (1496)
  4. Creating XML data - E4X in ActionScript 3 (2645)
  5. EasyPhpThumbnail Class (1376)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (445)
  2. Register and show online users and visitors (324)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (243)
  4. JavaScript Course - Free lessons (237)
  5. querySelector and querySelectorAll (223)