Nearby lessons

34 of 40

๐Ÿ”น JavaScript Array Methods

๐Ÿ“Œ What are Array Methods?

JavaScript provides powerful built-in methods to manipulate arrays efficiently.

These methods help with adding, removing, transforming, searching, and iterating through array elements.

๐Ÿ”ธ Mutator Methods (Modify Original Array)

AttributeDescription
push()๐Ÿ‘‰ Adds one or more elements to the end
pop()๐Ÿ‘‰ Removes the last element
shift()๐Ÿ‘‰ Removes the first element
unshift()๐Ÿ‘‰ Adds one or more elements to the beginning
splice()๐Ÿ‘‰ Adds/Removes elements at specific index
reverse()๐Ÿ‘‰ Reverses the order of elements
sort()๐Ÿ‘‰ Sorts the array alphabetically/numerically
fill()๐Ÿ‘‰ Fills array with static value

๐Ÿ”ธ push() : Adds one or more elements to the end

๐Ÿ‘‰ The push() method adds new items to the end of an array.

๐Ÿ‘‰ The push() method changes the length of the array.

๐Ÿ‘‰ The push() method returns the new length.

Syntax: array.push(item1, item2, ..., itemX)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ pop() : Removes the last element

๐Ÿ‘‰ The pop() method removes (pops) the last element of an array.

๐Ÿ‘‰ The pop() method changes the original array.

๐Ÿ‘‰ The pop() method returns the removed element.

Syntax: array.pop()

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ shift() : Removes the first element

๐Ÿ‘‰ The shift() method removes the first element from an array.

๐Ÿ‘‰ It changes the original array and returns the removed element.

Syntax: array.shift()

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ unshift() : Adds one or more elements to the beginning

๐Ÿ‘‰ The unshift() method adds one or more elements to the beginning of an array.

๐Ÿ‘‰ It returns the new length of the array.

Syntax: array.unshift(item1, item2, ..., itemX)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ splice() : Adds/Removes elements at specific index

๐Ÿ‘‰ The splice() method can be used to add or remove elements at a specified index.

๐Ÿ‘‰ It modifies the original array and returns the removed items.

Syntax: array.splice(start, deleteCount, item1, ..., itemX)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ reverse() : Reverses the order of elements

๐Ÿ‘‰ The reverse() method reverses the order of the elements in an array.

๐Ÿ‘‰ It modifies the original array.

Syntax: array.reverse()

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ sort() : Sorts the array alphabetically/numerically

๐Ÿ‘‰ The sort() method sorts the elements of an array.

๐Ÿ‘‰ By default, it sorts alphabetically. For numbers, a compare function is needed.

Syntax: array.sort() or array.sort(compareFunction)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ fill() : Fills array with static value

๐Ÿ‘‰ The fill() method fills elements in an array with a static value.

๐Ÿ‘‰ It changes the original array.

Syntax: array.fill(value, start, end)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ Non-Mutator Methods (Do Not Modify Original Array)

AttributeDescription
concat()๐Ÿ”— Merges arrays
join()๐Ÿงฉ Joins elements as a string
slice()โœ‚๏ธ Extracts a section into a new array
includes()๐Ÿ” Checks if value exists
indexOf()๐Ÿ“ Finds first index of element
lastIndexOf()๐Ÿ“ Finds last index of element
toString()๐Ÿ”ค Converts array to string

๐Ÿ”ธ concat() : Merges arrays

๐Ÿ‘‰ The concat() method is used to merge two or more arrays.

๐Ÿ‘‰ It returns a new array without changing the existing arrays.

Syntax: array1.concat(array2, array3, ..., arrayX)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ join() : Joins elements as a string

๐Ÿ‘‰ The join() method joins all array elements into a single string.

๐Ÿ‘‰ You can specify a separator (like comma, space, dash, etc).

Syntax: array.join(separator)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ slice() : Extracts a section into a new array

๐Ÿ‘‰ The slice() method returns a shallow copy of a portion of an array.

๐Ÿ‘‰ It does not modify the original array.

Syntax: array.slice(start, end)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ includes() : Checks if value exists

๐Ÿ‘‰ The includes() method checks if an array contains a certain value.

๐Ÿ‘‰ It returns true or false.

Syntax: array.includes(element, start)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ indexOf() : Finds first index of element

๐Ÿ‘‰ The indexOf() method returns the first index of the element in the array.

๐Ÿ‘‰ Returns -1 if not found.

Syntax: array.indexOf(element, start)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ lastIndexOf() : Finds last index of element

๐Ÿ‘‰ The lastIndexOf() method returns the last index of the element in the array.

๐Ÿ‘‰ Returns -1 if not found.

Syntax: array.lastIndexOf(element, start)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ toString() : Converts array to string

๐Ÿ‘‰ The toString() method converts an array to a comma-separated string.

๐Ÿ‘‰ It does not modify the original array.

Syntax: array.toString()

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ Iteration Methods (Used for Looping)

AttributeDescription
forEach()๐Ÿ” Executes a function for each element
map()๐Ÿ—บ๏ธ Transforms each element into new array
filter()๐Ÿšฟ Filters elements based on condition
reduce()โž• Reduces array to single value
some()โ˜๏ธ Returns true if any element passes test
every()โœ… Returns true if all elements pass test
find()๐Ÿ”Ž Returns first match
findIndex()๐Ÿ”ข Returns index of first match

๐Ÿ”ธ forEach() : Executes a function for each element

๐Ÿ‘‰ The forEach() method calls a function once for each array element.

๐Ÿ‘‰ It does not return a new array.

Syntax: array.forEach(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ map() : Transforms each element into new array

๐Ÿ‘‰ The map() method creates a new array with the results of calling a function on every element.

Syntax: array.map(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ filter() : Filters elements based on condition

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

Syntax: array.filter(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ reduce() : Reduces array to single value

๐Ÿ‘‰ The reduce() method executes a reducer function on each element and returns a single output value.

Syntax: array.reduce(callback, initialValue)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ some() : Returns true if any element passes test

๐Ÿ‘‰ The some() method tests whether at least one element in the array passes the test function.

Syntax: array.some(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ every() : Returns true if all elements pass test

๐Ÿ‘‰ The every() method checks if all elements in the array pass the test function.

Syntax: array.every(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ find() : Returns first match

๐Ÿ‘‰ The find() method returns the first element that satisfies the provided testing function.

Syntax: array.find(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿ”ธ findIndex() : Returns index of first match

๐Ÿ‘‰ The findIndex() method returns the index of the first element that satisfies the testing function.

Syntax: array.findIndex(callback)

Code Example
PREVIEW READY
Loading Editor...
Live Preview

๐Ÿง  Test Your Knowledge

10 Questions

Progress: 0 / 10
Keep Going!JS - Objects