[JavaScript] 반복문 for-loop문, 예제 연습

반복문은 조건을 만족하는 동안 코드 블록을 반복적으로 수행한다

for-loop

 

for-loop의 문법구조는 아래와 같다

 

for (statement 1; statement2; statement3) }
	//코드 블록
}

• statement1 = 코드 블록이 실행되기 전에 한 번 실행됨
• statement2 = 코드 블록을 실행시킬 조건 정의
• statement3 = 코드 블록을 실행한 후 실행됨

 

이 구조를 적용시키면 아래와 같이 쓸 수 있다

for (let i=0; i <10; i++) {
	console.log(i);
}
//콘솔 창 출력 결과
//0
//1
//2
//3
//4
//5
//6
//7
//8
//9

변수 i는 반복하다를 의미하는 iterate의 첫 자를 따온 것으로 통상 여러 반복문을 사용해야 할 경우 i, j, k 순으로 사용한다.

출력 결과 값을 보면 콘솔에 한 줄씩 찍히는 것을 보아 하나씩 더해지며 반복되는 것을 확인할 수 있다.

i가 10이 되면 다음 조건(i<10)이 false가 되어 for문은 종료된다.

 

 

 

반복문은 배열에서도 자주 쓰인다.

 

let brands = ["애플", "구글", "페이스북", "인스타그램"];

 

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

 

• statement1 = 변수 i에 0을 할당한다
• statement2 = 변수 i의 값이 배열 brands의 길이보다 작으면 코드 블록을 실행한다
• statement3 = 코드 블록을 한 번 실행하고 나면 변수 i의 값을 1씩 증가시킨다

 

변수  i의 값이 배열 brands의 길이인 4보다 작은 경우에는 코드 블록이 실행되고,

변수 i의 값이 3일 때까지 코드 블록을 실행한 후 변수 i의 값이 4로 바뀌면

statement2 조건을 만족하지 않으므로 더 이상 코드 블록을 실행하지 않고 종료시킨다.

가장 중요한 점은 종료되는 시점을 배열.length로 설정한 것이다.

배열에 담긴 데이터 수가 100건 이상이라면 우리는 몇 개가 있는지 알 수 없으며,

언제 배열의 데이터가 추가 혹은 삭제가 될 지 모른다.

따라서 종료 시점은 배열의 데이터 개수에 설정하는 것이다.

 

---

 

이번엔 음료 자판기에 있는 음료 리스트 예제를 연습해보자

음료를 구매하기 위해 투입한 금액은 800원이고, 800원으로 구매 가능한 음료 목록을 for-loop문과 if문을

같이 사용하여 구하는 예제이다.

 

let productList = [
//음료리스트
{
	name: "레쓰비",
    price: 600,
},
{
	name: "식혜",
    price: 600,
},{
	name: "코코팜",
    price: 1200,
},{
	name: "파워에이드",
    price: 1200,
},{
	name: "밀키스",
    price: 800,
},{
	name: "옥수수수염차",
    price: 1000,
},
];

let inputCoin = 800;	// 고객이 음료 구매를 하기 위해 투입한 금액
let len = productList.length;	//배열 productList에 담긴 요소의 길이
let outputList = [];	//고객이 구매할 수 있는 음료 목록을 저장할 새로운 배열
for (let i = 0; i < len; i++) {
	//productList의 모든 요소에 대한 접근
    if(productList[i].price <= inputCoin){
    //음료 가격이 고객이 투입한 금액 보다 같거나 작으면
    outputList.push(productList[i]);	//outputList에 추가
	}
}

코드 제일 아랫줄의 push는 배열에 관련된 함수 중 하나이다.

push는 이미 선언한 배열에 값들을 추가하고 싶을 때 사용하는 자바스크립트 함수이다.

배열.push(추가할 값); 으로 작성

추가되는 값은 맨 마지막에 추가된다 ! ! ! !