home강의 홈으로
Section 3. 제어문
Lesson 4. for 루프

I. for문 사용법

👉 MDN 문서 보기


괄호 안의 3개의 식에 따른 반복수행

  • 변수의 선언 및 할당
  • 종료조건. 부재 시 항상 참
  • 참일 시 블록 안의 코드 이후 실행문
// 💡 변수이므로 let이 사용됨 for (let i = 0; i < 5; i++) { console.log(i); } for (let i = 0; i < 5;) { console.log(i++); // ++i로 바꿔볼 것 } for (let i = 10; i >= 0; i-= 2) { console.log(i); }

💡 중첩 사용

for (let i = 1; i <= 9; i++) { for (let j = 1; j <= 9; j++) { console.log(`${i} * ${j} = ${i * j}`); } }
  • 두 스택의 스코프가 쌓이는 것


둘 이상의 변수 사용

for (let x = 0, y = 10; x <= y; x++, y--) { console.log(x, y); } for ( let x = true, y = 0, z = 0; y * z < 10; x = !x, x ? y++ : z++ ) { console.log(y, z); }

⭐ 무한루프 실행시 브라우저가 멈출 수 있음

let x = 0; for (;;) { console.log(x); } console.log('출력 안됨'); for (let i = 0; i < 10; i++) { console.log(i--); } console.log('출력 안됨');

💡 객체와 배열의 for

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

👉 MDN 문서 보기

const lunch = { name: '라면', taste: '매운맛', kilocalories: 500, cold: false } for (const key in lunch) { // 💡 변할 것이 아니므로 const 사용 console.log(key, ':', lunch[key]) } // 키의 이름은 자유롭게 사용 가능 for (const k in lunch) { console.log(k, ':', lunch[k]) }

배열: for (항목 of 배열명) - 배열의 항목들을 순서대로 반환

👉 MDN 문서 보기

  • 정확히는 이터러블 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++) { // 이곳에 i를 변경하는 코드가 들어간다면... console.log(numbers[i]); } // ⭐️ 변수를 사용하지 않음으로 보다 안전 for (const num of numbers) { console.log(num); }

💡 또 다른 예시

const numbers1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const numbers2 = []; for (let num of numbers1) { num++; // ⚠️ 복사된 값. let 사용 주목 numbers2.push(num + 1); } console.log(numbers1, numbers2); for (let i = 0; i < numbers1.length; i++) { numbers1[i]++; // ⚠️ 실제 값에 인덱스로 접근 - 원본 배열의 내용 변경 } console.log(numbers1, numbers2);



II. continuebreak

1. continue - 한 루프를 건너뜀

👉 MDN 문서 보기

for (let i = 1; i <= 10; i++) { if (i % 3 === 0) continue; console.log(i); } console.log('for 루프 종료');

2. break - 블록을 종료하고 빠져나옴

👉 MDN 문서 보기

for (let i = 1; i <= 10; i++) { if (i === 5) break; console.log(i); } console.log('for 루프 종료');

3. label - 중첩된 반복문을 명명하여 continue 또는 break에 사용

👉 MDN 문서 보기

  • 널리 사용되지는 않음
outer: for (let i = 1; i < 10; i++) { inner: for (let j = 1; j < 10; j++) { if (j % 2 === 0) continue inner; if (i * j >= 30) continue outer; if (j > 8) break inner; if (i - j > 7) break outer; console.log(i, j, i * j); } }

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] 제대로 파는 자바스크립트 (무료 파트) 3-4

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?