[javascript] Array.forEach 자주하는 실수(some, every 사용하기)

자주하는 실수

오늘 설명할 forEach, some, every는 특정 조건을 만족하는지 배열 내부의 원소를 순회하면서 검사한다.

some은 특정 조건이 만족할 경우 순회가 중단되고

every는 특정 조건을 만족하지 않을 경우 순회가 중단된다.

 

반면에 forEach는 순회가 중단되지 않는다.

즉! break를 지원하지 않는다는것!

---

설명

해시 알고리즘 문제를 풀면서 배열에 forEach문을 이용해 코딩을 했다.

중도에 조건을 만족하면 ealry return 하도록 코드를 짰는데

조건을 만족해도 배열 끝까지 명령문이 계속 수행이 되더라,, 흐음.

 

그래서 찾아보니 array.forEach()는 break를 지원하지 않는데 중도에 return을 시키려니

원하는 결과가 안나왔던 것이다.

 

예를들어 아래와같은 코드를 짰을때

var testArr = [1, 2, 3, 4, 5]

testArr.forEach(el => {
    if(el === 2) { return }
    console.log(el)
})

 

el이 2가 될경우 리턴되어 콘솔로그에 3, 4 ,5 가 찍히지 않을것을 기대하지만 결과는 다음과 같이 출력된다.

 

> 1
> 2
> 3
> 4
> 5


// forEach() 자체의 return은 undefined값을 가진다.

return true나 return false 의 경우에도 결과는 마찬가지이다.

떄문에 continue나 break를 쓰려면

조건이 만족했을 경우 순회를 중단하는 some() 이나 every()을 사용하면 된다.

 

---

some()

some() 은 콜백함수에 의해 하나라도 조건을 만족할 시 순회를 중단하며 true를 반환한다.(그외에는 false 반환!)

즉 return true일때는 break, return false일때는 continue 로 볼 수 있다.

return을 true로 줬을때와 false로 줬을때 각각의 예시는 다음과 같다.

 

1. return true (break)

var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return true }
    console.log(el)
})


// 출력
> 1

 

2. return false (continue)

var testArr = [1, 2, 3, 4, 5]

testArr.some(el => {
    if(el === 2) { return false }
    console.log(el)
})

// 출력
> 1
> 3
> 4
> 5

 

---

every()

 

every는 특정 조건에 만족하지 않는 값이 발견되면 순회를 중단하며 false를 반환한다. (전부 만족시 true를 반환!)

기본 동작은 아래의 예시와 같다.

var testArr = [1, 2, 3, 4, 5]

testArr.every(el => el > 3); // false
testArr.every(el => el >= 1); // true