소개

학교에서 선생님이 JavaScript를 가르치기 시작했을 때 그는 문자열을 뒤집고 그것이 회문인지 확인하는 것과 같은 문자열 변환부터 시작했습니다. 하나의 기능에서 한 가지 방법을 사용하고 다른 기능에서 다른 방법을 사용했지만 몇 달 전에 코딩을 시작한 사람과 구별하기 어려웠습니다.
1년 후 팀원의 코드 리뷰를 읽다가 한 가지 질문이 떠올랐습니다. "'if-else'와 'switch'의 차이점은 무엇인가요?"다른 것들도 비슷하고 헷갈리는 게 뭔지 궁금해서 생각했다. JavaScript를 배우기 시작했던 때가 생각났습니다. 이제 더 많은 경험을 쌓았기 때문에 JS에서 유사한 방법의 미해결 미스터리를 풀기에 좋은 시기입니다.

"에 대한"와 "에 대한"

차이점

의
배열에서 요소를 하나씩 검색하는 데 사용됩니다.

에 대한
객체에서 키를 하나씩 검색하는 데 사용됩니다.

예

의

const nameArray = [“Alex”, “Ben”, “Charlie”]

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

// Alex
// Ben
// Charlie

에 대한

const userObject = {
  name: “Ellen”,
  age: ”24”,
  occupation: ”a musician”
}

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

// name
// age
// occupation

"하위 문자열", "슬라이스" 및 "하위 문자열"

차이점

예

(첫 번째 인수, 두 번째 인수)

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

// CD
// CD
// CDEF

인수가 음수인 경우

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)

첫 번째 인수 > 두 번째 인수

const text = “ABCDEFGHIJ"
console.log(text.substring(4, 1))
console.log(text.slice(4, 1))

// BCD
// (empty)

접착

substring , slice 및 substr가 원래 배열에서 항목을 제거한 새 배열을 만드는 동안 splice는 배열에서 항목을 제거, 교체 및 추가할 수 있습니다. 새 배열을 생성하지 않습니다.

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

예

항목 제거

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

// [“D”, “E”]

항목 바꾸기

const array = ["A", "B", "C", "D", "E"]
array.splice(0, 3, "AA", "BB", "CC")
console.log(array)

// ["AA","BB","CC","D","E"]

항목 추가

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" 및 "find"

차이점

map - 배열의 모든 항목을 반복하고 모두 반환합니다

.

reduce - 배열의 모든 항목을 반복하고 하나의 항목을 반환합니다

.

some - 조건과 일치하는 항목이 하나라도 있으면 true를 반환합니다

.

every - 모든 항목이 조건

과 일치하는 경우 true를 반환합니다.

찾기 - 조건과 일치하는 첫 번째 항목 반환

필터 - 조건과 일치하는 모든 항목 반환

forEach - 배열의 모든 항목을 반복하고 각 항목을 처리하지만 아무 것도 반환하지 않습니다("정의되지 않음"이 됨)

.

예

지도
모든 항목에 2를 곱하고 배열을 반환합니다.

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


// [2, 4, 6, 8, 10]

감소
모든 항목을 추가하고 합계를 반환

const reduceResult = 
  [1, 2, 3, 4, 5].reduce((previousValue, currentValue)  => {
    return previousValue + currentValue
  })
console.log(reduceResult)

// 15

약간
모든 항목을 확인하고 하나 이상의 항목이 5보다 크거나 같으면 true를 반환합니다.

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


// true

모든 항목을 확인하고 하나 이상의 항목이 10보다 크거나 같으면 true를 반환합니다.

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

// false

마다
모든 항목을 확인하고 모든 항목이 1보다 크거나 같으면 true를 반환합니다.

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

// true

모든 항목을 확인하고 모든 항목이 5보다 크거나 같으면 true를 반환합니다.

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

// false

찾기
배열을 반복하고 3보다 크거나 같은 첫 번째 항목을 반환합니다.

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

// 3

필터
각 항목이 3보다 큰지 확인하고 배열로 반환합니다.

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

// [3, 4, 5]

각
배열의 모든 항목을 반복하고 각 항목을 두 배로 늘리고 콘솔에 기록합니다.

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

// 2
// 4
// 6
// 8
// 10

그것은 아무것도 반환하지 않습니다

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

// undefined

결론

효율적인 코드를 작성하는 데 도움이 되는 많은 방법이 있으며 이를 이해하는 것이 중요합니다. 일부 방법이 유사하지만 어떻게 다른지 더 명확하게 알 수 있기를 바랍니다.