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
- for in
const userObject = {
name: “Ellen”,
age: ”24”,
occupation: ”a musician”
}
for(let key in userObject) {
console.log(key)
}
// name
// age
// occupation
"substring", "slice" and "substr"
DIfference
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
- 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)
- First argument > Second argument
const text = “ABCDEFGHIJ"
console.log(text.substring(4, 1))
console.log(text.slice(4, 1))
// BCD
// (empty)
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, ….)
Examples
- Remove items
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3)
console.log(array)
// [“D”, “E”]
- Replace items
const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3, "AA", "BB", "CC")
console.log(array)
// ["AA","BB","CC","D","E"]
- Add items
const array = ["A", "B", "C", "D", "E"]
array.splice(5, 0, "F")
console.log(array)
// ["A","B","C","D","E","F"]
"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]
- 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
- 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
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
- 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
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
- 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
- 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]
- 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
it does not return anything
const forEachResult =
[1, 2, 3, 4, 5].forEach((value) => {
return(value * 2)
})
console.log(forEachResult)
// undefined
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)