본 글은 자바스크립트 반복문의 종류와 그에 대한 사용법에 대해서 알아보고자 합니다.
- 목차 -
가. 반복문 의미와 사용하는 이유
나. 반복문의 종류와 사용법
1. for-loop 문
2. for in 문
3. for of 문
4. forEach 문
5. while 문
6. do while 문
다. 참고자료
가. 반복문 의미와 사용하는 이유
특정 코드 블록을 정해진 횟수만큼 반복해서 실행되게 만드는 것을 반복문이라고 합니다.
즉, 특정 기능이나 명령을 반복해서 수행하기 위함입니다.
아래 예제에서 반복문을 사용하는 이유를 쉽게 알아보고자 합니다.
웹 화면에 1에서 100까지의 숫자를 출력하는 경우를 가정해봅시다.
반복문을 사용하지 않는다면 아래와 같이 표현할 수 있습니다.
document.write('1');
document.write('2');
document.write('3');
.
.
.
document.write('98');
document.write('99');
document.write('100');
시간을 투자하여 1에서 100까지 숫자를 위와 같이 표현할 수도 있습니다.
하지만 나중에 1,000까지, 10,000까지 숫자로 표현해야 한다면 많이 힘들어질 수 있습니다.
이런 경우 중복되는 코드를 줄이고 반복해서 실행할 수 있도록 하는 것이 반복문입니다.
다음 글부터 자바스크립트 반복문의 종류와 사용법에 대해서 알아봅시다.
나. 반복문의 종류와 사용법
반복문의 종류에는 for-loop, for-in, for-of, forEach, while, do while이 있습니다.
왼쪽부터 차례대로 알아봅시다.
1. for-loop 문
for-loop 문은 초기식, 조건식, 증감식이 포함되어 있는 반복문 입니다.
for-loop 문은 객체에서 사용할 수 없으며 배열에서 사용 가능합니다.
아래 코드는 for loop문의 기본 형식입니다.
// for 문의 형식
for(statement1 ; statement2 ; statement3){
실행될 코드
}
- statement1 : for-loop문 실행할 때 무조건 딱 한번 실행
- statement2 : 코드 블록을 실행시킬 조건절
- statement3 : 코드블록을 실행한 후 실행되는 코드
아래 for-loop문을 이용한 예제 코드를 보면서 이해하고자 합니다.
// 1에서 100까지 숫자를 출력
for (let i = 1; i <= 100; i++) {
document.write(i);
}
1) statement1에 해당하는 "let i = 1" 은 한 번 실행됩니다. (변수 i에 숫자 1이 할당됩니다)
2) statement2에 해당하는 조건인 "i <= 100" 은 i 가 숫자 100보다 작거나 같으면 아래 코드가 실행됩니다.
3) statement3에는 i++가 있습니다. 이것은 for-loop문 안 코드가 실행된 후 i가 1씩 증가됨을 의미합니다.
아래는 위의 코드가 실행되는 순서를 표현한 코드입니다.
for (let i = 1; i <= 100; i++) {
i = 1, 1이 100보다 작으므로 조건에 부합
document.write(1) 실행
i++되어 i는 2가 됨
i = 2, 2는 100보다 작으므로 조건에 부합
document.write(2) 실행
i++되어 i는 3이 됨
.
.
.
i = 100, 100은 100과 같으므로 조건에 부합
document.write(100) 실행
i++되어 i는 101이 됨.
i = 101, 101은 100보다 크므로 조건에 부합하지 않음
for문이 종료되고 코드블록을 빠져나감
}
위와 같이 조건에 부합하면 계속 반복실행되며 조건에 부합되지 않으면 for-loop문이 종료됩니다.
* for-loop 문 - break
break는 for-loop문을 사용하면서 원하는 특정 시점에 for 블록 전체를 실행하지 않고 빠져나올 수 있는 용도로 사용합니다.
for (let i = 0; i < 10; i++) {
if (i === 3) {
break; // break를 만나면 for문 종료
}
console.log(i); // 0, 1, 2 콘솔에 출력
}
위의 for-loop문을 break 없이 실행한다면 0에서 9까지 콘솔에 출력되어야 하지만
if 조건문을 사용, i 가 3일 때 break를 적용하므로 콘솔에는 0, 1, 2만 출력되고 for-loop문을 빠져나옵니다.
* for-loop 문 - continue
continue는 for-loop문을 사용하면서 continue를 만나면 아래 실행 코드를 실행하지 않고 statement3으로 이동됩니다.
for (let i = 0; i < 10; i++) {
if (i === 3) {
continue; // continue를 만나면 아래 코드를 실행하지 않고 i++로 이동 후 진행
}
console.log(i); // 0, 1, 2, 4, 5, 6, 7, 8, 9 콘솔에 출력 (3 생략)
}
continue가 없다면 0~9까지 콘솔에 출력되지만 i가 3일 때 continue가 실행되므로
i가 3일 때의 continue 아래 코드가 실행되지 않고 statement3인 i++로 진행됩니다.
따라서 콘솔에는 0, 1, 2, 4, 5, 6, 7, 8, 9가 출력됩니다. (3이 생략됩니다)
2. for in 문
배열에서 요소만큼 반복하고 인덱스 번호를 출력합니다.
for-loop문은 객체에서 사용할 수 없지만 for in은 객체에서 사용할 수 있습니다.
아래는 for in 문의 기본 형태입니다.
// for in 기본 형태
for (선언자 변수명 in 객체) {
실행 코드
}
아래 for-loop문과 비교하면서 알아봅시다.
const fruit = ["orange", "apple", "banana", "grape"];
// for 문
for (let i = 0; i < fruit.length; i++) {
console.log(fruit[i]);
}
// for in 문
for (const i in fruit) {
console.log(fruit[i]);
}
위의 for와 for in 은 똑같은 결과를 가집니다.
for 같은 경우 statement를 설정해야 하지만 for in은 따로 statement를 설정하지 않더라도 모든 배열 요소를 순회합니다.
for in의 변수명에는 배열의 인덱스 번호가 출력됩니다. (위의 예제에서는 배열의 인덱스 번호가 0, 1, 2, 3이 됩니다)
* object에서 사용되는 for in
let person = {
name: "김미영",
age: 28,
tel: "010-1234-5678",
city: "daegu"
};
for (const key in person) { // key에는 person 객체의 키 명이 입력됩니다.
console.log(key, person[key])
}
객체에서 사용되는 for in 은 변수명에 객체의 키 명이 입력되어 위 예제 key에는 name, age, tel, city가 담겨있습니다.
객체의 키 값을 출력하기 위해서는 객체[키]를 이용하며 객체의 모든 키 값을 출력할 수 있습니다.
위의 예제에선 person[key]로 가져올 수 있습니다. (김미영, 28, 010-1234-5678, daegu가 출력됨)
- for in을 사용하는 경우
(1) 객체의 키, 값을 모두 출력해야 하는 상황
(2) 객체의 키 명을 알 수 없을 때 for in을 사용 가능
3. for of 문
배열의 요소만큼 반복하고 요소 값을 출력할 수 있습니다.
const fruit = ["orange", "apple", "banana", "grape"];
for (const fruitsName of fruit) { // 배열을 순회하면서 fruitsName에 요소값을 넣어준다.
console.log(fruitsName) // orange, apple, banana, grape
}
for in은 변수명에 인덱스 번호가 담긴다면 for of는 배열 각각의 요소 값이 입력됩니다.
위의 예제 콘솔에 변수명 fruitsName을 출력하면 orange, apple, banana, grape가 출력됩니다.
* 문자열에 사용되는 for of 문
문자열을 문자 하나씩 출력할 수 있습니다.
const str = "js is the best language";
for (const string of str) {
console.log(string)
}
위의 코드를 실행 시 아래와 같이 출력됩니다.
4. forEach 문
forEach문은 배열의 내장함수로 사용됩니다.
forEach의 파라미터는 함수를 전달 받습니다.
*파라미터(매개변수)란 함수를 호출할 때 전달받은 인수를 함수 내부로 전달하기 위한 변수를 의미합니다.
배열을 순회하면서 배열의 요소값, 인덱스번호를 출력할 수 있습니다.
const fruit = ["orange", "apple", "banana", "grape"]; // fruit - 배열 객체
fruit.forEach(function (item, index) { // array 내장함수, 첫번째 파마리터 : 요소값, 두번째파라미터 : 인덱스번호
console.log(item) // orange, apple, banana, grape 출력
console.log(index) // 0, 1, 2, 3 출력
})
위 예제의 첫번째 파라미터 item에는 배열의 요소 값인 orange, apple, banana, grape를 전달받고
두번째 파라미터 index에는 인덱스 번호인 0, 1, 2, 3을 전달 받습니다.
5. while 문
while문은 조건식을 만족하는 동안 코드 블록을 실행합니다.
조건식이 만족하는 동안 실행되므로 while문을 종료할 수 있는 코드가 반드시 존재해야 합니다.
let i = 1;
while (i < 5) { // 변수 i가 5미만일 때만 while문 실행
console.log(i)
i++; // 반복할 때마다 변수 i를 1씩 증가, i가 5가되면 while문 종료
// i = 1, i < 5 코드 블록 실행
// i = 2, i < 5 코드 블록 실행
// i = 3, i < 5 코드 블록 실행
// i = 4, i < 5 코드 블록 실행
// i = 5, i < 5 조건식에 부합하지 않으므로 while 문 종료
}
조건식에 부합하는 동안 반복하다가 조건에 부합하지 않게 되면 while문은 종료됩니다.
위의 예제에서는 i 가 5 미만일 때까지 반복하다가 5가 되면 조건에 부합하지 않으므로 종료됩니다.
* while문이 사용되는 경우
얼마나 반복해야 될지 모를 때 사용합니다.
// 동전교환기
let inputCoin = 6000; // 넣은 금액
let coinUnit = 500; // 교환할 동전
let coinCount = 0; // 교환 동전의 갯수, 초기값은 0
while (inputCoin >= 0) { // 넣은 금액이 0보다 클 경우 반복 (조건식)
inputCoin = inputCoin - coinUnit; // 넣은 금액 - 교환할 동전, 넣은 금액이 0보다 작을 때까지 반복
coinCount++; // 교환 동전 갯수 1씩 증가
}
위의 예제는 동전교환기 코드입니다.
동전 교환기의 경우 사용자가 돈을 얼마나 교환할지 정해져 있지 않습니다.
따라서 얼마나 반복해야 할지 알 수 없으므로 while문을 통해 반복 횟수를 명시하지 않더라도 반복문을 사용할 수 있게 됩니다.
6. do while 문
do while문은 무조건 1번 코드 블록이 실행되고, 그 다음 조건식을 체크합니다.
let i = 1;
do {
console.log(i) // 무조건 1번 실행되므로 console에 1이 출력된다.
i++;
} while (i > 5)
위의 예제에서 조건식인 i 가 5보다 커야 조건에 부합하지만 do while 문은 코드블록이 무조건 1번 실행되므로 콘솔에 1일 출력되고 do while문이 종료됩니다.
여기까지 자바스크립트 반복문에 대해서 알아보았습니다.
배열 및 객체에서 반복문을 통해 값 또는 인덱스 번호를 가져올 수 있으며 반복되는 코드를 줄일 수 있는 장점이 있습니다.
반복문에는 6가지가 있으며 각각의 쓰임새가 조금씩 다르므로 필요에 맞게 사용하시면 됩니다.
저의 글을 읽어주셔서 감사합니다.
다. 참고자료
1. https://www.youtube.com/c/개발자의품격 / 부트캠프 中 - 반복문
2. http://www.tcpschool.com/javascript/js_control_loop - TCH SCHOOL - 반복문
3. http://www.tcpschool.com/javascript/js_function_parameterArgument - TCP SCHOOL - 매개변수와 인수
'언어 > JAVASCRIPT' 카테고리의 다른 글
| [javaScript] Web Storage의 localStorage와 sessionStorage (0) | 2022.10.22 |
|---|---|
| [javaScript] 프론트엔드 가상서버 json-server 사용법 (0) | 2022.10.15 |
| [javaScript] Array(배열) 객체 내장 함수의 종류와 사용법 (2) | 2022.10.06 |