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:티스토리]