You are JS noob without knowing these methods

Most important methods of your JavaScript codebase.

In day-to-day development with JavaScript in the form of frontend framework or backend framework, I use some methods to manipulate arrays or objects, these are so frequently used in project development and fun to do.

What I mentioned after are not the only methods for Arrays and Objects, these are just frequent and popular ones.

find()

• To find the single element present in an array.
• It returns the first element that satisfies the condition.
• It takes one callback function as an argument, callback function returns a boolean.
• If the condition is false with every element it returns undefind.
• UseCase: Find a student whose rank is 5, in this case, it will return one object.

students.find((student) => {
    return student.rank == 5;
  })

// { id: 5, name: 'nitish', rank: 5 }

filter()

• To find the array of elements present in the array.
• It returns one array of elements that satisfy the conditions.
• It takes one callback function as an argument, callback function returns a boolean.
• If the condition is false with every element it returns an empty array [].
• UseCase: Find the top three students.

students.filter((student) => {
    return student.rank <= 3;
  })

/*
[
  { id: 1, name: 'milan', rank: 1 },
  { id: 2, name: 'kiran', rank: 2 },
  { id: 3, name: 'priya', rank: 3 } 
]
*/

map()

• To transfer the array of elements.
• Return the array with the same number of elements present.
• It takes one callback function and returns the expression to transform the array.
• UseCase: Create an array of strings declaring who has what rank.

const result = students.map((student) => `${student.name} has rank: ${student.rank}`);

console.log(students)
console.log(result)

/*
[
  { id: 1, name: 'milan', rank: 1, fee: 1000 },
  { id: 2, name: 'kiran', rank: 2, fee: 2000 },
  { id: 3, name: 'nitish', rank: 3, fee: 3000 },
  { id: 4, name: 'priya', rank: 4, fee: 4000 },
  { id: 5, name: 'pratyush', rank: 4, fee: 5000 }
]
[
  'milan has rank: 1',
  'kiran has rank: 2',
  'nitish has rank: 3',
  'priya has rank: 4',
  'pratyush has rank: 4'
]
*/

reduce()

• It can convert one array to a single element.
• It takes one callback and one initial accumulator value(option) and returns one digested accumulator value.
• If you do not initialize the accumulator value it will consider the first element of the array as the initial accumulator value.
• UseCase: Find the sum of fees of students.

students.reduce((acc, next) => {
    acc += next.fee
    return acc;
  }, 0)

// 15000

every()

• Return true, if the condition is satisfied by all elements present in the array.
• If one of the conditions is not satisfied then it will return false.
• It takes one callback and returns a boolean if the condition is satisfied.
• UseCase: check if all students cleared the fees or not.

students.every((student) => {
    return students.fee == 0
  })

// false

some()

• Return true, if the condition is satisfied by a minimum of one element present in the array.
• It takes one callback and returns a boolean if the condition is satisfied.
• UseCase: check if all students cleared the fees or not.

students.some((students) => {
    return students.fee == 0
  })

// true

findIndex()

• It returns the first index of an element that satisfies the condition.
• It takes one callback and checks to try to satisfy the condition, if the condition is satisfied then it returns the index of that element.
• UseCase: find the index of the student who has ranked one.

students.findIndex((students) => {
    return students.rank == 1
  })

// 0

concat()

• It returns a concatenate/joined array.
• It is an immutable array method.

const a = [10, 20]
const b = [30, 40]

const c = a.concat(b)

// [ 10, 20, 30, 40 ]

• In the case of an array you can't contact arrays with a + operator like string. If you try it will return 10,2030,40.

entries()

• It returns an array that contains a key-value pair in the form of an array([[key, value], [key, value]]).
• key as index 0 and value as index 1 in the inner array.
• UseCase: Make an Object iterable.

const obj = { a: 10, b: 20, c: 30, d: 40 };

console.log(Object.entries(obj));
// [ [ 'a', 10 ], [ 'b', 20 ], [ 'c', 30 ], [ 'd', 40 ] ]

keys()

• It returns an array of keys present in an object.
• UseCase: at the time of converting object keys to React elements.

Object.keys(obj)
// [ 'a', 'b', 'c', 'd' ]

values()

• It returns an array of values present in an object.
• UseCase: at the time of converting an object values to React elements.

Object.values(obj)
// [ 10, 20, 30, 40 ]

assign()

• It returns one concerted object.
• UseCase: at the time of the shallow copy.

const source = { a: 10, b: 20 }
const target1 = { b: 30, c: 40 }
const target2 = { c: 50, d: 60}

console.log(Object.assign(source, target1, target2));
// { a: 10, b: 30, c: 50, d: 60 }

JSON.parse() & JSON.stingify()

• It converts JSON string to Object or Object to JSON String
• UseCase: Converting API response to usable data.

Correct me if I am wrong!!!

Linkedin | Twitter | GitHub