Organizing Javascript array-related methods

a collection of commonly used array-related methods

  • for searching
  • for editing
  • for copying

1. for search

frequently used methods for searching for an element in an array

  1. filter - all elements that satisfy the condition (return type is array)
  2. find - the first element that satisfies the condition (return type is not array)
  3. findIndex - position in the array of the first element that satisfies the condition (-1 if not present)

1.1. filter

returns an array of elements in an array that satisfy a given condition.

employee_list

const emps = [
  {name: 'hong', gender: 'M', age: 28},
  {name: 'jack', gender: 'M', age: 38},
  {name: 'jane', gender: 'F', age: 21}
]

if you want to find only male employees when the list of employees is given as an array like above, you can use the filter method like below

males only
const males = emps.filter((emp) => emp.gender === 'M')
// two [{name:'hong',..}, {name:'jack',..}]
  • return an array containing hong and jack

to use the filter method, you must pass a function to the implementation as an argument when calling it. This function is used inside the filter method as follows

filterInternal
function filter(callback) {
  const found = []
  for(let i = 0; i < this.elems.length; i++) {
    if (callback(this.elems[i], i)) {
      found.push(this.elems[i])
    }
  }
  return found
}
  • callback is the arrow function (emp) => emp.gender === 'M that we passed as an argument to the filter call.
  • each element in filter is called by passing it as the first argument to the callback function.
  • if the callback function returns true, we put them in an array to return to the user later.

the filter method returns an empty array when none of the elements satisfy the condition.

Find all 24-year-olds
const age24Emp = emps.filter((emp) => emp.age === 24)

console.log(age24Emp) // [] output
console.log(age24Emp.length) // print 0

1.2. find

unlike the filter method, the Array.prototype.find method returns an element satisfying the condition as soon as it is found as soon as it finds an element that satisfies the conditions (the return type is also not an array)

usage is the same as the filter method, passing the callback function when calling the find method.

JAVASCRIPT
const who = emps.find((emp) => emp.gender === 'M')

console.log(who.id) // 'hong'
  • returned because the first element (hong) satisfies the condition
  • not an array.

the find method returns null when no element satisfies the condition.

40+ years old
const who = emps.find((emp) => emp.age >= 40)

console.log(who) // null output

2. Edit

methods used to edit an element of an array

  1. splice

where editing means

  • removes a specific element from the array
  • inserting a new element at a specific location

Changing the value of the element itself is not handled.

2.1. Delete (removing an element)

when removing an element from an array, we provide two arguments to the splice method.

if you want to remove 5 from the array arr like below, you would use

JAVASCRIPT
const arr = [20, 30, 50, 70, 110]
arr.splice(2,1);

// result
[20, 30, 70, 110]
  • splice(pos, cnt) - removes cnt from position pos

2.2. Insert (append)

if we want to insert 100 between 5 and 7 in the array arr like below, we can use

JAVASCRIPT
const arr = [2, 3, 5, 7, 11]

arr.splice(2, 0, 100)
  • delete the two elements (2, 3) between index [0, 2) and index [0, 2)