JS Array - A commonly used object

JS Array - A commonly used object

By using arrays, we can store the rendered bulk data from the backend in the client.

Introduction to Java Script

JavaScript (JS) is a lightweight, interpreted compiled programming language with first-class functions. While it is most well known as the scripting language for web pages. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented imperative, and declarative styles.

Array?

The array object, as with arrays in other programming languages enables storing a collection of multiple items under a single variable name and has members for pending common array operations.

Arrays are commonly used to store data, some important characteristics of arrays in JavaScript are:-

  • In JavaScript, arrays are resizable and can contain a mix of different data types. This means those elements inside an array use any data type including Number, String, Boolean, etc.

  • In JavaScript, arrays are not associative arrays. So array elements cannot be accessed using arbitrary strings as indexes, but must be accessed using non-negative integers as indexes.

  • In JavaScript, arrays are Zero-indexed means the first element of an array is at index 0, and the second is at index 1 and continues. To find the last element index we use length property - 1, at the time of array properties, we can see this.

  • In JavaScript, all standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies.

Creating and Accessing an Array!

Creating an Array!

  1. Array literal notation:

    Arrays can be created using the literal notation

    You may be able to understand more if you consider the following example:

     let myName = ['P','R','A','J','W','A','L',1,4,3,true];
     console.log(myName);
    

    Output:

  2. Array constructor with a single parameter :

    The array can be created using a constructor using two keywords called new and array, with a single parameter.

    You may be able to understand more if you consider the following example:

     let myName = new Array("PRAJWAL");
     console.log(myName);
    

    Output:

  3. Array constructor with multiple parameters :

    The array can be created using a constructor using two keywords called new and array, with multiple parameters.

    You may be able to understand more if you consider the following example:

     let myName = new Array('P','R','A','J','W','A','L',1,4,3,true);
     console.log(myName);
    

    Output:

Accessing and Modifying Array items!

Items in an array are numbered, starting from Zero. This number is called the item's index. So the first item has an index of 0, the second has an index of 1, and so on.

  1. Accessing: We can access individual items in an array using bracket notation and supplying the item's index, in the same way, that we access the letters in a string.

    You may be able to understand more if you consider the following example:

     let myName = ['P','R','A','J','W','A','L',1,4,3,true];
     console.log(myName[5]);
     //Output: A
    
  2. Modifying: we can modify an item in an array by giving a single array item a new value.

    You may be able to understand more if you consider the following example:

     let myName = ['P','R','A','J','W','A','L',1,4,3,true];
     myName[1]='S';
     console.log(myName);
    

    Output:

Some Important Methods of Array!

at()

The at() method takes an integer value and returns the item at that index in an array. Here negative integers are counted back from the last item in the array.

You may be able to understand more if you consider the following example:

//SYNTAX:- at(index)

let myName = ['P','R','A','J','W','A','L',1,4,3,true];
console.log(myName.at(3));//Output:J
console.log(myName.at(-3));//Output:4

concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array. This new array contains the array1 element first and array2 element next and visa versa.

You may be able to understand more if you consider the following example:

//SYNTAX:- array1.concat(array2);
let vehicles = ['car','bike','auto','lorry','train'];
let wheels = [4,2,3,6,'infinite'];
let combine = vehicles.concat(wheels);
console.log(combine);

Output:

copyWithin()

The copyWithin() method shallow copies part of an array to another location in the same array and return it without modifying its length.

You may be able to understand more if you consider the following example:

//SYNTAX:- 
//copyWithin(target)
//copyWithin(target, start)
//copyWithin(target, start, end)
//copyWithin()
let number = [1,2,3,4,5,6,7,8,9,0];
console.log(number.copyWithin(4));//Output:[1, 2, 3, 4, 1,2, 3, 4, 5, 6]
//Here 4 becomes the targeted index, by default it takes the 0th index element to copy in the targeted index.
console.log(number.copyWithin(2,1));//Output:[1, 2, 2, 3, 4, 5, 6, 7, 8, 9]
//Here 2 becomes the targeted index and 1 starts the element means which is to be copied at the targeted index.
console.log(number.copyWithin(4,2,6));//Output:[1, 2, 3, 4, 3, 4, 5, 6, 9, 0]

entries()

The entries() method returns a new array iterator object that contains the key/value pairs for each index in the array.

You may be able to understand more if you consider the following example:

//SYNTAX:-entries()
let number = [1,2,3,4,5,6,7,8,9,0];
let entry = number.entries()
console.log(entry.next().value,entry.next().value,entry.next().value,entry.next().value,entry.next().value,entry.next().value);
console.log(entry.next().value);

//Here each before and next value pair are kept iterating

Output:

fill()

The fill() method changes all elements in an array to static value, from a start index to an end index, by default start is 0 and the end is array.length. It returns the modified array.

You may be able to understand more if you consider the following example:

//Syntax:- ArrayName.fill(value);
//ArrayName.fill(value, start);
//ArrayName.fill(value,start,end);
let message = ['I','really','to','know','that','how','fill','works'];
console.log(message.fill('want'));//Output: [ 'want', 'want', 'want', 'want', 'want', 'want', 'want', 'want']
console.log(message.fill(0,1));//Output:['I', 0, 0, 0, 0,   0, 0, 0]
console.log(message.fill('coder',3,6));//Output:[ 'I','really','to','coder','coder','coder','fill',  'works' ]

find()

The find() method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

Syntax:-

// Arrow function
find((element) => { /* … */ })
find((element, index) => { /* … */ })
find((element, index, array) => { /* … */ })

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function (element) { /* … */ })
find(function (element, index) { /* … */ })
find(function (element, index, array) { /* … */ })
find(function (element, index, array) { /* … */ }, thisArg)

The example, It's still a work in progress for me

findIndex()

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

Syntax:-

// Arrow function
findIndex((element) => { /* … */ })
findIndex((element, index) => { /* … */ })
findIndex((element, index, array) => { /* … */ })

// Callback function
findIndex(callbackFn)
findIndex(callbackFn, thisArg)

// Inline callback function
findIndex(function (element) { /* … */ })
findIndex(function (element, index) { /* … */ })
findIndex(function (element, index, array) { /* … */ })
findIndex(function (element, index, array) { /* … */ }, thisArg)

The example, It's still a work in progress for me.

flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

You may be able to understand more if you consider the following example:

///Syntax:-flat() 
//flat(depth)

let mix = ['1',3,5,[4,6,[5,6]],5];
console.log(mix.flat());//Output: [ '1', 3, 5, 4, 6, [ 5, 6 ], 5 ]
console.log(mix.flat(2));//Output:['1', 3, 5, 4, 6,   5, 6, 5 ]

flatMap()

The flatMap() method returns a new array formed by applying a given callback function to each element of the array and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1, but slightly more efficient than calling those two methods separately.

You may be able to understand more if you consider the following example:

// Arrow function
//flatMap((element) => { /* … */ })
//flatMap((element, index) => { /* … */ })
//flatMap((element, index, array) => { /* … */ })
// Callback function
//flatMap(callbackFn)
//flatMap(callbackFn, thisArg)


let counts = [1,2,3,[4,5,[6,7,8,[9],10]],11,18,19];
let perfect = counts.flatMap(num => num);
console.log(perfect);//Output: [ 1, 2, 3, 4, 5, [ 6, 7, 8, [ 9 ], 10 ], 11, 18, 19 ]

forEach()

The forEach() method executes a provided function once for each array element.

You may be able to understand more if you consider the following example:

let words = ['iNeuron','HashnodeBlog','blog','coder','IWriteCode'];
words.forEach(word => console.log(word));
// output:
// iNeuron
// HashnodeBlog
// blog
// coder
// IWriteCode

indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

//Syntax:-
//indexOf(searchElement)
//indexOf(searchElement, fromIndex)

let wordsandnumbers = ['iNeuron','HashnodeBlog','blog','coder','IWriteCode'];
console.log(wordsandnumbers.indexOf('coder'));//Output:3
console.log(wordsandnumbers.indexOf('prajwal'));//Output:-1

isArray()

The Array.isArray() static method determines whether the passed value is an Array.

//Syntax:-
Array.isArray(value)

join()

The join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

//Syntax:- join()
//join(separator)

let mine = ['I','Love','Coding'];
console.log(mine.join(''));//Output:- ILoveCoding
console.log(mine.join('-'));//Output:- I-Love-Coding

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

// Arrow function
//map((element) => { /* … */ })
//map((element, index) => { /* … */ })
//map((element, index, array) => { /* … */ })
// Callback function
//map(callbackFn)
//map(callbackFn, thisArg)


let cringe = [1,4,5,6,7,8];
let squares = cringe.map(items => items*items);
console.log(squares);//Output:-[ 1, 16, 25, 36, 49, 64 ]

pop()

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

//Syntax:-pop()

let deleteLast = [1,5,3,7,9,6];
console.log(deleteLast.pop());//Output:-6
console.log(deleteLast);//Output:-[ 1, 5, 3, 7, 9 ]

push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

//Syntax:- push(element0)
//push(element0, element1)
//push(element0, element1, /* … ,*/ elementN)

let addCorrect = [2,4,6];
addCorrect.push(8);
console.log(addCorrect);//Output:-[ 2, 4, 6, 8 ]

reverse()

The reverse() method reverses an array in place and returns the reference to the same array, the first array element now becoming the last, and the last array element becoming the first. In other words, the order of the elements in the array will be turned in the direction opposite to that previously stated.

//Suntax:- reverse()

let re_order = ['challenge','love','I']
let order = re_order.reverse();
console.log(order);//Output:[ 'I', 'love', 'challenge' ]
console.log(order.join(' ')); //Output: I love challenge

shift()

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

//Syntax:- shift()

let even = [1,2,3,4];
console.log(even.length);//Output:4
console.log(even.shift());//Output:1
console.log(even.length);//Output:3

slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end, where start and end represent the index of items in that array. The original array will not be modified.

//Syntax:- slice()
//slice(start)
//slice(start, end)

let you = ['have','write','and','submit','a','JS-Arraylength','finding','code'];
console.log(you.slice(1,4));//Output:- [ 'write', 'and', 'submit' ]
console.log(you.slice(1));//Output:- [ 'write', 'and', 'submit', 'a', 'JS-Arraylength', 'finding', 'code' ]

sort()

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending.

//Syntax:- sort()

let sorting = ['r','j','a','i','b'];
console.log(sorting.sort());//Output:- [ 'a', 'b', 'i', 'j', 'r' ]

splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

//Syntax:-splice(start)
//splice(start, deleteCount)
//splice(start, deleteCount, item1)

let replace = ['a','e','b','o','u'];
replace.splice(2,1,'i');
console.log(replace);//Output:[ 'a', 'e', 'i', 'o', 'u' ]

toString()

The toString() method returns a string representing the specified array and its elements.

//Syntax:- toString()

let you = ['Have','to','write','and','submit','a','JS-Arraylength','finding','code',1,2,3,4,5,6];
console.log(you.toString());//Output:- Have,to,write,and,submit,a,JS-Arraylength,finding,code,1,2,3,4,5,6

unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

//Syntax:- unshift(element0)
//unshift(element0,...., elementn)



let k = [1,2,3,4,5];
console.log(k.length);//Output:- 5
k.unshift(6,7,8);
console.log(k.length);//Output:- 8

values()

The values() method returns a new array iterator object that iterates the value of each index in the array.

let vowels = ['a','e','i','o','u'];
let Arrays = vowels.values();
for (let values of Arrays){
    console.log(values);
}
// Output:-
// a
// e
// i
// o
// u

This is something about the ARRAY in JS.

For like this more code star at: github.com/Prajwal-V-Naik?tab=repositories

For everyday updates connect at: linkedin.com/in/pajju-dev-8431withyou

"Learn to start"

"Happy learning"

Did you find this article valuable?

Support Prajwal V Naik by becoming a sponsor. Any amount is appreciated!