본문 바로가기

JavaScript

반복문

반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다.

 

for

for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다.

for ( let i = 0; i < 10; i++) {
  console.log(i);
}
0
1
2
3
4
5
6
7
8
9

이러한 결과가 출력이 될 겁니다.

for 문을 다음과 같이 사용합니다.

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

for 문을 사용 할 때에 보통 i++을 해서 1씩 증감하는 형태로 사용합니다.

그런데, 1씩 빼는 형태로 가능합니다. 다음 코드를 한번 써보겠습니다.

for (let i = 10; i > 0; i--) {
  console.log(i);
}
10
9
8
7
6
5
4
3
2
1

for문은 이렇게 숫자에 변화를 주어가면서 반복적으로 작업을 실행합니다.

배열과 for

이번에는 우리가 이전에 배운 배열과 for문을 함께 활용해보겠습니다. 다음 코드를 작성해보세요.

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

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

배열을 써서 상수의 값을 지정 해준 다음에 names(배열)안에 있는 값들을 하나하나 나열 할 수 있습니다.

while

while문은 특정 조건이 참이라면  계속해서 반복하는 반복문 입니다. for문은 특정 숫자를 가지고 숫자의 값을 비교하고,

증감해주면서 반복을 한다면, while문은 조건을 확인만 하면서 반복을 합니다. 때문에, 조건문 내부에서 변화를 직접 주어야 합니다.

우리가 가장 처음 작성했던 0부터 9까지 콘솔에 출력을 하는 반복문을 while문으로 구현해보겠습니다.

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

while 문을 사용 할 때에는 조건문이 언젠가 false가 되도록 신경쓰셔야 합니다. 만약에 언젠가 false로 전환이

되지 않는다면 반복문이 끝나지 않고 영원히 반복됩니다.

 

객체를 위한 반복문 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

i가 2일땐 continue를 하여 원래 console.log를 해야 하지만 그 코드를 수행하지 않고 바로 3으로 넘어갑니다.

i가 5일땐 break를하여 반복문을 종료시킵니다.

연습

numbers 라는 배열을 파라미터로 받아서 총합을 구하는 함수를 만들어보자

 

'JavaScript' 카테고리의 다른 글

프로토타입과 클래스  (0) 2020.03.20
배열 내장함수  (0) 2020.03.20
배열  (0) 2020.03.18
객체  (0) 2020.03.18
함수  (0) 2020.03.18