본문 바로가기
반영훈/웹 개발

[JS] 반복문 for, while, break, continue

by Banda 2020. 8. 11.

For문

가장 기본적인 반복문으로, 조건이 만족 되면 계속 반복하는 문법

Example

for (let i = 0; i < 10; i++) {
	console.log(i);
    }

해석) let i = 0을 선언하고 이를 시작으로 i가 10미만일 때 i+1을 반복하고 콘솔에 i를 출력하라.

for (초기 구문; 조건 구문; 변화 구문;) {코드}

 

배열과 for

const names = ['멍멍이', '야옹이', '멍뭉이'];

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

 

해석) names 라는 상수를 선언하는데 names 는 '멍멍이', '야옹이', '멍뭉이'라는 값을 가진 [배열]이다.

i=0에서 시작, i가 names.length(배열의 길이) 보다 작다면, i+1을 반복하고 콘솔창에 names[i]를 출력한다

요약 하면

기본값: i = 0, 조건: names 배열의 길이가 i보다 작을때, 변화: i = i + 1, 콘솔창에 현재 배열의 i번째를 출력

상단을 조건에 해당하는 동안 반복.

 

While

While은 특정 조건이 참(True)라면 계속 반복하는 문법.

주의 할 점은 조건문이 언젠가 false가 되도록 작성해야 함.

아래는 while을 이용하여 0 부터 9 까지 콘솔에 출력하는 코드

let i = 0;
while (i < 10) {
	console.log(i);
    i++;
}

해석) 변수 i = 0,          조건: i가 10보다 작을때,       반복할 것: 콘솔에 i를 출력하고,i = i +1 해 줄것.

 

for...of문

for...of문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문

예시코드

let numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {
  console.log(number);
}

파이썬의 for 문과 비슷한 느낌이 듦. (for number in numbers:)

반복 함에 따라 numbers 안의 값들을 전부 각각 number에 불러와줌.

 

 

객체를 위한 반복문 for...in

그 전에 객체의 정보를 배열 형태로 받아올 수 있는 함수 몇가지를 알아보자.

const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2
};

console.log(Object.entries(doggy));
console.log(Object.keys(doggy));
console.log(Object.values(doggy));

각 함수의 역할

  • object.entries : [[키, 값], [키, 값]] 형태의 배열로 변환
  • object.keys: [키, 키, 키] 형태의 배열로 전환
  • object.values: [값, 값, 값] 형태의 배열로 변환

객체가 지니고 있는 값에 대하여 반복하고 싶다면 for...in 구문을 사용해도 됨.

const doggy = { name: '멍멍이', sound: '멍멍', age: 2 }; for (let key in doggy) { console.log(`${key}: ${doggy[key]}`); }

여기서 $의 이미는 단순한 문자열이 아닌 변수임을 정의하는 용도로 사용됨.

 

break 와 continue

반복문 안에서는 break  continue 를 통하여 반복문에서 벗어나거나, 그 다음 루프를 돌게끔 할 수 있음.

for (let i = 0; i < 10; i++) {
  if (i === 2) continue; // 다음 루프를 실행
  console.log(i);
  if (i === 5) break; // 반복문을 끝내기
}

해당 코드를 돌리게 되면 0, 1, 3, 4, 5를 콘솔에 출력하고 종료됨.

 

참고 https://learnjs.vlpt.us/

'반영훈 > 웹 개발' 카테고리의 다른 글

[JS]배열 내장함수 indexOf, findIndex, find  (0) 2020.08.11
[JS]배열 내장함수 forEach, map  (0) 2020.08.11
[JS]배열(array)  (0) 2020.08.10
[JS] 화살표 함수  (0) 2020.08.10
[JS]switch/case 문  (0) 2020.08.10

댓글