Rianshin

[javascript] $.each(), some, forEach 알고 사용하자 본문

Develop/Javascript

[javascript] $.each(), some, forEach 알고 사용하자

RianShin 2020. 12. 23. 14:56
728x90
반응형
SMALL

1. $.each()

 

// 사용방법 : 선언된 Array의 갯수만큼 반복 실행
$.each(Array, callback function(index, value){
	//반복되는 내용.
});
var arr = ["item1", "item2", "item3"];

$.each(arr, function (index, value) {
   console.log("[index] : " + index + "   [value] : " + value);
   // return true;     => for문의 continue
   // return false;    => for문의 break
});

실행결과

2. Array.forEach()

// 사용방법
Array.forEach(callback function (value, index, array) {
		//반복내용.
});
var arr = ["item1", "item2", "item3"];

arr.forEach(function (value, index, array) {
  console.log("[index] : " + index);
  console.log("[value] : " + value);
  console.log(array)
});

실행결과

3. Array.some()

// 사용방법
Array.some(callback function (value, index, array) {
	//..반복내용
});

var arr = ["item1", "item2", "item3"];

// 예제
arr.some(function (value, index, array) {
    console.log("[index] : " + index);
		console.log("[value] : " + value);
    console.log(array);
});

실행결과

4. Array.forEach()와 Array.some()

 현재 예제로 작성된 코드를 보면 두 개는 같아 보이나, 큰 차이가 있다.

var arr = ["item1", "item2", "item3"];

var result = arr.forEach(function (value, index, array) {
    console.log("[index] : " + index);
		console.log("[value] : " + value);
    console.log(array);
    if (value === "item2"){
    	return true;
    }
});

console.log('[result] : ' + result)

[Array.forEach() 코드]

var arr = ["item1", "item2", "item3"];

var result = arr.some(function (value, index, array) {
    console.log("[index] : " + index);
		console.log("[value] : " + value);
    console.log(array);
    if (value === "item2"){
    	return true;
    }
});

console.log('[result] : ' + result)

[Array.some() 코드]

 

ArrayforEach() 실행결과
Array.some()

결론부터 말하자면 forEach는 return 값이 true 와 false 모두 continue라는 점이틀리다.

some는 return값이 true일경우 for문의 break와 같은 역활을 하지만 forEach에서는 return 값의 영향을 받지 않는다.

이런이유로,

단순 반복문을 쓸때는 위의 3개중 편한것을 사용하면 될것이며, 반복문 내에서 특정조건에는 특정실행을 할때는,

some을 사용하면 break처럼 사용가능한 점을 인지하면 될것같다.

728x90
반응형
LIST
Comments