자바스크립트 기초 정리(반복문 while, do while, for, for in, for of) - 3📘

반복문이란?

반복문도 하나의 제어문으로써 같은 명령을 일정 횟수만큼 계속 반복할 수 있게 만드는 실행문입니다. 대부분의 프로그램이 반복을 요하는 경우가 많기 때문에 엄청 많이 사용되는 실행문이라고도 할 수 있습니다

 

Fig. 1. 예시 반복문 미사용

 

다음과 같은 출력을 해야하는 경우 Fig. 1 과 같이 보기만 해도 너무 번거로워 보입니다. 이와 같은 출력을 Fig. 2와 같이 간결하게 작성해 줄 수 있는 장점이 있습니다!

 

Fig. 2. 예시 반복문 사용

 

Fig. 2 과 같이 for(변수 선언 = n; n < 10; n++){명령} 형식으로 작성할 수 있습니다. 일반적으로 변수는 i, j, k로 설정하고 0부터 시작합니다. 왜 1부터 세지 않지?라고 생각 하실 수 있는데,  배열(array) 인덱스가 0 부터 시작하는 규칙 때문입니다! 

 

var arr = [red, blue, green] // red는 0번째, blue는 1번째, green은 2번째

---

 

반복문의 형태

반복문의 형태는 다음 다섯가지로 구분해 볼 수 있습니다

 

• while 문 
• do while 문
• for 문
• for in 문
• for of 문

 

while 문

간단한 예제로 prompt 함수를 통해 주문할 만큼의 커피 수량을 입력하면, '총커피가 몇 잔 주문되었는지' 출력해 주는 코드를 간단히 작성해 보았습니다. order 변수가 1,2,3,..., n 이면 1,2,3,..., n잔 주문되었다고 출력이 되고 -1을 넣으면 while문을 탈출합니다

*prompt()를 통해 입력을 할 수 있습니다

 

var order = 0 // 주문 변수 선언

while(order == 0){  // 주문 변수가 0으로 설정되어 있으면
    order = prompt('커피를 몇잔 주문하시겠습니까?') // 몇잔 주문할지 입력
    if(order == -1){ // -1을 입력하면 while문을 나감
    	break
    }else{ //아니면 계속 반복
    	console.log('총 커피가' + order + '잔 주문되었습니다') // 출력
        order = 0
    }
}
// 입력값 : n
// 출력값 : 총 커피가n잔 주문되었습니다
// 입력값 : -1
// 출력값 :

 

 

while 문을 간단히 설명하면 order == 0라는 표현식을 만족하면 while 문은 끝없이 주문(무한 루프)을 받습니다. 그래서 어떠한 값을 입력받았을 때, while 문을 나올 수 있도록 꼭 설정해주어야 하는데, 그 값이 - 1이고 그 외에 모든 값은 입력과 출력을 반복합니다

---

 

do while 문

var total_order = 0 // 총 주문

do{  // 일단 무조건 1번은 실행
    var order = prompt('커피를 몇잔 주문하시겠습니까?')
    total_order = Number(order) + N(total_order)
    console.log('총 커피가' + total_order + '잔 주문되었습니다')
}while(total_order < 20) // 총 20잔의 커피가 주문될때까지 do로 돌아간다

 

do while 문과 while 문의 다른 점은 while 문은 표현식의 참/거짓에 따라 명령을 실행하거나 하지 않지만, 

do while 문은 do 부분의 명령을 무조건 한 번은 실행을 하고 while 문 표현식의 참/거짓을 검사한다는 점입니다. 그 이후 다시 do 부분으로 돌아가 표현식을 만족하지 않을 때, 종료합니다

---

 

for 문

 

for 문은 while 문이나 do while 문과는 또 다르게 초기식, 표현식, 증감식을 포함하는 반복문입니다

 

var order = ['곱창', '사이다', '계란찜'] // 주문 

for(var i = 0; i < order.length; i++){
    if(i == 0){
        console.log('주문이 들어왔어요!')
    }
    console.log('주문 내용은 ' + order[i] + '입니다')
}
// 출력 : 주문이 들어왔어요!
//        주문 내용은 곱창입니다
//        주문 내용은 사이다입니다
//        주문 내용은 계란찜입니다

for 문은 다양하게 많이 쓰이는데, 표현식에 배열의 크기(order.length)라는 제약을 통해 배열의 크기나 내용을 출력할 때 많이 쓰입니다. if 문으로 처음에 '주문이 들어왔다'라는 것을 한번 출력하고, 그 후에order [i]를 통해 배열 안의 값을 하나하나 불러오는 코드입니다. 위와 같이 배열의 길이가 3으로 짧으면 i < 3이라고 우리가 설정할 수도 있지만, 배열의 크기가 커지게 된다면 일일이 배열 안의 값이 몇 개가 있는지 셀 수 없기 때문에, length라는 함수를 통해 보다 쉽게 파악할 수 있습니다

---

 

for  in문

 

for in 문부터는 객체라는 개념이 등장하는데, 자바스크립트에서 객체란 우리가 살아가는 이 세상에 존재하는 것들의 속성을 담아놓은 데이터라고 할 수 있습니다. 예를 들어 객체 이름이 홍길동이라고 하면, 이름은 홍길동, 성별은 남자, 키는 180과 같은 프로퍼티를 가지고 있는 데이터입니다. 중괄호로 표현합니다 { }

 

var hong = ['홍길동', '남자', '180']  // 배열

for(var i = 0; i < hong.length; i++){
    console.log('출력 : ' + hong[i] + '입니다')
}

for (var i in hong){ // i는 배열의 인덱스를 저장합니다
    console.log('출력 : ' + i + '입니다')
}

for (var i in hong){   // 맨위의 코드와 같이 동작하는 for in 문
    console.log('출력 : ' + hong[i] + '입니다')
}

출력 : 홍길동입니다
출력 : 남자입니다
출력 : 180입니다
출력 : 0입니다
출력 : 1입니다
출력 : 2입니다
출력 : 홍길동입니다
출력 : 남자입니다
출력 : 180입니다

 

for in 문은 객체의 프로퍼티를 가지고 오는 실행문입니다

for in 문은 for 문과 다르게 i ++ , i -- 같은 증감식과 표현식을 포함하지 않습니다. 그리고 hong이라는 배열을 선언했지만, for in 문안에서는 객체로 처리하는데, var hong = {0 : '홍길동', 1 : '남자', 2 : '180'}이라는 객체와 같다고 생각하면 됩니다. 그래서 i 값만 출력한다면, 0,1,2 프로퍼티를 출력하게 되고, hong[i] 를 출력할 때 비로소 배열의 값을 출력하는 것을 볼 수 있습니다.

 

var hong = {이름 : '홍길동', 성별 : '남자', 키 : 180} // 객체

for (var i in hong){   // i는 객체의 프로퍼티(이름, 성별, 키)
    console.log('출력 : ' + i + '입니다')
}

for (var i in hong){  // hong[i]는 프로터티의 값(홍길동, 남자, 180)
    console.log('출력 : ' + i + ':' + hong[i] + '입니다')
}

// 출력 : 이름입니다
// 출력 : 성별입니다
// 출력 : 키입니다
// 출력 : 이름:홍길동입니다
// 출력 : 성별:남자입니다
// 출력 : 키:180입니다

---

 

for  of 문

 

for of 문은 반복가능한 객체에 대해서 반복을 합니다. iterable 객체라고 말하는데,  Array , Map , Set , String , TypedArray , arguments 객체등을 iterable 객체라고 하고 iterable 객체가 되기 위해서는 조건 또한 따릅니다. 하지만 지금 다루기에는 좀 깊이가 있어서, 이런 게 있구나 생각하시면 될 것 같습니다. 

 

var hong = ['홍길동', '남자', '180']  // 배열

for(var i = 0; i < hong.length; i++){
    console.log('출력 : ' + hong[i] + '입니다')
}

for (var i of hong){ // i는 배열의 인덱스 값을 저장합니다
    console.log('출력 : ' + i + '입니다')
}

for (var i of hong){   // i == '홍길동' , hong['홍길동']은 존재하지 않는다
    console.log('출력 : ' + hong[i] + '입니다')
}

// 출력 : 홍길동입니다
// 출력 : 남자입니다
// 출력 : 180입니다
// 출력 : 홍길동입니다
// 출력 : 남자입니다
// 출력 : 180입니다
// 출력 : undefined입니다

 

Array 배열은 반복가능한 객체이므로 for of 문을 통해 반복할 수 있습니다.

위에 코드와 같이 for of 문은 for in 문과는 또 다르게,  i에 프로퍼티값이 저장되고, 가장 마지막 hong [i] == hong ['홍길동']은 존재하지 않기 때문에 출력값이 undefined가 됩니다

---