DEV Community

MahoMori
MahoMori

Posted on

Comparing similar JavaScript methods and how to use them

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.

"for of" and "for in"

Difference

  • for of It is used to retrieve elements one by one in an array.
  • for in It is used to retrieve keys one by one in an object.

Examples

  • for of
const nameArray = [Alex, Ben, Charlie]

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

// Alex
// Ben
// Charlie
Enter fullscreen mode Exit fullscreen mode
  • for in
const userObject = {
  name: Ellen,
  age: 24,
  occupation: a musician
}

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

// name
// age
// occupation
Enter fullscreen mode Exit fullscreen mode

"substring", "slice" and "substr"

DIfference

Image description

Examples

  • (First argument, Second argument)
const text = "ABCDEFGHIJ"
console.log(text.substring(2, 4))
console.log(text.slice(2, 4))
console.log(text.substr(2, 4))

// CD
// CD
// CDEF
Enter fullscreen mode Exit fullscreen mode
  • When the argument is negative
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)
Enter fullscreen mode Exit fullscreen mode
  • First argument > Second argument
const text = ABCDEFGHIJ"
console.log(text.substring(4, 1))
console.log(text.slice(4, 1))

// BCD
// (empty)
Enter fullscreen mode Exit fullscreen mode

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.

splice(first index to change, number of items to delete, item to add/replace-1, item to add/replace-2, .)
Enter fullscreen mode Exit fullscreen mode

Examples

  • Remove items
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3)
console.log(array)

// [“D”, “E”]
Enter fullscreen mode Exit fullscreen mode
  • Replace items
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3, "AA", "BB", "CC")
console.log(array)

// ["AA","BB","CC","D","E"]
Enter fullscreen mode Exit fullscreen mode
  • Add items
const array = ["A", "B", "C", "D", "E"]
array.splice(5, 0, "F")
console.log(array)

// ["A","B","C","D","E","F"]
Enter fullscreen mode Exit fullscreen mode

"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
const mapResult = 
  [1, 2, 3, 4, 5].map((value) => {
    return value * 2
  })
console.log(mapResult)


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

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


// true
Enter fullscreen mode Exit fullscreen mode

checks all items and returns true if at least one item equals or is more than 10.

const someResult = 
  [1, 2, 3, 4, 5].some((value) => {
    return value >= 10
  })
console.log(someResult)

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

// true
Enter fullscreen mode Exit fullscreen mode

checks all items and returns true if all items equal or are more than 5.

const everyResult = 
  [1, 2, 3, 4, 5].every((value) => {
    return value >= 5
  })
console.log(everyResult)

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

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

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

// 2
// 4
// 6
// 8
// 10
Enter fullscreen mode Exit fullscreen mode

it does not return anything

const forEachResult = 
  [1, 2, 3, 4, 5].forEach((value) => {
    return(value * 2)
  })
console.log(forEachResult)

// undefined
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)