DEV Community

PRIYA K
PRIYA K

Posted on

JavaScript Array

eg.
const marks = [20,30,40,50,60]
console.log(marks[-1])
output
undefined

const marks = [20,30,40,50,60]
const marks(marks.at(-1));
output
50

Array
In Java,array stores homogeneous elements.fixed size.
eg:
java = [10,20,30,40,50]

In Javascript,array stores heterogeneous elements.flexible size.
eg:
javascript = [10,"string",20,"priya"]

method
*logic ,*return type,*arguments

Array Methods
Array flat()
eg.
function mult(x){
return [x,x*10]
}
const myArr = [1,2,3,4,5,6]
const newArr = myArr.flapMap(mult);
output
[1, 10, 2, 20, 3, 30, 4, 40, 5, 50, 6, 60]

Array
Array iterations
forEach() is used , so we can avoid use looping methods.
logic :
The forEach() method calls a function (a callback function) once for each array element.
return :
void(nothing to return)
arguments:
call back

value,index,array
for each in functions
code
const marks = [89,88,99,"abcd"]
marks.forEach(display)
function display(value,index,array){
console.log(value,index,array)
}
output
89 0
Array(4) [ 89, 88, 99, "abcd" ]
88 1
Array(4) [ 89, 88, 99, "abcd" ]
99 2
Array(4) [ 89, 88, 99, "abcd" ]
abcd 3
Array(4) [ 89, 88, 99, "abcd" ]

4 times = display is called

object: keep the object and then call the method

arrow functions is used for only one function.
for each in arrow function
eg .
const marks = [89,88,99,"abcd"]
marks.forEach(value => console.log(value))
output
89
88
99
abcd

eg.
const marks = [89,88,99,"abcd"]
marks.forEach(value,index,array => console.log(value,index,array))
output
value is not defined

console.log is not a callback
callback depends on the before function

callback functions
eg
function display(cb){
console.log("display");
cb(); //cb(); output display
}
function add(){
console.log("add");
}
display(add)
output
display
add

eg
function display(cb){
console.log("display");
cb(); //cb(); output display
}
function add(){
console.log("add" + 10);
}
display(add)

output
display
add10

Array methods:
JavaScript Array length:
The length property returns the length (size) of an array:
Example
JavaScript Array length

 const fruits = ["banana","cherry","pineapple","mango"]
        fruits.length = 3
        console.log(fruits)
output:
Array(5) [ "banana", "cherry", "pineapple", "mango", "kiwi" ]

       const fruits = ["banana","apple","orange"];
        let size = fruits.length;
        console.log(size)
output 3

        const fruits = ["banana","apple","orange"];    
        console.log(fruits.length)
output 3
The length property can also be used to set the length of an array:
        const fruits = ["banana","cherry","pineapple","mango"]
        fruits.length = 3
        console.log(fruits)
output [ "banana", "cherry", "pineapple" ]
Enter fullscreen mode Exit fullscreen mode

JavaScript Array toString():
The toString() method returns the elements of an array as a comma separated string.
Example

        const cars = ["bmw","honda","toyota","tesla"]
        let denote = cars.toString()
        console.log(denote)
Enter fullscreen mode Exit fullscreen mode

output
bmw,honda,toyota,tesla

Note
Every JavaScript object has a toString() method.
The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

JavaScript Array join():
The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator:
Example

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.join("#"));
Enter fullscreen mode Exit fullscreen mode

output:
bmw#honda#toyota#tesla

join() and toString() similarities
joins all array elements into a string.

join() vs toString()
join() : specify the separator

JavaScript Array at():
Examples

        const cars = ["bmw","honda","toyota","tesla"]
        let denote = cars.at(-3)
        console.log(denote)
Enter fullscreen mode Exit fullscreen mode

output honda

The at() method returns an indexed element from an array.
The at() method returns the same as [].
Note
Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string.
This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.

Popping and Pushing
Popping
Popping :The pop() method removes the last element from an array
Popping items out of an array
The pop() method returns the value that was "popped out"
eg..

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.pop())
        console.log(cars)
Enter fullscreen mode Exit fullscreen mode

output
tesla
Array(4)["bmw","honda","toyota"]

Pushing
Pushing :The push() method adds a new element to an array (at the end)
Pushing items into an array.
eg..

        const cars = ["bmw","honda","toyota","tesla"]
        console.log(cars.push("aadi"))
        console.log(cars)
Enter fullscreen mode Exit fullscreen mode

output
5
Array(5) [ "bmw", "honda", "toyota", "tesla", "aadi" ]
eg..

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        let length = fruits.push("Kiwi");
        console.log(length)
Enter fullscreen mode Exit fullscreen mode

output
5

JavaScript Array shift():
Shifting is equivalent to popping, but working on the first element instead of the last.
The shift() method removes the first array element and "shifts" all other elements to a lower index.
eg..

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(fruits.shift()) #The shift() method returns the value that was "shifted out"
        console.log(fruits)
Enter fullscreen mode Exit fullscreen mode

output
Banana
Array(3) [ "Orange", "Apple", "Mango" ]

JavaScript Array unshift():
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
Example

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(fruits.unshift("dragon fruit")) #The unshift() method returns the new array length
        console.log(fruits)
Enter fullscreen mode Exit fullscreen mode

output
5
Array(5) [ "dragon fruit", "Banana", "Orange", "Apple", "Mango" ]

pop and shift
remove elements

pop vs shift
pop :remove elements in last position
shift:remove elements in first position

push and unshift
add elements

push vs unshift
push: add elements in last position
unshift:add elements in first position

Changing Elements
Array elements are accessed using their index number:
Array indexes start with 0:
[0] is the first array element
[1] is the second
[2] is the third ...
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";
console.log(fruits)

Array.isArray()

        const fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(Array.isArray(fruits))
Enter fullscreen mode Exit fullscreen mode

output:
true

JavaScript Array delete():
Using delete() leaves undefined holes in the array.
Use pop() or shift() instead.
Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
console.log(fruits)
Enter fullscreen mode Exit fullscreen mode

Merging Arrays (Concatenating):
In programming languages, concatenation means joining strings end-to-end.
Concatenating arrays means joining arrays end-to-end.
The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments.

JavaScript Array concat():
The concat() method creates a new array by merging (concatenating) existing arrays:
Example (Merging Two Arrays)

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
console.log(myChildren)
Enter fullscreen mode Exit fullscreen mode

Example (Merging Three Arrays):

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);
console.log(myChildren)
Enter fullscreen mode Exit fullscreen mode

The concat() method can also take strings as arguments:
Example (Merging an Array with Values)

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 
console.log(myChildren) 
Enter fullscreen mode Exit fullscreen mode

Array copyWithin():
The copyWithin() method copies array elements to another position in an array.
The copyWithin() method overwrites the existing values.
The copyWithin() method does not add items to the array.
The copyWithin() method does not change the length of the array.
Examples
Copy to index 2, all elements from index 0:

          const fruits = ["Banana", "Orange", "Apple", "Mango"];
          console.log(fruits.copyWithin(2,0))
output:
["Banana", "Orange","Banana", "Orange"]
Enter fullscreen mode Exit fullscreen mode

Copy to index 2, the elements from index 0 to 2:
const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
console.log(fruits.copyWithin(2, 0, 2));
output:
[ "Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya" ]

Flattening an Array:
Flattening an array is the process of reducing the dimensionality of an array.
Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.
JavaScript Array flat():
The flat() method creates a new array with sub-array elements concatenated to a specified depth.
Example

const number = [[1,2],[3,4],[5,6]]
console.log(number.flat())
Enter fullscreen mode Exit fullscreen mode

output:
[1,2,3,4,5,6]

JavaScript Array flatMap():
The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.
Example

        const number = [1,2,3,4]
        console.log(number.flatMap(x => [x,x*2]))
Enter fullscreen mode Exit fullscreen mode

output:
[ 1, 2, 2, 4, 3, 6, 4, 8 ]

JavaScript Array Search:

Top comments (0)