Maximizing the Power of Arrays in JavaScript with Built-in Methods

Maximizing the Power of Arrays in JavaScript with Built-in Methods

What is Array?

Arrays are an important data type in JavaScript that allows you to store and manipulate a collection of values. Arrays are ordered, and each element in an array has a numbered position called an index. You can access the elements of an array using their index, and you can modify the elements of an array by reassigning their values.

Why are so different is JavaScript

  • One way that arrays are different in JavaScript compared to other programming languages is that they are dynamic. This means that you can add or remove elements from an array at any time, and the array will automatically adjust its size to accommodate the changes. This is in contrast to languages that have fixed-size arrays, which cannot be resized once they have been created.

  • JavaScript arrays are also versatile and can store elements of any data type, including numbers, strings, objects, and even other arrays. This makes them a useful data structure for storing and manipulating complex data sets.

Why use Array

  • if you have a list of items, storing the cars in a single variable could look like this:

    let car1 = "honda";
    let car2 = "volvo";
    let car3 = "BMW";
    
  • however, what if we want to store 100 car companies? declaring 100 variables isn't a good practice, correct? so how can we store 100 values??

  • Here's the solution is Array

    let carCompanies = ["honda", "volvo", "BMW", "Tesla", "volkswagen"]
    

Array Methods

push()

  • Adds elements to end of array.

    let names = ["vaibhav", "sai", "prashant", 24, 69, "sujit", "vinayak"];
    names.push("aniket");
    console.log(names);
    
  • output :

    [
      'vaibhav',  'sai',
      'prashat',   24,
       69,  'sujit',
      'vinayak',  'aniket'
    ]
    

pop()

  • Removes the last array element

    let names = ["vaibhav", "sai", "prashant", 24, 69, "sujit", "vinayak"];
    names.pop("aniket");
    console.log(names);
    
  • output :

    [
      'vaibhav',  'sai',
      'prashat',   24,
       69,  'sujit',
      'vinayak'
    ]
    

shift()

  • removes the first element from an array. This method changes the length of the array.

    let names = ["vaibhav", "sai", "prashant", 24, 69, "sujit", "vinayak"];
    let firstElement = names.shift();
    console.log(names);
    console.log(firstElement);
    
  • output :

    [
      'sai',    'prashat',
       24,    69,
      'sujit',    'vinayak'
    ]
    
    vaibhav
    

unshift()

  • adds the first element from an array. This method changes the length of the array.

    let names = ["vaibhav", "sai", "prashant", 24, 69, "sujit", "vinayak"];
    names.unshift("aniket");
    console.log(names);
    
  • output :

    [
      'vaibhav',  'sai',
      'prashat',   24,
       69,  'sujit',
      'vinayak',  'aniket'
    ]
    

concat()

  • This method is used to add two or more array

    let fNames = ["vaibhav", "sai", "prashant"];
    let lNames = ["shinde", "maddilwar", "ambhore"];
    console.log(fNames.concat(lNames));
    
  • output :

    [
      'vaibhav',  'sai',
      'prashant', 'shinde',
      'maddilwar',  'ambhore',
    ]
    

slice()

  • This method slices out a piece of an array into a new array. This method has two parameters start and end. if the start element is 2 and the last element is 5 then it returns all the elements from 2 to 4 . 5 will be excluded.

    let city = ["pune", "mumbai", "aurangabad", "kolhapur", "nashik"];
    console.log(slice(1, 4));
    
  • output :

    ['mumbai', 'aurangabad', 'kolhapur']
    

splice()

  • This method can be used to add new items to an array. The first parameter defines the position where new elements should be added. The second parameter defines how many elements should be removed.

    let city = ["pune", "mumbai", "aurangabad", "kolhapur", "nashik"];
    city.splice(2, 1, "delhi");
    console.log(city);
    
  • output :

    ['pune', 'mumbai', 'delhi', 'aurangabad', 'kolhapur', 'nashik']
    

split()

  • This method automatically converts an string to a comma-separated array when a primitive value is expected and then console logs it.

    let x = "vaibhav";
    let y = x.split('');
    console.log(y);
    
  • output :

    [
    'v', 'a', 'i', 'b', 
    'h', 'a', 'v'
    ]
    

reverse()

  • This method is used to reverse the order of the array.

    let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    numbers.reverse();
    console.log(numbers)
    
  • output :

    [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
    

join()

  • This method also joins string to all array elements.

    let digit = [1, 2, 3, 4, 5, 6, 7];
    let var1 = digit.join('*1*');
    console.log(var1);
    
  • output :

    1*1*2*1*3*1*4*1*5*1*6*1*7
    

sort()

  • This method sorts the array's elements alphabetically. Sorting means placing the components in either ascending or descending order.

    let fruit = ["oranges", "apple","grapes","bananas"];
    fruit.sort();
    console.log(fruit);
    
  • output :

    ['apple', 'bananas', 'grapes', 'oranges']
    

includes()

  • This method returns a boolean value if a string contains a specified string "true" if present and "false" if not present.

    let names = ["vaibhav", "sai", "prashant", "aniket"];
    let isAvailable = names.includes("prashant");
    console.log(isAvailable);
    
  • output :

    true
    

indexOf()

  • This method returns the position of the first occurrence of a value in the array. If the value cannot be found, -1 is returned. This method has two parameters the item we want to search and the position from where we want to start the search in the start.

    let city = ["pune", "mumbai", "aurangabad", "kolhapur", "nashik"];
    let ans = city.indexOf(2, 1, "kolhapur");
    console.log(ans);
    
  • output :

    3
    

lastIndexOf()

  • This method returns the last index of the first occurrence of a value in the array. If the value cannot be found, -1 is returned.

    let city = ["pune", "mumbai", "pune", "pune", "nashik"];
    let ans = city.lastIndexOf("pune");
    console.log(ans);
    
  • output :

    3
    

isArray()

  • This method returns a boolean value after checking the given element is a part of array or not.

    let cars = ["BMW", "honda", "maruti", "tata"];
    console.log(Array.isArray(cars));
    
  • output :

    true
    

fill()

  • This method is used to fill the element with the given static value. it takes three argument also "value", "start index", "end index".

    let city = ["pune", "mumbai", "nagpur", "delhi"];
    city.fill("metro city", 2, 3);
    console.log(city);
    
  • output :

    [
    'pune', 'mumbai', 'metro city',
    'nagpur', 'delhi'
    ]
    

map()

  • This method doesn't change the existing array. it return a new array including our calculations/operation applied on it.

    let digit = [10, 20, 30, 40, 50];
    let ans=digit.map((n)=> n*2);
    console.log(ans);
    
  • output :

    [20, 40, 60, 80, 100]
    

filter()

  • This method is used to filter the elements in the array based on the given conditions

    let price=[2000,6000,7000,10000,3500,12000,6953,71582,9600]
    let discount = price.filter(n => n<=10000)
    console.log(discount);
    
  • output :

    [
      2000,  6000,
      7000, 10000,
      3500,  6953,
      9600
    ]
    

for of Loop

  • The for...of statement executes a loop that operates on a sequence of values sourced from an iterable objects.

    let names = ["vaibhav", "shinde", "prashant", "ambhore"]
    let uNames = [];
    for(let x of names){
        uNames.push(names.toUpperCase())
    }
    console.log(uNames);
    
  • output :

    ['VAIBHAV', 'SHINDE', 'PRASHANT', 'AMBHORE']