js for vs forEach vs each 사용법

김종민·2023년 8월 21일
0

js

목록 보기
16/25
post-thumbnail

for와 forEach의 사용법이 확실한 구분을 짓기위하여
간단하게 정리하여 구분짓기 쉽도록 하기 위함의 정리글!!


1. 기본 for 문

  • 빠르고 단순하며, 효율적이다.
  • 건너뛰기, 종료 가 가능하다 ( continue, breake 사용이 가능 )
  • 반복문의 범위를 지정할수 있다 ( i ++ 또는 i-- 등등)
  • var i 값을 이용한 처리가 가능하다.

예제코드 📃

var arr = ['haha1','haha2','haha3']; 


for(var i=0; i < arr.length; i ++ )
{
  document.writeln(arr[i]);

}


2. forEach

  • No-Library에서 동작함.
  • 바닐라 자바스크립트에서 사용가능.

예제코드 📃

var arr = ['haha1','haha2','haha3']; 


arr.forEach(function (value, index){

  document.writeln('[index] - ' + index);
  document.writeln(', [value] - ' + value);
  document.writeln('<br/>');

결과✨

[index] - 0, [value] - haha1
[index] - 1, [value] - haha2
[index] - 2, [value] - haha3



3. each ✅

  • jquery 사용해야 합니다.
  • $를 보면 알겠지만, jquery 를 함께 사용해야 사용할수 있다.
  • 가독성이 좋고, 객체형을 다루기 쉽다.
  • Array 객체에서 사용이 가능하며, 리턴을 받을수는 없다,

예제코드 📃

var arr = ['haha1','haha2','haha3']; 

$.each(arr, function (index, value){

  document.writeln('[index] - ' + index);
  document.writeln(', [value] - ' + value);
  document.writeln('</br>');
});

결과✨

[index] - 0, [value] - haha1
[index] - 1, [value] - haha2
[index] - 2, [value] - haha3

profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보