forEach 제어문 안 먹히는거 나만 몰랐나 자괴감들어

나란 바보탱이 .. forEach에 제어문 안 먹히는거 나만 몰랐나...낄낄... 다른 언어에서 했던 거 같은데 아닌가... 암튼 자바스크립트 공부 좀 하자^^

처음 작성한 코드

removeWake(name) {
    let layerArr = this.olMap.getLayers().getArray();
	  this.olMap.getLayers().forEach(layer)=>{
		 if(layer.get("name") === name){
			 this.olMap.removeLayer(layer);
				return;
			}
		}
	},

map 레이어들 중에 이름이 name인 아이가 있으면 지우고 return하라고 썼는데 자꾸 foreach에서

cannot read properties of undefined 에러가 뜸.
그래서 아래와 같이 인덱스를 뽑아보니까

remove하고 나서도 forEach가 도는 것... 아하..!（⊙ｏ⊙）

removeWake(name) {
    let layerArr = this.olMap.getLayers().getArray();
	  this.olMap.getLayers().forEach(layer, index)=>{
		 console.log(index);
		 if(layer.get("name") === name){
			 this.olMap.removeLayer(layer);
				return;
			}
		}
	},

검색해보니 forEach는 return, break, continue와 같은 제어문이 씨알도 안 먹힌다는 것~~!

그 이유는 forEach 메소드에 콜백함수를 전달했기 때문!
return을 쓰더라도 결국 콜백함수에서 return하는 것이지 루프에는 영향을 미치지 않는 것이라고...

MDN에서의 forEach에 관한 설명에서도 아래와 같이 말하고 있었다!

예외를 발생시키는 경우를 제외하고는 forEach를 중단시킬 방법을 없으며, 그러한 목적이라면 forEach를 사용하는 것은 잘못된 방법이다.

대신 단순한 for loop나 every, some등을 쓰라고 다른 방법이 나타나있다..!

출처

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

변경한 코드

removeWake(name) {
    let layerArr = this.olMap.getLayers().getArray();
    let layerNum = layerArr.length;
    for (let idx = 0; idx < layerNum; idx++) { 
      if (layerArr[idx].get("name") === name) {
        this.olMap.removeLayer(layerArr[idx]);
        return;
      }
    }
	},

✍️ 결론은!

배열 전체를 순회해야 하는 것이 아니라면 forEach를 사용하지 말자!

forEach랑 for를 동일하게 여겼던 나... 자자 이제 차이점을 알고 정확하게 사용해야지!