여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - 기초 - 반복문
Javascript – 기초 – 반복문
7개월전 작성
7개월전 수정

반복문

루프를 만들어서 작업을 반복할 수 있다.

반복문에는 for, while, do … while을 사용할 수 있다.

for

Javascript
for (초기값; 반복 조건; 증감식 ) { ... }

이런식으로 입력을 한다.

break

반복문 종료 한다.

모든 반복이 다 끝나기전에 반복문을 종료한다.

HTML
<label for="search">Search by contact name: </label>
<input id="search" type="text">
<button>Search</button>

<p></p>
Javascript
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
const para = document.querySelector('p');
const input = document.querySelector('input');
const btn = document.querySelector('button');

btn.addEventListener('click', function() {
let searchName = input.value;
input.value = '';
input.focus();
for (let i = 0; i < contacts.length; i++) {
let splitContact = contacts[i].split(':');
if (splitContact[0] === searchName) {
para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
break;
}
else {
para.textContent = 'Contact not found.';
}
}
});
기본 예시

 

사용된 코드 설명
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
:
contacts 변수를 만들고 변수에 값 'Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'를 지정 한다.
const input = document.querySelector('input');
:
input 변수 만들고 HTML 문서의 input 요소에 접근 한다.
const btn = document.querySelector('button');
:
btn 변수 만들고 HTML 문서의 button 요소에 접근 한다.
btn.addEventListener('click', function() { ... }
:
변수 btn이 클릭되면 함수에 전달하는 이벤트를 등록 한다.
let searchName = input.value;
:
searchName 변수를 만들고 input 값을 저장 한다.
for (let i = 0; i < contacts.length; i++) { ... }
:
i 변수를 만들고 초기값은 0으로 지정, i가 contacts의 길이보다 짧으면 i+1 한다. 이 조건식에 부합이 되면 계속 반복된다.
let splitContact = contacts[i].split(':');
:
splitContact 변수를 만들고 contacts를 ':'로 나눠서 넣는다.
if (splitContact[0] === searchName) { ... }
:
splitContact의 값을 :로 나눈 후 앞쪽[0]의 항목을 이름, 뒤쪽[1]의 항목을 번호로 나눈다. 앞쪽의 항목이 searchName과 같다면 True를 반환 한다.
para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
:
para에 splitContact의 값을 :로 나눈 후 앞쪽[0]의 항목을 이름, 뒤쪽[1]의 항목을 번호로 나눈다. [0]의 번호는 [1]. 이런식으로 출력 한다.
break;
:
조건에 부합하면 반복문을 종료한다.
else { ... }
:
위의 조건에 해당하지 않는다면 true를 반환 한다.
para.textContent = 'Contact not found.';
:
para에 'Contact not found.' 글을 출력한다.

continue

반복을 건너뛴다.

break와 유사한 방식으로 작동하지만, 반복문을 종료하는대신 반복문의 다음 반복으로 건너뛴다.

HTML
<label for="number">Enter number: </label>
<input id="number" type="text">
<button>Generate integer squares</button>

<p>Output: </p>
Javascript
let num = input.value;

for (let i = 1; i <= num; i++) {
let sqRoot = Math.sqrt(i);
if (Math.floor(sqRoot) !== sqRoot) {
continue;
}

para.textContent += i + ' ';
}
기본 예시

 

사용된 코드 설명
let num = input.value;
:
num 변수를 만들고 input 값을 넣는다.
for (let i = 1; i <= num; i++) { ... }
:
초깃값 i = 1, i가 input에 입력한 값과 같거나 더 작은경우 i+1 한다.
let sqRoot = Math.sqrt(i);
:
sqRoot 변수를 만들고 Math.sqrt() 함수를 불러와서 숫자의 제곱근을 반환한다.
if (Math.floor(sqRoot) !== sqRoot) { ... }
:
제곱근과 내림된 제곱근이 같지 않다면 true를 반환한다.
continue;
:
제곱근과 내림된 제곱근이 같지 않다면 굳이 값을 입력할 필요가 없으므로 다음 반복으로 건너뛴다.
para.textContent += i + ' ';
:
para에 i의 값과 ' '(공백)를 출력한다.

while

Javascript
초기값; while (반복 조건) { ... 증감식; }

이런식으로 입력을 한다.

HTML
<p></p>
Javascript
const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let myFavoriteCats = 'My cats are called ';
let para = document.querySelector('p');

let i = 0;

while (i < cats.length) {
if (i === cats.length - 1) {
myFavoriteCats += 'and ${cats[i]}.';
}
else {
myFavoriteCats += '${cats[i]}, ';
}

i++;
}
para.textContent = myFavoriteCats;
기본 예시

 

사용된 코드 설명
let i = 0;
:
초기값을 0으로 설정한다.
while (i < cats.length) { ... }
:
i의 값이 cats의 길이보다 짧으면 반복한다.
if (i === cats.length - 1) { ... }
:
i가 cats 맨 마지막에서 첫번째라면 true를 반환한다.
myFavoriteCats += 'and ${cats[i]}.';
:
myFavoriteCats 변수에 'and' + 'cats[i]의 이름' + '.'를 넣는다.
myFavoriteCats += '${cats[i]}, ';
:
myFavoriteCats 변수에 'cats[i]의 이름' + ',' + ' '(공백)을 넣는다.
i++;
:
증감식이며 i+1 한다.

do ... while

Javascript
do {
...
증감식;
} while (반복 조건)

이런식으로 입력을 한다.

HTML
<p></p>
Javascript
const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let myFavoriteCats = 'My cats are called ';
const para = document.querySelector('p');

let i = 0;

do {
if (i === cats.length - 1) {
myFavoriteCats += `and ${cats[i]}.`;
}
else {
myFavoriteCats += `${cats[i]}, `;
}

i++;
}
while (i < cats.length);

para.textContent = myFavoriteCats;
기본 예시

 

사용된 코드 설명
do { ... }
:
조건식에 부합되면 실행할 코드를 입력한다.
while (i < cats.length);
:
i가 cats의 길이보다 짧을 때 반복한다.
참고
관련 포스트
Javascript - 기초 - 반복문 - 현재글
Mingg`s Diary
밍구
공부 목적 블로그