JAVASCRIPT

배열 데이터를 불러오는 forEach(), for...of, for...in, map()

이미사용 2023. 3. 5. 17:57
명언
-
728x90
반응형

 forEach( ) 

배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다.

{
	const num = [100, 200, 300, 400, 500];
    
	num.forEach(function(el){           //el=element 배열의 값을 순서대로 반복 합니다.
    	document.write(el,"<br>");
	});
}
//결과
  100
  200
  300
  400
  500

※화살표 함수로 표현하기

{
	const num = [100, 200, 300, 400, 500];
    
	//forEach :화살표 함수
        num.forEach((el)=>{
		document.write(el,"<br>");
	});
            

	//forEach :화살표 함수 : 괄호 생략
	num.forEach(el=>{
		document.write(el,"<br>"); 
	});


	//forEach :화살표 함수 : 괄호 생략 : 중괄호 생략
	num.forEach(el=> document.write(el,"<br>"));
}
//결과
  100
  200
  300
  400
  500

※ 값, 인덱스, 배열 을 불러올수있다.

{
    const num = [100, 200, 300, 400, 500];
    
    num.forEach(function(element, index, array){
    document.write(element,"<br>");   //element: 배열의 값을 순서대로 반복합니다.
    document.write(index,"<br>");     //index: 배열의 순서를 반복합니다.
    document.write(array,"<br>");	  //array: 배열전체를 반복합니다.
    });
}
//결과
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500

 for...of 

배열의 값을 순서대로 반복합니다. (배열에서만 사용해야 합니다.)

{
	const arr = [100, 200, 300, 400, 500];
            
	for(let i of arr){        
	document.write(i); 
	}
}
//결과
  100200300400500

 for...in 

객체의 값을 순서대로 반복합니다.(객체에서 사용해야하지만 배열도 객체이므로 사용가능 합니다.)

{
    const arr = [100, 200, 300, 400, 500];  
    for(let i in arr){           
        document.write(arr[i]);
    }
}
//결과
  100200300400500

 map( ) 

배열을 이용해 새로운 배열 불러올 수 있습니다.

{
    const num = [100, 200, 300, 400, 500];
            
	num.map(function(el, i, a){
        console.log(el);     //  el=element: 배열의 값을 순서대로 반복합니다.
        console.log(i);      //  i=index: 배열의 순서를 반복합니다.
        console.log(a);      //  a=array: 배열전체를 반복합니다.
    });
}
//결과
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500