[jQuery] 제이쿼리 $.each() 함수에서 break문 continue문 사용하는 방법

이전글

[jQuery] 제이쿼리 $.each() 함수 100% 활용하기!

jQuery $.each() 함수에서 break문 continue문 사용하는 방법

초보 개발자가 제이쿼리의 $.each() 함수를 사용하면서 가장 간과하는 부분이 $.each()가 함수가 아닌 반복문이라고 생각하는 부분입니다. 이글을 보고 계신다면 break와 continue문이 가장 가까이 있는 반복문을 중지하거나 현재 반복회차를 건너 뛰는 키워드라는것을 알고 계실겁니다.

그러나 $.each() 함수는 반복문이 아닌 단순히 배열이나 객체를 순회하면서 그때마다 callback을 실행시켜주는 함수일뿐 반복문이 아니기 때문에 break와 continue문이 먹히지 않습니다.

다음 코드를 보도록 하죠. 보기 편하도록 배열과 callback 함수를 앞에서 선언해두고 $.each()함수를 호출할때 인자로 넘겨주었습니다. 그런데 여기서 break문을 사용해 봤자 현재 for문이나 while문같은 반복문이 없기 때문에 의미가 없습니다.

var arr = [ 1, 10, 7, 9, 5 ];
var callback = function(index, value) {
      console.log(index + " : " + value);
      break;
};
 
//callback은 단순히 함수이므로 break를 사용해봤자 의미가 없다.
$.each(arr, callback);

코드를 실행하게 되면 아래와 같이 break문을 잘못 사용했다는 문법 에러가 발생하게 됩니다.

Uncaught SyntaxError: Illegal break statement
    at Function.each (jquery-3.3.1.min.js:2)
    at test.html:14

break문 continue문 사용하려면?

반복문에는 멈추거나 다음 코드를 실행하지 않고 skip할 수 있는 제어문이 필요합니다. $.each함수는 return 키워드를 통해 이러한 부분을 제어합니다.

만약 break를 사용하고 싶다면 callback에서 false를 리턴하면 되고, 그밖에것을 리턴하는 경우에는 continue와 같이 동작하게 됩니다.

var arr = [ 1, 10, 7, 9, 5 ];
var callback = function(index, value) {
      console.log(index + " : " + value);
      
      if(index == 2){
        return false; //break와 동일한 기능
      }
};
 
$.each(arr, callback);

실행 결과입니다.

만약 coninue를 사용하고 싶다면 false이외에 다른값이나 단순히 retrun만 수행하면 됩니다.

var arr = [ 1, 10, 7, 9, 5 ];
var callback = function(index, value) {
      if(index < 2){
        return; //continue와 동일한 기능
      }
      
      console.log(index + " : " + value);
};
 
$.each(arr, callback);

실행 결과입니다.

$.each() 함수에서 특정 값을 리턴하고 싶은 경우

$.each() 함수의 callback함수는 break나 continue로 동작하기 때문에 특정 값을 리턴하고 싶은 경우에는 상위 스코프에 특정 변수를 선언해두고 값을 할당하는 방법밖에 없습니다.

예를 들어 사람 배열에서 이름이 "lee"인 사람을 얻고 싶은 경우에는 아래와 같이 응용이 가능합니다. 반복을 돌다가 조건에 맞는 사용자를 순회할때 상위 스코프의 target변수에 객체를 할당하고 return false를 통해 반복을 종료합니다.

var target = null;
 
var arr = [
    {
          name : "kim",
          age : 10
    },{
          name : "lee",
          age : 13
    },{
          name : "park",
          age : 5
    }
];
 
$.each(arr, function(index, obj) {
      if(obj.name == "lee"){
            target = obj;
            return false;
      }
});
 
console.log("lee 씨의 나이는 " + target.age + "세 입니다.");