[웹 개발 기초 자바스크립트] 5. Loops

Shy·2023년 8월 21일

NodeJS(Express&Next.js)

목록 보기

5/39

Loop

자바스크립트에서 loop를 실행하면, 코드 블럭을 여러번 실행할 수 있게 해준다.

구문	사용법
for	코드 블록을 여러 번 반복
for/in	객체의 속성을 따라 반복
while	지정된 조건이 true인 동안 코드 블록을 반복
do/while	do/while 루프는 while루프의 변형이다. 이 루프는 조건이 true인지 검사하기 전에, 코드 블록을 한 번 실행한다. 그리고 나서 조건이 true인 동안 루프를 반복한다.

for

전통적인 for 반복문은 초기화, 조건, 및 반복 후 동작의 세 부분으로 구성된다.

for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4가 출력됩니다.
}

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    console.log('It is 3');
    continue; // loop문을 계속한다.
  }
  
  if (i ===5) {
    console.log('5 Stop the loop');
    break; // loop문을 탈출한다.
  }
  console.log('Number ' + i);
}
/* 
Number 0
Number 1
It is 3
Number 4
5 Stop the loop
*/

for...in

객체의 속성에 대해 반복한다. 주로 객체의 key를 순회할 때 사용된다.

const obj = {
    firstName: 'John',
    lastName: 'Doe'
};

for (let key in obj) {
    console.log(key);  // firstName, lastName
}

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

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

/*
name : Han
province : 경기도
ciry : 성남시
*/

for...of

반복 가능한 객체 (예: 배열, 문자열, Set 등)의 값을 반복한다.

const fruits = ['apple', 'banana', 'cherry'];

for (let fruit of fruits) {
    console.log(fruit);  // apple, banana, cherry
}

while

조건이 참인 동안 반복한다.

let i = 0;
while (i < 5) {
    console.log(i);  // 0, 1, 2, 3, 4
    i++;
}

do...while

루프의 본문을 최소 한 번 실행한 후에 조건을 평가한다. 따라서 조건이 처음부터 거짓이더라도 본문은 한 번은 실행된다.

let i = 0;
do {
    console.log(i);  // 0, 1, 2, 3, 4
    i++;
} while (i < 5);

배열을 Loop로 이용해서 컨트롤 해주기

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

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

// FOREACH
locations.forEach(function (location, index, array) {
  console.log(`${index} : ${location}`);
  console.log(array);
});                  
/*
0: 서울
(4) ['서울', '부산', '경기도', '대구']
1: 부산
(4) ['서울', '부산', '경기도', '대구']
2: 경기도
(4) ['서울', '부산', '경기도', '대구']
3: 대구
(4) ['서울', '부산', '경기도', '대구']
*/

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

for vs foreach

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

각각의 차이점은 다음과 같다.

for loop
- 전통적인 반복문이다.
- 반복 횟수를 명확하게 알 때 또는 명시적인 조건에 따라 반복을 제어할 때 사용된다.
- 배열, 문자열, 숫자 범위 등 여러 유형의 데이터를 반복하는 데 사용할 수 있다.

const arr = [1, 2, 3, 4, 5];

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

forEach (배열 메서드)
- 배열의 각 요소에 대해 지정된 함수를 실행하는 배열 메서드다.
- forEach는 배열에만 적용된다.
- forEach 내부에서 break나 continue를 사용할 수 없다. 만약 반복을 조기 종료하고 싶다면, 일반적인 for 루프나 다른 반복 메서드를 사용해야 한다.

const arr = [1, 2, 3, 4, 5];

arr.forEach(function(item, index) {
    console.log(item);
});

차이점

범용성: for 루프는 여러 유형의 데이터 (배열, 문자열, 숫자 범위 등)를 반복하는 데 사용될 수 있다. 반면, forEach는 배열에만 적용된다.
제어: for 루프는 반복을 명시적으로 제어할 수 있으며, break와 continue를 사용하여 반복을 조절할 수 있습니다. forEach는 그러한 제어가 불가능하다.
함수 기반: forEach는 함수 기반으로 작동하므로 각 반복마다 콜백 함수가 호출된다. 이는 for 루프에 비해 약간의 성능 저하가 발생할 수 있다.
유연성: for 루프는 초기화, 조건, 증가/감소 등을 명시적으로 제어할 수 있어 유연하다. forEach는 배열의 각 요소에 대해 함수를 실행하는 것에 초점을 맞추고 있다.