JS array methods Flashcards
What are the three ways we can iterate over an array?
We can use 1.for loop 2.forEach() 3.for-of loop.
for (let i = 0; i < myArray.length; i++) {
// Use myArray[i] to access each array element one by one
}
myArray.forEach(myElement => {
// Use myElement to access each array element one by one
});
for (const myElement of myArray) {
// Use myElement to access each array element one by one
}
What do push() and unshift() do?
push() adds an element at the end of an array. unshift() adds it at the beginning.
arr.push('item1', 'item 2');
//adds strings to the end of array
arr.unshift(1, 2)
//adds the values 1, 2, to the beginning of the array.
What do push() and unshift() methods return? and does it modify an existing array
Both also return, specifically, the new length of the array.both push() and unshift() modify existing arrays.
What are pop() and splice() used for?
both can be used methods to remove elements from an array.
What does pop() do?
pop() removes the last element of an array, and returns that element. This method changes the array.
let arr = [1,2,3,4] let popElement = arr.pop() //4 would be removed from array, and returned to be assigned
What does shift() do?
shift removes an item from the beginning of an array, and returns that element. This method changes the array.
let array = [1,2,3,4] let shiftElement = arr.shift() //1 would be removed and returned to be assigned
Break down the slice() method
slice() returns a shallow copy (does not change the orginal array)
the parameters are (start, end) representing index of items in that array.
note: start is inclusive, end is exclusive(not included)
syntax:
slice() //returns copy of whole array
slice(start, end) //uses indexes provided to slice a specific portion
slice(start) //slice will return an array from start index to array's end.
Break down the splice() method.
Ulitmately, splice can: insert, remove, and replace. Splice modifys arrays.
syntax: splice(start) //starting index splice(start, deleteCount) //number of elements to remove from start splice(start, deleteCount, item1, item 2, itemN) //elements to add to the array, beginning from start.
Break down the slice() method.
slice returns a shallow copy of an array based off arguements
syntax:
slice() //returns a copy of entire array
slice(start) //returns copy of array, using (inclusive) starting index to end
slice(start, end) //returns copy using (inclusive) start, to (exclusive) end.
What does concat() method do?
Concat creates a new array that includes values from other array and additional items.
notes: Any number of arguement - can be either arrays or values.
syntax:
concat(arg1, arg2)
Breakdown forEach()
forEach() allows a function to run for every element of an array
syntax: forEach(function (item, index, array) ){ //..function to run on elements}
Explain indexOf() and lastIndexOf()
indexOf() looks for -item- starting from index -from-
and returns the index where it was found, otherwise returns 0
syntax: indexOf(item, from) lastIndexOf() is the same, but works backwards in an array
What does include() do?
Checks to see if an item exists in an array. returns true / false.
syntax: include(item, from) //starts searching at -from- index
explain find() method
find() returns the first element in the provided array that satisfies the provided testing function.
if no values satisfy -undefined- is returned.
syntax: find( (element)=>{}) //current element being processed in the array
find( (element, index)=>{}) //index of the current element being processed in the array
find( (element, index, array)=>{}) //the array find() was called upon
find(callbackFn) //a function to execute for each element in the array. it should return a truthy value to indicate a matching element has been found
find(callbackFn, thisArg) //a value to use -this- when executing callbackFn (see iterative methods)
How to determine use cases for findIndex(), indexOf(), include(), some(), etc
findIndex() : if you need the INDEX of the found element in array
indexOf() : if you need to find the INDEX of a VALUE (it checks each element for equality instead of test function)
includes() : if you need to check if a value EXISTS in array. (checks with equality instead of function)
some() : if you need to find if any elements satisfy provided testing function.
Breakdown findIndex() / findLastIndex()
similar to find() however instead of returning truthy value, it returns the index of found items (or -1 if not found).
syntax: same sytax as find()
findIndex / findLastIndex( (element)=>{}) //current element being processed in the array
findIndex / findLastIndex( (element, index, array)=>{}) //the array find() was called upon
findIndex / findLastIndex(callbackFn) //a function to execute for each element in the array. it should return a truthy value to indicate a matching element has been found
findIndex / findLastIndex(callbackFn, thisArg) //a value to use -this- when executing callbackFn (see iterative methods)
findIndex / findLastIndex( (element, index)=>{}) //index of the current element being processed in the array
what does filter() do?
similar to find, but filter() returns a shallow copy array of all matching elements. (if no element matches, empty array is returned.)
syntax: filter( (element)=>{}) //current element being processed in the array
filter( (element, index)=>{}) //index of the current element being processed in the array
filter( (element, index, array)=>{}) //the array find() was called upon
filter(callbackFn) //a function to execute for each element in the array. it should return a truthy value to indicate a matching element has been found
filter(callbackFn, thisArg) //a value to use -this- when executing callbackFn (see iterative methods)
what does map() do?
map() calls a function for each element of the array, and returns the array of results.
note: map() is a copy method, only mutates original array if it’s an assignment to it.
syntax: map( (element)=>{}) //current element being processed in the array
map( (element, index)=>{}) //index of the current element being processed in the array
map( (element, index, array)=>{}) //the array find() was called upon
map(callbackFn) //a function to execute for each element in the array. Its return value is added as a single element in the new array
map(callbackFn, thisArg) //a value to use -this- when executing callbackFn (see iterative methods)
what does sort() do?
sort() sorts the elements in place, and returns the reference to the same array.
by default, sort order is ascending string values. Almost always want a function to provide.
note: orginal array is sorted in place, no copy is made.
syntax: sort() //functionless - string sorting order.
sort( (a, b) =>{}) //arrow function - a is first element for comparison, b is second element to compare.
sort(compareFn) //compare function - specifies a function that defines the sort order.
sort(function compareFn( a, b ) {}) //inline compare function
what is the function to provide to sort() in order to numerically sort?
sort( (a, b) => a - b);
What does reverse() do?
reverse the order of elements in array. (no parameters.)
Breakdown split() method.
Split takes a string and uses delimiter character to seperate into substrings
substrings are put into an array, which is returned.
syntax: split() //if arguements are ommitted, string is returned wrapped in an array.
split(seperator) //seperate is a character used to know how to split string
split(seperator, limit)//none-negative int specifying limit on number of substrings to be in array. leftovers not included.
Breakdown join() method.
join() creates and returns a new string by concatenating all elements in an array
seperated by commas, or a specified glue string. If only 1 item, item will be returned without glue string.
syntax: join()//all elements joined without any characters inbetween them. join(glue)//glue is a provided string/character that the elements will be joined inbetween.
When to use forEach(), for, for..of VS map() VS reduce()
forEach(), for, for..of isi used when we need to iterate over an array.
map() is used when we need to iterate and return the data for each element.
reduce() is used when we need to calculate a single value based on an array.
