JavaScript

Arrays

TechGlobal School
Swipe
 01/34
JavaScript Arrays |
Introduction
JavaScript arrays are special types of objects used to store multiple
values in a single variable.

They are one of the most commonly used data structures in JavaScript
and provide a convenient way to organize and manipulate collections of
data.

We can create arrays using array literals [ ] or the Array() constructor.

TechGlobal School
 02/34
JavaScript Arrays |
typeof vs isArray()
We can use the typeof operator to check if a variable is an array.
However, typeof returns 'object' for arrays, as arrays are objects in
JavaScript.

TechGlobal School
 03/34
JavaScript Arrays |
accessing elements
In JavaScript, we can access array elements using square brackets []
notation.

The square brackets contain the index of the element you want to access.
Array indexing starts at 0, so the first element of an array has an index of
0, the second element has an index of 1, and so on.

TechGlobal School
 JavaScript Arrays | 04/34

updating elements
In JavaScript, we can update array elements using square brackets []
notation to access the element at a specific index, and then assigning a
new value to that element.

TechGlobal School
 JavaScript Arrays | 05/34

length property
In JavaScript, the length property of an array returns the number of
elements in the array.

It is a property that automatically updates whenever elements are added

to or removed from the array.

TechGlobal School
 JavaScript Arrays | 06/34

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

It mutates the original array by removing the last element.

If the array is empty (length is 0), pop() returns undefined.

Syntax: array.pop()

TechGlobal School
 JavaScript Arrays | 07/34

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

It mutates the original array by adding elements to the end.

The elements are appended in the order they appear in the arguments
list.
Syntax: array.push(element1, ..., elementN)

TechGlobal School
 JavaScript Arrays | 08/34

shift() method
The shift() method removes the first element from an array and returns
that element.

It mutates the original array by removing the first element and shifting all
subsequent elements one position to the left.

If the array is empty (length is 0), shift() returns undefined.

Syntax: array.shift()

TechGlobal School
 JavaScript Arrays | 09/34

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

It mutates the original array by adding elements to the beginning and

shifting all existing elements to the right.

The elements are prepended in the order they appear in the arguments
list.
Syntax: array.unshift(element1, ..., elementN)

TechGlobal School
 JavaScript Arrays | 10/34

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

It modifies the original array and returns an array containing the removed
elements, if any.

Syntax: array.splice(startIndex, deleteCount, item1, item2, ...)

startIndex: The index at which to start modifying the array.

deleteCount: The number of elements to remove starting from the
startIndex.

item1, item2, ...: Elements to add to the array, starting at the

startIndex.

TechGlobal School
 JavaScript Arrays | 11/34

indexOf() method
The indexOf() method searches the array for the specified element from
the beginning (index 0) to the end.

It returns the index of the first occurrence of the specified element in the
array.

If the element is not found, indexOf() returns -1.

Syntax: array.indexOf(searchElement, startIndex)

searchElement: The element to search for in the array.

startIndex (optional): The index at which to start the search. If

omitted, the search starts from index 0.

TechGlobal School
 JavaScript Arrays | 12/34

lastIndexOf() method
The lastIndexOf() method searches the array for the specified element
from the end to the beginning.

It returns the index of the first occurrence of the specified element in the
array.

If the element is not found, lastIndexOf() returns -1.

Syntax: array.lastIndexOf(searchElement, startIndex)

searchElement: The element to search for in the array.

startIndex (optional): The index at which to start the search. If omitted,

the search starts from the last element of the array.

TechGlobal School
 JavaScript Arrays | 13/34

includes() method
The includes() method checks whether a specified element is present in
the array.

It returns true if the specified element is found in the array, and false
otherwise.

Syntax: array.includes(searchElement, fromIndex)

searchElement: The element to search for in the array.

fromIndex (optional): The index at which to start the search.

TechGlobal School
 JavaScript Arrays | 14/34

concat() method
The concat() method is used to merge two or more arrays, creating a
new array that contains the elements of the original arrays.

It does not modify the existing arrays but instead returns a new array
with the combined elements.

Syntax: array.concat(array1, array2, ..., arrayN)

array1, array2, ..., arrayN: Arrays or values to concatenate to the

original array. These can be arrays, values, or a combination of both.

TechGlobal School
 JavaScript Arrays | 15/34

reverse() method
The reverse() method is used to reverse the order of elements in an
array.

It modifies the original array in place and returns the reversed array.

It returns the reversed array, with the elements rearranged in the

opposite order.

Syntax: array.reverse()

TechGlobal School
 JavaScript Arrays | 16/34

slice() method
The slice() method is used to extract a portion of an array into a new
array, without modifying the original array.
It takes two optional parameters: start and end, which specify the
beginning and end of the slice, respectively.
It returns a new array containing the extracted elements.

The original array remains unchanged.

Syntax: array.slice(start, end)

start (optional): The index at which to begin the extraction. If omitted,
slice() starts from index 0. If negative, it counts backward from the end
of the array.

end (optional): The index before which to end the extraction. slice()
extracts up to but does not include the end index. If omitted or
greater than the length of the array, slice() extracts to the end of the
array. If negative, it counts backward from the end of the array.

TechGlobal School
 JavaScript Arrays | 17/34

sort() method
The sort() method sorts the elements of an array in place and returns the
sorted array.
It modifies the original array and does not create a new array.

Syntax: array.sort(compareFunction), where compareFunction is optional.

compareFunction (optional): A function that defines the sort order. If

omitted, the array elements are sorted based on their string
representations. If provided, the function should return a negative value
if the first argument should come before the second, a positive value if
the second argument should come before the first, or zero if the two
elements are equal.

TechGlobal School
 JavaScript Arrays | 18/34

flat() method
The flat() method creates a new array with all sub-array elements
concatenated into it recursively up to the specified depth. It flattens the
nested array structure.
It returns a new array that is flattened to the specified depth.

Syntax: array.flat(depth), where depth is optional.

depth (optional): The depth level specifying how deep nested arrays
should be flattened. The default value is 1. If depth is Infinity, all nested
arrays will be flattened.

TechGlobal School
 JavaScript Arrays | 19/34

toString() method
The toString() method converts an array to a string representation,
where each element is converted to a string and separated by commas.
If an element is undefined, it is converted to the string "undefined". If an
element is null, it is converted to the string "null".

It returns a string representation of the array.

Syntax: array.toString()

TechGlobal School
 JavaScript Arrays | 20/34

join() method
The join() method joins all elements of an array into a single string. Each
element is converted to a string and concatenated together, separated
by the specified separator string.
It returns a string representing the joined array elements.

Syntax: array.join(separator)

separator (optional): The string used to separate the elements of the

array in the resulting string. If omitted, the elements are separated by
commas. If separator is an empty string (""), the elements are joined
without any characters between them.

TechGlobal School
 JavaScript Arrays | 21/34

Spread Operator
The spread operator (...) is a feature introduced in ES6 that allows an
iterable, such as an array, to be expanded into individual elements.
When used with arrays, the spread operator can be used for various
operations, including creating shallow copies of arrays, concatenating
arrays, and passing array elements as arguments to functions.

The spread operator can be used to create shallow copies of arrays. This
means that a new array is created, and the elements of the original array
are copied into the new array.

The spread operator can be used to concatenate multiple arrays into a

single array.

TechGlobal School
 JavaScript Arrays | 22/34

Spread Operator
The spread operator can be used to pass individual array elements as
arguments to a function.

The spread operator can be used to add new elements to an array, either
at the beginning or end.

BONUS: Use spread operator find min or max number in an array.

TechGlobal School
 JavaScript Arrays | 23/34

Destructuring
Array destructuring is a feature introduced in ES6 that allows you to
extract values from arrays and assign them to variables in a concise and
readable way.
It provides a convenient syntax for unpacking array elements into
separate variables.
Array destructuring uses square brackets ([]) on the left-hand side of an
assignment to indicate that the values should be extracted from the
array.

You can skip elements in the array by omitting the corresponding variable
name in the destructuring assignment.

TechGlobal School
 JavaScript Arrays | 24/34

Destructuring
The rest syntax (...) can be used to capture remaining elements of an
array into a single variable.

You can provide default values for variables in case the corresponding
array element is undefined.

TechGlobal School
 JavaScript Arrays | 25/34

Iteration with for loop

We can use a traditional for loop to iterate over arrays by specifying the
loop's initialization, condition, and iteration expressions.

TechGlobal School
 JavaScript Arrays | 26/34

Iteration with for…of loop

The for...of loop is a modern syntax that allows you to iterate over the
elements of an array directly without needing an index.

TechGlobal School
 JavaScript Arrays | 27/34

Iteration with forEach() method

The forEach() method is a built-in array method that executes a provided
function once for each array element.

TechGlobal School
 JavaScript Arrays | 28/34

map() method
The map() method creates a new array by applying a function to each
element of the original array.

It doesn't change the original array.

It returns a new array with the same length as the original array, where
each element is the result of applying the provided function to the
corresponding element of the original array.

Syntax: array.map(callback)

callback: A function to be called for each element in the array.

TechGlobal School
 JavaScript Arrays | 29/34

filter() method
The filter() method creates a new array with all elements that pass the
test implemented by the provided function.

It returns a new array containing only the elements of the original array
that satisfy the condition specified in the callback function.

It returns a new array with the same length as the original array, where
each element is the result of applying the provided function to the
corresponding element of the original array.

Syntax: array.filter(callback)

callback: A function to test each element of the array.

TechGlobal School
 JavaScript Arrays | 30/34

reduce() method
The reduce() method applies a function against an accumulator and each
element in the array to reduce it to a single value
It returns a single value that is the result of applying the provided
function to each element in the array.
It doesn't change the original array.
Syntax: array.reduce(callback, initialValue)
callback: A function to execute on each element in the array, taking four
arguments:
accumulator: The accumulator accumulates the callback's return values.
It is the accumulated value previously returned in the last invocation of
the callback or the initialValue, if supplied.
currentValue: The current element being processed in the array.
index (optional): The index of the current element being processed in
the array.
array (optional): The array reduce() was called upon.
The function should return the updated value of the accumulator.
initialValue (optional): A value to use as the first argument to the first
call of the callback. If not provided, the first element of the array will be
used as the initial value of the accumulator.

TechGlobal School
 JavaScript Arrays | 31/34

some() method
The some() method tests whether at least one element in the array
passes the test implemented by the provided function.

It returns true if at least one element in the array satisfies the testing
function; otherwise, it returns false.

It doesn't change the original array.

Syntax:array.some(callback)

callback: A function to test each element of the array.

TechGlobal School
 JavaScript Arrays | 32/34

every() method
The every() method tests whether all elements in the array pass the test
implemented by the provided function.

It returns true if all elements in the array satisfy the testing function;
otherwise, it returns false.

It doesn't change the original array.

Syntax: array.every(callback)

callback: A function to test each element of the array.

TechGlobal School
 JavaScript Arrays | 33/34

find() method
The find() method returns the value of the first element in the array that
satisfies the provided testing function.

It searches the array from left to right, and once an element passes the
test, it stops searching and returns that element's value.

It doesn't change the original array.

It returns the value of the first element in the array that satisfies the
testing function. If no such element is found, it returns undefined.

Syntax:array.find(callback)

callback: A function to test each element of the array.

TechGlobal School
 JavaScript Arrays | 34/34

findIndex() method
The findIndex() method returns the index of the first element in the
array that satisfies the provided testing function.

It searches the array from left to right, and once an element passes the
test, it stops searching and returns the index of that element.

It doesn't change the original array.

It returns the index of the first element in the array that satisfies the
testing function. If no such element is found, it returns -1.

Syntax:array.findIndex(callback)

callback: A function to test each element of the array.

TechGlobal School
 Follow Us !
techglobal.school

techglobalschool

techglobalschool

techglobalschl

techglobalschool

www.techglobalschool.com