Javascript Arrays - Generic and Search & Filter

ECMA Script Magazine authors like to dive into some of the technical journeys on array basics which gives you a deeper understanding of JavaScript Arrays. The take away from this article would be the following basic areas.

1. What is an Array?
2. How does an Array work?
3. What are the Array methods available?

An array is a data structure to store and organize information. Let’s have a look at a simple example: Imagine you own 4 cars in each of the brands like Chevy, Ford, Benz, and Porsche. Now you will park all the 4 cars efficiently in your available space at your house in the Garage. Similarly, in the JavaScript world, you might need to organize the pieces of information to use it later in your application or code

// method 1: Array declaration
// recommended
var garageVehicles = ["Chevy","Ford","Benz","Porsche"]
console.log(garageVehicles) 
// 0:"Chevy", 1:"Ford", 2:"Benz", 3:"Porsche" length:4 

// method 2: Array declaration with "new" keyword
// not advised : There is no need to use "new" JavaScript's built-in array constructor new Array().
var garageVehicles = new Array("Chevy","Ford","Benz","Porsche")
console.log(garageVehicles) 
// 0:"Chevy", 1:"Ford", 2:"Benz", 3:"Porsche" length:4 

// method 3: If you want to have string as index instead of number
// It's called object
var patient = {firstName:"John", lastName:"Bob", age:56};
console.log(patient) 
// "firstName":"John", "lastName":"Bob", "age":56

Below diagram depict how an array works inside a machine or behind programmers declaration. Length is important to use your machine resource effectively.

There are 22 array methods available. Let’s see Generic and Search & Filter methods in brief.

Generic

// 1. isArray(): Check whether the given is an array or not
// to perform all the operation it's mandatory to check the input
var car = ["Chevy","Ford","Benz","Porsche"]
var cars = "test,tests"
Array.isArray(cars) 
// Output: return false
Array.isArray(car) 
// Output: returns ture

// 2. sort(): Sort the given array in ASC
var car = ["Chevy","Ford","Benz","Porsche"]
car.sort()
// Output: "Benz","Chevy","Ford","Porsche"

// 3. reverse(): Reverse the given array 
// can be used to sort array in DESC
var car = ["Chevy","Ford","Benz","Porsche"]
car.sort() // ASC
// Output: "Benz","Chevy","Ford","Porsche"
car.reverse() // DESC
// Output: "Porsche","Ford","Chevy","Benz"

// 4. valueOf(): Can be used to return only value
// without index. This will not change the original array
var car = ["Chevy","Ford","Benz","Porsche"]
car.valueOf()
// Output: "Chevy","Ford","Benz","Porsche"

// 5. toString(): Can be used to convert array to string
var car = ["Chevy","Ford","Benz","Porsche"]
car.toString()
// Output: Chevy,Ford,Benz,Porsche

Search & Filters

// 1. filter(): used for validating each value in the array iteratively
// returns age of people can watch adult movies
var ages = ["20","22","30","43","19","12","16"]
// get ages in theater they are adult (>18 age), function to validate age
function checkAge(age){ return age >= 18;}
ages.filter(checkAge) 
// Output : "20","22","30","43","19"

// 2. find(): get the first adult who visited theater
// age of people who watch movies in theater right now
var ages = ["20","22","30","43","19","12","16"]
// get the first person age who is adult in the theater
function checkAge(age){ return age >= 18;}
ages.find(checkAge) 
// Output : "20"

// 3. findIndex(): get the index of first adult who visited theater
// age of people who watch movies in theater right now
var ages = ["20","22","30","43","19","12","16"]
// get the first person age who is adult in the theater
function checkAge(age){ return age >= 18;}
ages.findIndex(checkAge) 
// Output : 0

// 4. indexOf(): if you know the value and to get the first position directly
var ages = ["20","22","30","43","19","12","16"]
ages.indexOf("43") 
// Output : 3
// Note there is a diff in indexOf you knew the value but in findIndex you don't.

// 5. lastIndexOf(): to get the last index of the value in an array.
var ages = ["20","22","30","20","19","12","16"]
ages.indexOf("20") 
// Output : 3

Programming language concepts are very important to follow for saving time, improving efficiency, better code readability...etc

to be continued ...