반복문은 조건을 만족하는 동안 코드 블록을 반복적으로 수행한다. 자바스크립트에서는 for, for-in, for-of, while 같은 반복문을 사용한다.
for 문
다음과 같은 브랜드명이 들어있는 배열이 있다.
let brands = ["애플","구글","페이스북","아마존","삼성전자"]brands 배열에 담긴 브랜드명을 콘솔 창에 모두 출력하려면 다음과 같이 배열의 처음 부터 마지막까지 입력해야한다
console.log(brands[0]); //애플
console.log(brands[1]); //구글
console.log(brands[2]); //페이스북
console.log(brands[3]); //아마존
console.log(brands[4]); //삼성전자만약 배열에 담긴 데이터수가 100건이라면 100줄을 작성해야한다. 반복문은 동일한 코드 블록을 지정된 횟수만큼 반복적으로 실행 할수 있게 해준다.
for 문을 다음과 같은 문법구조를 가지고있다
for(statement1, statement2, statement 3){
// 코드블록
}- statement1 : 코드블록이 실행되기전에 한번 실행됨
- statement2 : 코드블록을 실행시킬 조건 정의
- statement3 : 코드블록을 실행한 후 실행됨
for문을 사용하면 이렇게 간단히 구현할수있다.
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- statement1 : 변수 i에 0을 할당
- statement2 : 변수 i의 값이 배열 brands의 길이보다 작으면 코드블록 실행
- statement3 : 코드블록을 한번 실행하고 나면 변수 i의 값을 1씩 증가
반복문 실행 단계 별 과정
- let i = 0 반복문 for 블록을 만나면 처음에 딱 한번 실행되는 부분이다. 여기서는 변수 i에 0이 할당
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- i<brands.length 반복문의 코드 블록을 실행해도 될지 조건을 확인한다. 여기서는 i의 값이 brands 배열의 길이보다 작다면 코드블록을 실행한다. i 는 0 이고, 배열 brands는 5개의 데이터가 저장되어 있으므로 길이는 5이다. 따라서 i가 brands.length보다 작기 때문에 코드 내용인 console.log(brands[i])을 실행한다.
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- i++는 코드 블록이 실행될 때마다 코드 블록 실행 직후 바로 실행되는 부분이다. 여기서는 i의 값이 1만큼 증가하라는 코드이므로 0인 값에 1을 증가 시켜서 i의 값이 1이 된다
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- 3에서 i의 값을 1증가시키고 나면 코드블록을 실행해도 될지 조건을 확인하는 부분인 i < brands.length 의 조건을 확인하고 조건을 만족하면 반복문의 코드 블록을 실행한다. 현재 i는 1이고 배열 brands의 길이는 5이기 때문에 코드 내용인 console.log(brands[i])를 실행 한다.
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- 코드 블록을 실행하고나면 다시 i++ 코드를 실행하며, i의 값이 1에서 2로 바뀌게 된다.
for (var i = 0; i < brands.length; i++) {
console.log(brands[i]);
}- 4번의 조건이 false가 될때까지 4번과 5번을 반복적으로 수행한다. 이렇게하면 i의 값이 brands의 배열의 길이인 5가 될때까지 반복문의 코드 블록이 실행된다. i가 5가 되면 i < brands.length의 조건이 false가 되기 때문에 더이상 반복문을 실행하지 않고 빠져나오게 된다. 결과적으로 다음과 같은 실행결과를 가져온다.
console.log(brands[0]); //애플
console.log(brands[1]); //구글
console.log(brands[2]); //페이스북
console.log(brands[3]); //아마존
console.log(brands[4]); //삼성전자고객이 음료를 구매하기위해 투입한 800원으로 구매가능한 음료목록을 구하라
!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script>
var productList = [
// 음료 리스트
{
name: "솔의눈",
price: 700,
},
{
name: "커피",
price: 700,
},
{
name: "파워레이드",
price: 1200,
},
{
name: "오렌지",
price: 1000,
},
{
name: "보리차",
price: 1200,
},
{
name: "밀키스",
price: 800,
},
];
let inputCoin = 800; //고객이 음료 구매를 위한 투입한 총 금액
let len = productList.length; //배열 productList에 담긴 요소의 길이
let outputList = []; //고객이 구매할 수 있는 음료 목록을 저장할 새로운 배열
for (var i = 0; i < len; i++) {
//productList의 모든 요소에 대한 접근
if (productList[i].price <= inputCoin) {
//음료 가격이 고객이 투입한 금액 보다 같거나 작으면
outputList.push(productList[i]); //outputList에 추가
}
}
</script>
</body>
</html>for-in
for-in문은 데이터 타입 중 배열뿐만 아니라 Object에서도 사용할수 있는 반복문이다. Object는 데이터를 저장할때 키(key)를 사용하여 저장하고, 키를 이용해서 읽을 수 있다. for-in문은 Object내에 정의 된 키값의 수만큼 코드 블록을 실행한다.
for(const key in object){
//실행할 코드 블록
}예를 들어 다음과 같이 사람의 정보를 담는 Object가 있다. Object 내에 선언된 키는 fname, lname, age가 있다. for-in문을 사용하면 반복문이 실행되면서 fname, lname, age를 변수에 할당하게 되고, 코드 블록 내에 person객체에 key를 전달하여 저장된 데이터를 가져올수 있다.
var person = { fname: "John", lname: "Doe", age: 25 };
for (var key in person) {
console.log(person[key]); //오브젝트 key 출력
}for-in문은 배열에 사용하면 배열에 등록된 데이터 수만큼 반복문을 실행한다.
var brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
for (var brand in brands) {
console.log(brand); //배열의 인덱스 번호 출력
}for-of
for-of문은 Array, Map, String 등 iterable(반복 가능한)객체에서 사용 가능한 반복문이다.
for(const element of iterable){
//실행할 코드 블록
}다음은 배열의 각 요소를 for-of를 사용해서 추출하는 예제이다.
var brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"];
for (var brand of brands) {
console.log(brand); //배열의 각 요소 출력
}
var language = "JavaScript";
for (var x of language) {
console.log(x); //문자열의 단일 문자 출력
}while
while문은 조건식이 true인 동안 코드 블록을 실행한다. 조건식이 false가 되기 전까지 반복문을 수행한다.
var i = 1;
while (i <= 10) {
console.log("The number is " + i);
i++;
}배열을 이용해 반복문을 사용할때는 for문이 편리하고 배열이 아닌 특정 조건으로 반복문을 사용할때는 while문을 사용하면 된다.
예를 들어 지폐를 투입하면 500원짜리 동전으로 교환해주는 자판기가 있다고 생각해보자.
사용자가 넣은 금액이 0원이 될때까지 while문을 이용하여 사용자가 투입한 지폐금액에서 500원씩 차감한다. 그리고 500원짜리 동전을 몇개 내보낼지 계산한다.
var inputPrice = 7000; //사용자가 넣은 지폐 금액
var coinUnit = 500; //반환할 500원짜리 동전
var coinCount = 0; //반환될 500원짜리 총 개수를 담을 변수
while (inputPrice > 0) {
//사용자가 넣은 금액이 0이 될 때 까지
inputPrice = inputPrice - coinUnit;
//inputPrice 금액이 500원씩 줄어 듬
coinCount++; //반복문이 한번 돌때 마다 반환되는 500원짜리 동전 수를 증가 시킴
}
console.log(coinCount); //500원짜리 총 개수이처럼 배열의 길이가 아니라 특정 조건을 만족하는 동안 반복문을 실행하고자 할때 while문을 사용하면 효율적으로 문제를 해결할수 있다.
잘 읽었습니다 :D