Javascript - 기초 - 반복문

반복문

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

반복문에는 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의 길이보다 짧을 때 반복한다.

참고

MDN Web Docs - JavaScript First Steps

MDN Web Docs - JavaScript building blocks

MDN Web Docs - Looping code

반복문

for

break

continue

while

do ... while

참고

관련 포스트

댓글 답글 취소