You are JS noob without knowing these methods
Tags: javascript, webdev, tutorial
Published: 2023-12-06 16:09:13

## 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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

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

// 0
```

---

### concat()

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

```JavaScript
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.

```JavaScript
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.

```JavaScript
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.

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

---

### assign()

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

```JavaScript
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**](https://www.linkedin.com/in/milan-mohapatra/) | [**Twitter**](https://twitter.com/nextDevMillion) | [**GitHub**](https://github.com/TheGrayGodfather)