Array And Its Methods

Array And Its Methods

Table of contents

Array -

The array is a collection of data or we can say an array is a special variable, which can hold more than one value, either which can same type or a different type. An array is defined by a square bracket - "[ ]".

*Syntax -- <type> <array_name> = [<value_1>, <value_2>, . . . . . . . . .] *

Example -- let array1 = ['mango', 25, True, 'ball', 2.5]

let array1 = ['mango', 25, true, 'ball', 2.5];
console.log(array1);

o/p - [ 'mango', 25, true, 'ball', 2.5 ]

Array Methods

We can perform different tasks with an array by using its predefined methods.

  • .length - used for getting length of an array.

    *note - length is not a method so not used a braces "( )"*

let length1 = array1.length;
console.log(length1);

o/p - 5.

  • .push() - The push() method adds a new element to an array (at the end).

      array1.push("push1");
      console.log(array1);
    

o/p - [ 'mango', 25, true, 'ball', 2.5, 'push1' ]

  • .slice() - The slice() method slices out a piece of an array into a new array.

    *note - The slice() method creates a new array and does not remove any elements from the source array.*

      console.log(array1.slice(1,4));
    

o/p - [ 25, true, 'ball' ].

*first value 1 so start slicing from 1 and second value is 4 so is slice value from 1 index to 3 index*

  • .splice() - splice() method can be used to add new items to an array.

    The first parameter (2) 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 ("Lemon" , 110) define the new elements to be added.

      array1.splice(2, 1, "Lemon", 110);
      console.log(array1);
    

    o/p - [ 'mango', 25, 'Lemon', 110, 'ball', 2.5, 'push1' ].

  • .pop() - The pop() method removes the last element from an array.

      let pop1 = array1.pop();
      console.log(pop1);
    
      console.log(array1);
    

    o/p -

    push1

    [ 'mango', 25, 'Lemon', 110, 'ball', 2.5 ]

  • .concat() - The concat() method creates a new array by merging (concatenating) existing arrays.

    We concat two or more arrays.

      let array2 = [11, 22, 33];
      let array3 = ['A', 'B', 'C'];
      let concat1 = array1.concat(array2, array3);
    
      console.log(array1);
      console.log(concat1);
    

    o/p -

    [ 'mango', 25, 'Lemon', 110, 'ball', 2.5, 11, 22, 33, 'A', 'B', 'C' ]

    [ 'mango', 25, 'Lemon', 110, 'ball', 2.5 ]

  • .shift() - The shift() method removes the first array element and "shifts" all other elements to a lower index.

    It works from front you can see pop() work from last.

      array1.shift();
      console.log(array1);
    

    o/p -

    mango

    [ 25, 'Lemon', 110, 'ball', 2.5 ]

  • .unshift() - The unshift() method adds a new element to an array at the beginning (means from index "0"), and "unshift" older elements.

      array1.unshift('added1','added2');
      console.log(array1);
    

    o/p - [ 'added1', 'added2', 25, 'Lemon', 110, 'ball', 2.5 ].

  • delete - Array elements can be deleted using the JavaScript operator delete.

      delete array1[1];
      console.log(array1);
      console.log(array1[1]);
      // value leaves space but it will be undefined
      array1[1] = "new-value";
      console.log(array1);
      console.log(array1[1]);
    

    o/p -

    [ 'mango', <1 empty item>, true, 'ball', 2.5 ]

    undefined

    [ 'mango', 'new-value', true, 'ball', 2.5 ]

    new-value

  • .fill() - The fill() method fills specified elements in an array with a value, it overwrites the original array.

    *syntax -- arry.fill(<value>, <start>, <end>)*

    *not include end value index.*

      array1.fill('fill1', 1, 4);
      console.log(array1);
    

    o/p - [ 'mango', 'fill1', 'fill1', 'fill1', 2.5 ]

  • .indexOf() - The indexOf() method returns the first index (position) of a specified value, returns -1 if the value is not found.

      let indexOf1 = array1.indexOf(2.5);
      console.log(array1);
      console.log(indexOf1);
    

    o/p -

    [ 'mango', 25, true, 'ball', 2.5 ]

    4

    It starts checking from 0 index by default but we can give specific index to search.

      let indexOf1 = array1.indexOf(true, 3);
      console.log(indexOf1);
    

    o/p -

    [ 'mango', 25, true, 'ball', 2.5 ]

    -1

  • .lastIndexOf() - The lastIndexOf() method returns the last index (position) of a specified value, returns -1 if the value is not found.

      array1.push('mango');
      console.log(array1);
      // lastIndexOf
      let lastIndexOf1 = array1.lastIndexOf('mango');
      console.log(lastIndexOf1);
    

    o/p -

    [ 'mango', 25, true, 'ball', 2.5, 'mango' ]

    5

    The lastIndexOf() starts at a specified index and searches from right to left.

      array1.push('mango');
      console.log(array1);
      // from aspecified index (right to left)
      let lastIndexOf1 = array1.lastIndexOf('mango', 4);
      console.log(lastIndexOf1);
    

    o/p -

    [ 'mango', 25, true, 'ball', 2.5, 'mango' ]

    0

  • .includes() - The includes() method returns true if an array contains a specified value, returns false if the value is not found.

    The includes() method is case sensitive.

      let includes1 = array1.includes(25);
      console.log(includes1);
    
      // not included value search 
      let includes2 = array1.includes('apple');
      console.log(includes2);
    

    o/p -

    [ 'mango', 25, true, 'ball', 2.5 ]

    true

    false

  • .isArray() - The isArray() method returns true if an object is an array, otherwise false.

    syntax - Array.isArray(<obj>)

      let isArray1 = Array.isArray(array1);
      console.log(isArray1);
    

    o/p - true

      let array2 = 111;
      let isArray2 = Array.isArray(array2);
      console.log(isArray2);
    

    o/p - false

  • .join() - The join() method returns an array as a string with default separator comma (,).

    We can give any separator.

    join() does not change the original array.

      let join1 = array1.join();
      console.log(join1);
    
      // joining with different things
      let join2 = array1.join('_$$$ ');
      console.log(join2);
    

    o/p -

    mango,25,true,ball,2.5

    mango_$$$ 25_$$$ true_$$$ ball_$$$ 2.5

  • .map() - map() creates a new array from calling a function or method for every array element,

    map() calls a function once for each element in an array or perform a defined task on every element.

    *syntax - array.map(function(currentValue, index, arr), thisValue)*

    *function() - for function,

    currentValue - value of current element,

    index - index of current element(optional),

    arr - array of the current element,

    thisValue - (optional) any value we want to pass in function *

      let array4 = [1, 3, 5, 7]
      console.log(array4);
      // function define for use in map()
      function myFunction(num) {
          return Math.pow(num, 3)
      }
      let map1 = array4.map(myFunction)
      console.log(map1);
      console.log(array4);
    

    o/p -

    [1, 3, 5, 7]

    [ 1, 27, 125, 343 ]

    [1, 3, 5, 7]

    note -

    map() does not execute the function for empty elements.

    map() does not change the original array values.

  • .reverse() - The reverse() method reverses the order of the elements in an array, it overwrites the original array.

let array4 = [1, 3, 5, 7]
array4.reverse();
console.log(array4);

o/p - [ 7, 5, 3, 1 ].

  • find() - The find() method returns the value of the first element that passes a test, it executes a function for each array element.

    Returns undefined if no elements are found.

    note -not execute the function for empty elements.

    Not change the original array.

syntax - array.find(function(currentValue, index, arr),thisValue)

function() - Required, to run for each array element.

currentValue - Required, value of the current element.

index - (Optional), index of the current element.

arr - (Optional), array of the current element.

thisValue - (Optional), value if we want to pass in function.

function myFunction(ele){
    if (ele > 18){
        return ele
    }
}
let find1 = array1.find(myFunction)
console.log(find1);
console.log(array1);

o/p -

25

[ 'mango', 25, true, 'ball', 2.5 ]

If we push() another element see what it will do.

function myFunction(ele){
    if (ele > 18){
        return ele
    }
}
array1.unshift(40);
let find2 = array1.find(myFunction)
console.log(find2);
console.log(array1);

o/p -

40

[ 40, 'mango', 25, true, 'ball', 2.5 ].

  • sort() - The sort() sorts the elements of an array.

    It overwrites the original array.

    The sort() sorts the elements as strings in alphabetical and ascending order.

      let sort1 = array1.sort();
      console.log(sort1);
      // original array will also sorted
      console.log(array1);
    

    o/p -

    [ 2.5, 25, 'ball', 'mango', true ]

    [ 2.5, 25, 'ball', 'mango', true ]

  • .every() , .some() , .reduce() - This all method work with function write between braces.

    All values that pass test will go and add on new array.

    every()

    syntax - array.every(function(currentValue, index, arr), thisValue)

    some()

    syntax - array.some(function(value, index, arr), this

    reduce()

    syntax - array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • All Code Here

let array1 = ['mango', 25, true, 'ball', 2.5];
console.log(array1);

// All Methods Here

// .length
let length1 = array1.length;
console.log(length1);

// .push()
array1.push("push1");
console.log(array1);

// slice
console.log(array1.slice(1,4));

// splice
array1.splice(2, 1, "Lemon", 110);
console.log(array1);

// .pop()
let pop1 = array1.pop();
console.log(pop1);

console.log(array1);

// concat()
let array2 = [11, 22, 33];
let array3 = ['A', 'B', 'C'];
let concat1 = array1.concat(array2, array3);

console.log(concat1);
console.log(array1);

// shift()
let shift1 = array1.shift();
console.log(shift1);
console.log(array1);

// unshift
array1.unshift('added1','added2');
console.log(array1);

// delete
delete array1[1];
console.log(array1);
console.log(array1[1]);

array1[1] = "new-value";
console.log(array1);
console.log(array1[1]);

// fill()
array1.fill('fill1', 1, 4);
console.log(array1);

// indexOf()
let indexOf1 = array1.indexOf(2.5);
console.log(array1);
console.log(indexOf1);

let indexOf1 = array1.indexOf(true);
console.log(indexOf1);

// lastIndexOf()
array1.push('mango');
console.log(array1);
let lastIndexOf1 = array1.lastIndexOf('mango');
console.log(lastIndexOf1);

array1.push('mango');
console.log(array1);
let lastIndexOf1 = array1.lastIndexOf('mango', 4);
console.log(lastIndexOf1);

// includes()
let includes1 = array1.includes(25);
console.log(includes1);

let includes2 = array1.includes('apple');
console.log(includes2);

// isArray
let isArray1 = Array.isArray(array1);
console.log(isArray1);

let array2 = true;
let isArray2 = Array.isArray(array2);
console.log(isArray2);

// join()
let join1 = array1.join();
console.log(join1);

let join2 = array1.join('_$$$ ');
console.log(join2);

// map()
let array4 = [1, 3, 5, 7]
function myFunction(num) {
    return Math.pow(num, 3)
}
let map1 = array4.map(myFunction)
console.log(map1);

// reverse()
let array4 = [1, 3, 5, 7]
array4.reverse();
console.log(array4);

// find()
function myFunction(ele){
    if (ele > 18){
        return ele
    }
}
let find1 = array1.find(myFunction)
console.log(find1);
console.log(array1);
// After unshift a value that pass test
array1.unshift(40);
let find2 = array1.find(myFunction)
console.log(find2);
console.log(array1);

// sort()
let sort1 = array1.sort();
console.log(sort1);
console.log(array1);

Thankyou for read

Give Suggestions if any.