Arrays in JavaScript

Arrays in JavaScript

ยท

5 min read

What are Arrays?

Arrays are a special type of object. The type of operator in JavaScript returns "object" for arrays. But, JavaScript arrays are best described as arrays. Arrays use numbers to access their "elements".

The difference between Arrays and Objects is that **arrays **are numbered indexed and objects are named indexed.

JavaScript Array Syntax

Syntax:

const array_name = [item1, item2, ...];

Example:

const cars = ["Tata", "Mahendra", "Benz"];

JavaScript Array Syntax using Array()

Syntax:

const array_name = new Array(item1, item2, ...);

Example:

const cars = new Array("Tata", "Mahendra", "Benz");

JavaScript Array Methods

1. concat()

It returns a new array object that contains two or more merged arrays.

const array1 = ['1', '2', '3'];
const array2 = ['4', '5', '6'];
const array3 = array1.concat(array2);

console.log(array3)

// Output
// [ '1', '2', '3', '4', '5', '6' ]

image.png

2. copywithin()

It copies the part of the given array with its own elements and returns the modified array.

Syntax: array.copyWithin(target, start, end)

const array1 = ["1", "2", "3", "4"]
array1.copyWithin(2, 0)
console.log(array1)

// Output
// [ '1', '2', '1', '2' ]

image.png

3. entries()

It creates an iterator object and a loop that iterates over each key/value pair.

const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

console.log(iterator1.next().value);
// expected output: Array [2, "c"]

image.png

4. every()

It determines whether all the elements of an array are satisfying the provided function conditions.

const isBelowThreshold = (currentValue) => currentValue < 40

const array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.every(isBelowThreshold))
// expected output: true

image.png

5. flat()

It creates a new array carrying sub-array elements concatenated recursively till the specified depth.

6. flatMap()

It maps all array elements via a mapping function, then flattens the result into a new array.

7. fill()

It fills elements into an array with static values.

const array1 = [1, 2, 3, 4]

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4))
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1))
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6))
// expected output: [6, 6, 6, 6]

image.png

8. from()

It creates a new array carrying the exact copy of another array element.

9. filter()

It returns the new array containing the elements that pass the provided function conditions.

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]

const result = words.filter((word) => word.length > 6)

console.log(result)
// expected output: Array ["exuberant", "destruction", "present"]

image.png

10. find()

It returns the value of the first element in the given array that satisfies the specified condition.

const array1 = [5, 12, 8, 130, 44]

const found = array1.find((element) => element > 10)

console.log(found)
// expected output: 12

image.png

11. findIndex()

It returns the index value of the first element in the given array that satisfies the specified condition.

12. forEach()

It invokes the provided function once for each element of an array.

13. includes()

It checks whether the given array contains the specified element.

14. indexOf()

It searches the specified element in the given array and returns the index of the first match.

15. isArray()

It tests if the passed value is an array.

16. join()

It joins the elements of an array as a string.

const array1 = ["1", "2", "3", "4"];
const output = array1.join(" * ");

console.log(output)

// Output
// 1 * 2 * 3 * 4

image.png

17. keys()

It creates an iterator object that contains only the keys of the array, then loops through these keys.

18. lastIndexOf()

It searches the specified element in the given array and returns the index of the last match.

19. map()

It calls the specified function for every array element and returns the new array.

20. of()

It creates a new array from a variable number of arguments, holding any type of argument.

21. pop()

It removes and returns the last element of an array.

const array1 = ["1", "2", "3", "4"]
array1.pop()
console.log(array1)

image.png

22. push()

It adds one or more elements to the end of an array.

23. reverse()

It reverses the elements of a given array.

24. reduce(function, initial)

It executes a provided function for each value from left to right and reduces the array to a single value.

25. reduceRight()

It executes a provided function for each value from right to left and reduces the array to a single value.

26. some()

It determines if any element of the array passes the test of the implemented function.

27. shift()

It removes and returns the first element of an array.

28. slice()

It returns a new array containing the copy of the part of the given array.

29. sort()

It returns the element of the given array in sorted order.

30. splice()

It adds/removes elements to/from the given array.

31. toLocaleString()

It returns a string containing all the elements of a specified array.

32. toString()

It converts the elements of a specified array into string form, without affecting the original array.

33. unshift()

It adds one or more elements at the beginning of the given array.

34. values()

It creates a new iterator object carrying values for each index in the array.

Follow for more

Linkedin: https://www.linkedin.com/in/prahladinala/
Github: https://github.com/prahladinala/
Instagram: https://instagram.com/prahlad.inala/
Twitter: https://twitter.com/prahladinala
Figma Community: https://www.figma.com/@prahladinala
Dribbble: https://dribbble.com/prahladinala
Behance: https://www.behance.net/prahladinala
Personal Portfolio: https://prahladinala.in
ToolMate: https://toolmate.co.in

Thank you!

Did you find this article valuable?

Support Prahlad Inala by becoming a sponsor. Any amount is appreciated!

ย