JavaScript 함수에서 forEach와 return 사용 시 주의사항, 해결방법

JavaScript 함수 에서 forEach와 return 사용 시 주의사항, 해결방법

 

 

코드 내에서 JavaScript의 forEach 함수를 사용하면서 반복을 돌면서 특정 조건에 따라 함수를 종료하고 싶은 상황을 마주했습니다. 하지만 forEach 함수 내부에서 사용한 return은 예상대로 동작하지 않았습니다. 이 글에서는 forEach문이 return을 하지 못하는 이유와 해결방법에 대해 소개해드리겠습니다.

 

 

ForEach 안에서는 return이 안 된다

 

forEach와 return의 동작

forEach 함수는 반복 중간에 return을 사용하더라도 해당 return이 forEach 함수 자체를 종료하는 것이 아니라 내부 반복문만 종료하고 다음으로 넘어갑니다. 이는 함수 자체의 반환값에는 영향을 주지 않습니다.

 

 

function exampleForEach(arr) {
  arr.forEach((item) => {
    if (item === 2) {
      console.log("Found 2");
      return; // 이 부분은 forEach 자체를 종료하지 않음
    }
    console.log(item);
  });
}

 

 

해결방법

for...of 루프 사용 문제를 해결하기 위해 for...of 루프를 사용할 수 있습니다. 이를 통해 반복 도중에 return을 사용하여 함수를 종료시킬 수 있습니다.

 

function exampleForOf(arr) {
  for (const item of arr) {
    if (item === 2) {
      console.log("Found 2");
      return; // 이 부분에서 함수가 종료됨
    }
    console.log(item);
  }
}

 

 

두 방식 비교

두 예시 코드를 비교해보면, forEach는 내부 반복문만 종료하고 다음 요소로 넘어가지만, for...of 루프는 해당 지점에서 함수 전체를 종료시킬 수 있습니다. 따라서 함수 전체를 종료하고자 할 때는 for...of를 사용하는 것이 더 적합합니다.

 

▼ 많이 찾아보는 javascript  글 ▼

 

JavaScript 명시적 this 바인딩, apply 메소드 쉽게 배우기 - 예시 코드 제공

 

JavaScript 배열 메소드 find() 쉽게 배우기 - 예시 코드 제공