[Javascript] 반복문 for / forEach / map

데이터 세팅

- 반복문을 사용하여 id를 출력해보기

let products = [
  {
    id: 'apple',
  },
  {
    id: 'banana',
  },
  {
    id: 'orange',
  },
  {
    id: 'avocado',
  },
  {
    id: 'peach',
  },
  {
    id: 'kiwi',
  },
];
 

 

for

초기값에서 조건부에 부합하면 계속 순회합니다.

특징 : break 문을 사용 할 수 있습니다.
    - 특정 조건을 만나면 멈추는것

1) 처음부터 배열의 길이만큼출력하기

for( let i=0; i < products.length; i++) {
  console.log(products[i].id);
}

: apple ~ kiwi까지 출력됨

2) 'orange'를 발견하면 반복문 멈추기

for( let i=0; i < products.length; i++) {
  if (products[i].id === 'orange') {
    break;
  }
  console.log(products[i].id);
}

: apple ~ banana까지 출력됨 ( orange는 출력 안됩니다.)

 

forEach

배열의 각 요소에 대해 callback을 실행합니다.

products.forEach(products => {
  console.log(products.id);
})

: 무조껀 products의 길이만큼 반복문을 돕니다.

= 다른 조건으로 돌릴 수가 없지만, 그만금 작성해야하는 코드가 줄어듭니다.

무조껀 배열의 길이만큼만 돕니다. 

---- Tip

NodeList로 들어올때 forEach를 쓸때는 주의해야할 점이 있습니다.
crossbrowsing을 해줄때 ie에서 검수를 할 경우, NodeList에 적용된 forEach가 작동안하는 것을 확인 할 수 있습니다.

차근차근히 태그를 선택하는 것부터 어떻게 들어오는지 확인을 해봅니다.

Html

 <div>
   <!-- id -->
   <p id='id'></p>
   
   <!-- class -->
   <p className='className'></p>
   <p className='className'></p>
   <p className='className'></p>
   <p className='className'></p>
   <p className='className'></p>
   <p className='className'></p>
</div>

Js

let id1 = document.querySelector('#part1');
var id =document.getElementById('part1');
var classAll = document.getElementsByClassName('class');
var classAll2 = document.querySelectorAll('.class');

console.log(id) //<p id="part1">part1</p>
console.log(id1) //<p id="part1">part1</p>
console.log(classAll) //HTMLCollection(6) [p.class, p.class, p.class, p.class, p.class, p.class]
console.log(classAll2) //NodeList(6) [p.class, p.class, p.class, p.class, p.class, p.class]

 

querySelectorAll 로 선택을 하게되면, NodeList로 들어오는것을 확인할 수 있다.

그럼 getElementsByClassName 쓰면 되지 않느냐? 라고 생각 할 수 있지만, 

querySelector은 class, id 뿐만 아니라 css선택자도 다 선택할 수 있어서 알고 사용 하면 유용하니 다음정보를 알면 유용합니다.

해결방법은 간단합니다.

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

//https://developer.mozilla.org/ko/docs/Web/API/NodeList/forEach

forEach쓰는곳 위에 이 코드 넣어주면 말끔히 해결!

 

map

배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴합니다.

let newProduct = products.map((arr, idx)=> {
  return arr.id
})

console.log(newProduct);

: 기존배열인 products 를 활용하지 않고 arr을 활용해줍니다.

map의 용도를 제대로 살리려면 return 문이 있어야 합니다.

return이 포함되자 배열의 각 요소에 대해 callback을 실행하고 실행결과를 모은 새 배열을 리턴했습니다.

결과 :

(6) ["apple", "banana", "orange", "avocado", "peach", "kiwi"]

변수안에 담아서 return 시켜야 확인할 수 있어욤~

 

	for	forEach	map
반복의 조건을 걸 수 있는가?	O	X	X
break를 사용할 수 있는가?	O	X	X
새로운 배열을 반환하는가?	X	X	O

 

결론, 

단순 배열 : for

배열순회 : forEach

배열 순회 후 새 배열: map

 

참고: m.blog.naver.com/wideeyed/221877912230

[JavaScript] for vs. forEach vs. map

tibang.tistory.com/entry/%EB%B0%98%EB%B3%B5%EB%AC%B8%EC%9D%84-%EB%B9%A0%EC%A0%B8-%EB%82%98%EA%B0%80%EB%8A%94-break-%EB%AC%B8