자바 스크립트(js) 입문 공부 6. 조건문, 반복문 while

 

조건문의 요소 

조건문을 구성하는 세 가지 요소 : 초기식, 조건식, 반복식 입니다. 

1. 초기식 : 반복 조건의 초기화 작업 

2. 조건식 : 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식

3. 반복식 : 반복이 한 번 끝날 때마다 실행될 작업

반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문입니다.

대표적인 반복문은 다음 두 가지이며, 두 반복문은 구조 및 동작방식에서 차이가 있습니다.

● while문

● for문

 

반복문 while문

먼저 while문을 확인해봅니다. 

키워드 while을 이용해 만드는 구문 while문은 ‘주어진 조건이 참일 동안에 구문을 반복하는’ 반복문입니다.

while문의 기본 형태는 다음과 같습니다. 

while(조건){
// 조건이 true 일 동안에 반복해서 실행할 코드 
}

조건이란 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식이어야 합니다. 

즉, 참 아니면 거짓으로 대답할 수 있는 질문입니다.

반복 구문은 ‘루프loop’라고도 합니다. 

조건이 참인 동안에 반복한다. 

-> while 문에는 세 가지가 모두 사용될 필요가 없다. (while문은 조건만 보면 된다. )

let number = 1

while(number <3) {    // number 가 3보다 작은 동안에는 출력을 반복한다.  (초기식, 조건식)
    console.log(number)
    number += 1     // 반복식. 조건이 실행할 때마다 달라지는 식 
}

 

window.confirm() 를 while과 함께 사용해볼게요.

window.confirm()는 사용자로부터 참/거짓 중 하나를 받는 다이얼로그dialog  메소드 입니다. (alret과 같은 속성이에요.)

while(confirm("반복하고 싶나요?")){
    console.log("반복 중입니다.")
}

실행하면 반복하고 싶나요? 라는 다이얼로그가 출력되고 확인을 누르면 무한 반복됩니다. 

취소를 누르면 그 때 반복이 멈춥니다. 

반복문 for문

for문은 구문 작성시 반복을 위해 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 

명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문입니다. 

즉, while이 무한 반복이 가능한 조건식이라면

for는 조건에 변화를 주어서 반복의 횟수를 정해서 반복하는 것에 최적화가 되어 있습니다. 

 

for문은 반복 횟수가 직관적으로 결정되는 반복문입니다. 

이번 반복문 예제를 위해 querySelectorAll 이라는 메소드를 하나 더 알아볼게요. 

querySelectorAll : 해당하는 것을 전부 배열 형태로 접근할 수 있습니다.

(여기서 중요한 것! 이것은 배열 형태이기 때문에 인덱싱이 가능합니다!)

let items = document.querySelectorAll("li")
console.log(items)
for(let i = 0; i < 5 ; i += 1){
    items[i].textContent = "크로플"
}

 

let items = document.querySelectorAll("li")   // DOM에서 li에 해당하는 것만 가져옵니다. 

i가 4번째가 될 때까지 반복하며 item[] 배열 안에 i 번째 요소로 인덱싱을 합니다. 

li에 크로플이라는 목록이 인덱싱이 됩니다. 

그럼 prompt 를 사용해서 각 목록을 원하는대로 입력하도록 만들어볼게요. 

let items = document.querySelectorAll("li")
console.log(items)

for(let i = 0; i < 5 ; i += 1){
    items[i].textContent = prompt("당신이 좋아하는 음식은?")
}

정해진 숫자만큼 반복하며 prompt 창을 다이얼로그하고,

그 속에 입력된 값들을 차례대로 items[] 배열에 인덱싱을 합니다. 

여기까지 조건문과 반복문에 대해서 알아보았습니다. 

다음에는 함수에 대해서 알아볼게요.