jQuery $.each() 주의사항

이번 글은 jQuery의 함수인 each의 주의사항을 다뤄본다.

each 함수는 기본적으로 for문이라고 봐도 무방하다.

jQuery에서 제공하는 일반적인 iterator function 이다.

 

callback 개념이 부족하다면 발생할 수 있는 경우와, each 함수의 return에 대해 알아볼 것이다.

 

반복문을 쓰는 이유 중 하나의 예로, 배열에 있는 값 중 원하는 값을 찾기 위해 루프를 돌린다고 가정하자.

코드는 아래와 같다.

someArray = new Array();
someArray[0] = 't5';
someArray[1] = 'z12';
someArray[2] = 'b88';
someArray[3] = 's55';
someArray[4] = 'e51';
someArray[5] = 'o322';
someArray[6] = 'i22';
someArray[7] = 'k954';  

let test =  findXX('o322'); // test 변수의 값은?

function findXX(word) {  
    $.each(someArray, (i, v) => {
        if(v == word) {
            return someArray[i];
        }   
    });  
}

코드는 이상할 게 없는 코드로 보인다.

그렇기에, test 변수의 값은 'o322' 이라고 생각할 것이다.

 

하지만, 실행 결과는 'undefined' 값이 출력될 것이다.

왜 이런 상황이 발생하는가?

jQuery의 공식 문서에 보면 아래와 같이 명시되어있다.

 

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

 

해석하면, each 함수는 콜백함수의 return false를 통해 루프를 break 할 수 있다.

리턴 값이 false가 아닌 경우 루프는 continue로 해석하기에, 즉시 다음 반복 루프로 넘어가게 된다.

 

즉, 위와 같은 코드로 한다면, 무조건 모든 루프를 돌게 되버리고, 원하는 값 또한 얻을 수 없다.

사실상 callback 함수에 대한 return 이다.

 

코드는 아래와 같이 수정되어야한다.

 

function findXX(word) {  
    let toReturn; 
    $.each(someArray, (i, v) => {
        if(v == word) {
            toReturn = someArray[i];
            return false; // each() 루프 중단
        }   
    }); 
    return toReturn; // findXX 함수에 대한 return  
}

중단은 return false를 통해 하되, return을 원하는 값은 다른 변수를 통해 넘겨야한다.

 

http://api.jquery.com/jquery.each/

출처: https://mygumi.tistory.com/169 [마이구미의 HelloWorld]