반복문 [for, while, do while]

DOYOUNG·2023년 5월 16일
0

javascript

목록 보기
7/17
post-thumbnail

반복문 for, while, do while

1) for 루프

// 💡 변수이므로 let이 사용됨
for (let i = 0; i < 5; i++) {
  console.log(i);
}

❗️주의사항❗️- 무한루프

let x = 0;

for (;;) {
  console.log(x);
}

console.log('출력 안됨');

;; 를 true로 인식하고 종료 조건이 없으므로 무한루프에 빠질 수 있음.

for ~ in : 객체의 for 문

for (키 이름 in 객체명) : 객체의 키들을 순서대로 반환함.

const lunch = {
  name: '라면',
  taste: '매운맛',
  kilocalories: 500,
  cold: false
}

for (const key in lunch) { // 💡 변할 것이 아니므로 const 사용
  console.log(key, ':', lunch[key])
}

key의 이름은 자유롭게 사용 가능함.

for ~ of : 배열의 for 문

for (키 이름 of 배열명) : 배열의 항목들을 순서대로 반환.
이터러블 iterable (배열도 그 일종)에 사용됨

const list = [1, '가나다', false, null];

for (const item of list) {
  console.log(item);
}
for (const el of list) {
  console.log(el);
}

문자열도 이터러블이므로 사용 가능

// 문자열 역시 이터러블이므로 사용 가능
for (const letter of '안녕하세요~') {
  console.log(letter);
}

📌 for ~ of 문의 장점

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// ⚠️ 변수(i)를 사용하므로 위험요소 존재
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

위의 코드는 변수 i를 사용하므로 위험요소가 존재한다.

// ⭐️ 변수를 사용하지 않음으로 보다 안전
for (const num of numbers) {
  console.log(num);
}

for ~ of 문을 사용하면 변수를 사용하지 않으므로 보다 안전하다.
위의 두 코드 같은 결과를 출력하지만, 변수를 사용한 코드의 경우 console.log에 i--를 출력한다면 무한루프에 빠질 위험이 있다.
👉 for ~ of 문을 사용해서 배열에 연산자 ++, -- 등을 사용해도 원래 배열의 값이 변하지는 않는다.

continue와 break

continue : 한 루프를 건너뜀

for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) continue; // 3의 배수일 경우에만 건너뜀.
  console.log(i);
}

console.log('for 루프 종료');

break : 블록을 종료하고 빠져나옴

for (let i = 1; i <= 10; i++) {
  if (i === 5) break; // i가 5인 경우 루프를 종료하고 나감.
  console.log(i);
}

console.log('for 루프 종료');

2) while, do while

while 문

while : 조건이 참인 동안 반복 수행함.

let x = 0;

while (x < 10) {
  console.log(x++);
}

❗️주의사항❗️- 무한루프

let x = 0;

while (x < 10) {
  console.log(x);
}
// 인위적인 무한반복에 널리 쓰이는 코드
while (true) {
  console.log('무한반복');
}

👉 break 문으로 무한반복 탈출 가능

let x = 0;

while (true) {
  if (x++ >= 5) break; // 😎
  console.log(x);
}
// 1 ~ 5 출력

continue와 break를 사용한 가독성 있는 코드 예시

// 가독성 위주로 짠 코드
// 코드에 의도가 드러나도록
let x = 0;
while (x < 14) {
  const toContinue = x % 2 === 0;
  const toBreak = x > 7;
  const xNow = x++;

  if (toContinue) continue;
  if (toBreak) break;

  console.log(xNow);
}
let x = 0;
while (x < 14) {
  const xNow = x++;

  if (xNow % 2 === 0) continue;
  if (xNow > 7) break;

  console.log(xNow);
}

do while 문

do while : 일단 수행한 다음 조건을 평가함

let x = 12;

do {
  console.log(x++);
} while (x < 10);
profile
프론트엔드 개발자 첫걸음

0개의 댓글