Comparing similar JavaScript methods and how to use them
Published: 2022-06-16 02:40:29


#Introduction
When my teacher at school started teaching us JavaScript, he began with string conversions such as reversing a string and checking if it is a palindrome. He used one method in one function and used another in other functions, but I found it difficult to differentiate them as a person who started coding a few months ago.
One year later, I was reading a teammate's code review when one question struck me, which was “what is the difference between ‘if-else’ and ‘switch’?” I became curious and thought about what other things are similar and confusing. I remembered the time when I started learning JavaScript. As I have more experience now, It is a good time to solve unsolved mysteries of similar methods in JS.

<p> </p>

##"for of" and "for in"
###Difference
* for of
It is used to retrieve elements one by one in an **array**.
* for in<br>
It is used to retrieve **keys** one by one in an **object**.


###Examples
* for of
```javascript
const nameArray = [“Alex”, “Ben”, “Charlie”]

for(let name of array) {
  console.log(name)
}

// Alex
// Ben
// Charlie
```
* for in
```javascript
const userObject = {
  name: “Ellen”,
  age: ”24”,
  occupation: ”a musician”
}

for(let key in userObject) {
  console.log(key)
}

// name
// age
// occupation
```

<p> </p>


##"substring", "slice" and "substr"
###DIfference
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou0dab84w3ign2sq5u37.png)
###Examples
* (First argument, Second argument)
```javascript
const text = "ABCDEFGHIJ"
console.log(text.substring(2, 4))
console.log(text.slice(2, 4))
console.log(text.substr(2, 4))

// CD
// CD
// CDEF
```
* When the argument is negative
```javascript
const text = "ABCDEFGHIJ"
console.log(text.substring(-2, 3))
console.log(text.slice(-4, -1))
console.log(text.substr(-4, 3))
console.log(text.substr(-4, -3))

// ABC
// GHI
// GHI
// (empty)
```
* First argument > Second argument
```javascript
const text = “ABCDEFGHIJ"
console.log(text.substring(4, 1))
console.log(text.slice(4, 1))

// BCD
// (empty)
```

<p> </p>


### *splice*
While `substring`, `slice` and `substr` create a new array with items taken out from the original array, splice can remove, replace and add items in the array. It doesn’t create a new array.
```javascript
splice(first index to change, number of items to delete, item to add/replace-1, item to add/replace-2, ….)
```
#### Examples
* Remove items
```javascript
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3)
console.log(array)

// [“D”, “E”]
```
* Replace items
```javascript
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3, "AA", "BB", "CC")
console.log(array)

// ["AA","BB","CC","D","E"]
```
* Add items
```javascript
const array = ["A", "B", "C", "D", "E"]
array.splice(5, 0, "F")
console.log(array)

// ["A","B","C","D","E","F"]
```

<p> </p>

##"map", "filter", "reduce", "some", "every", "foreach" and "find"
###DIfference
- map - iterate over all items in an array and return all
- reduce - iterate over all items in an array and return one item
- some - return true if there is at least one which matches the condition
- every - return true if all items match the condition
- find - return the first item which matches the condition
- filter - return all items which matches the condition
- forEach - iterate over all items in an array and process each item, *but returns nothing* (it becomes “undefined”)

###Examples
- map
  multiplies every item by 2 and return an array
```javascript
const mapResult = 
  [1, 2, 3, 4, 5].map((value) => {
    return value * 2
  })
console.log(mapResult)


// [2, 4, 6, 8, 10]
```
- reduce
  add all items and return the sum
```javascript
const reduceResult = 
  [1, 2, 3, 4, 5].reduce((previousValue, currentValue)  => {
    return previousValue + currentValue
  })
console.log(reduceResult)

// 15
```
- some
  checks all items and returns true if at least one item equals or is more than 5.
```javascript
const someResult = 
  [1, 2, 3, 4, 5].some((value) => {
    return value >= 5
  })
console.log(someResult)


// true
```
  checks all items and returns true if at least one item equals or is more than 10.
```javascript
const someResult = 
  [1, 2, 3, 4, 5].some((value) => {
    return value >= 10
  })
console.log(someResult)

// false
```
- every
  checks all items and returns true if all items equal or are more than 1.
```javascript
const everyResult = 
  [1, 2, 3, 4, 5].every((value) => {
    return value >= 1
  })
console.log(everyResult)

// true
```
  checks all items and returns true if all items equal or are more than 5.
```javascript
const everyResult = 
  [1, 2, 3, 4, 5].every((value) => {
    return value >= 5
  })
console.log(everyResult)

// false
```
- find
  iterates over an array and returns the first item which equals or is more than 3.
```javascript
const findResult = 
  [1, 2, 3, 4, 5].find((value) => {
    return value >= 3
  })
console.log(findResult)

// 3
```
- filter
  checks if each item is more than 3 and returns in an array
```javascript
const filterResult = 
  [1, 2, 3, 4, 5].filter((value) => {
    return value >= 3
  })
console.log(filterResult)

// [3, 4, 5]
```
- forEach
  iterates over all items in an array, double each item and logs in the console
```javascript
const forEachResult = 
  [1, 2, 3, 4, 5].forEach((value) => {
    console.log(value * 2)
  })

// 2
// 4
// 6
// 8
// 10
```
  it does not return anything
```javascript
const forEachResult = 
  [1, 2, 3, 4, 5].forEach((value) => {
    return(value * 2)
  })
console.log(forEachResult)

// undefined
```

<p> </p>

# Conclusion
There are a lot of methods that help you write efficient codes, and it is important to understand them. I hope it is more clear for you how some methods are similar but different!