모카스터디/JavaScript

Loops

softmoca__ 2024. 2. 29. 21:34
목차

 

for : 코드를 여러번 반복한다.

 for (let i = 0; i < 10; i++) {
     if (i === 3) {
         console.log('It is 3');
         continue;
     }

     if( i === 5) {
         console.log('5 Stop the loop');
         break;
     }

     console.log('Number ' + i);
 }

 

for (statement 1; statement 2; statement 3)

statement 1 : 루프가 시작되기전 실행

statement 2 : 루프 실행을 위한 조건

statement 3 : 루프 실행된 후  실행

 

for /in : 객체의 속성(property)을 따라 반복한다.

 const user = {
     name: 'Han',
     province: '경기도',
     city: '성남시'
 }

 for (let x in user) {
     console.log(`${x}: ${user[x]}`);
 }

 

while : 지정된 조건이 true인 동안 코드 블록을 반복

 let i = 0;

 while (i < 10) {
     console.log('Number ' + i);
     i++;
 }

 

 

 

배열을 Loop로 컨트롤하기

const locations=['서울','부산','경기도','대구']

1) for

for ( let i=0; i< locations.length; i++) {
	console.log(locations[i]);
  /////////
  서울
  부산
  경기도
  대구

 

 

2) foreach

locations.forEach(function (location, index, array) {
	console.log(`${index} : ${location}`);
   	console.log(array);
 });

3) map

locations.map(function (location) {
	console.log(location);
});
//////
서울
부산
경기도
대구

 

 

 

for vs foreach

- For 루프는 원래 사용되었던 접근 방식이지만 forEach는 배열 요소를 반복하는 새로운 접근 방식이다.
- For 루프는 필요한 경우 break 문을 사용하여 for 루프를 중단할 수 있지만 forEach에서는 이와 같은 작업을 수행할 수 없다.
- For 루프는 await와 함께 작동하지만 forEach는 await와 완벽하게 작동하지 않는다.
- For 루프를 사용한 성능은 forEach 루프보다 빠르다.

- 하지만 개발자 입장에서 가독성이 좋은 foreach사용 하는 것이 좋다.