j33. 자바스크립트 Loop 문

자바스크립트 Loop 문

매번 값만 조금씩 바꾸어 가면서, 같은 코드들을 계속 반복하고자 할 때, Loop 를 사용할 수 있습니다.

Loop 는 배열과 함께 사용되는 경우가 많습니다.

---

Loop 에는 종류가 많은데, 자바스크립트 에서도 여러가지의 Loop 를 지원합니다.

	for 루프 : 코드들을 여러번 반복합니다.
	for/in 루프 : 객체의 프로퍼티를 반복합니다.
	while 루프 : 조건이 true 인 동안에만 코드들을 반복합니다.
	do/while 루프 : while 과 동일하게, 조건이 true 인 동안에만 코드들을 반복합니다.

---

for 루프의 구문은 아래와 같습니다.

for (식 1; 식 2; 식 3) {
    실행될 코드들;
}


	식 1 은 루프 내의 코드가 시작되기 전에 실행됩니다.
	식 2 는 루프 내의 코드가 실행되기 위한 조건을 정의합니다.
	식 3 은 루프 내의 코드가 실행된 후에 매번 실행됩니다.

---

for 문을 이중으로 사용하여 별을 하나부터 다섯개 까지 찍어 보겠습니다.

<p>for 문을 이중으로 사용하여 별을 하나부터 다섯개 까지 찍어 보겠습니다.</p>

<button onclick="myStarFunction()">별 하나부터 별 다섯 까지 찍기</button>

<p id="myStar"></p>

<script>
function myStarFunction() {
var text = "";
var i;
for (i = 0; i < 5; i++) {
for (star = 0; star < i + 1; star++) {
text += "* ";
}
text += "<br />";
}
document.getElementById("myStar").innerHTML = text;
}
</script>

위의 예에서, for (i = 0; i < 5; i++) 구문안에 3개의 식이 있습니다. 각각의 의미는 아래와 같습니다.

	식 1 : 루프가 시작되기 전에 변수를 초기화 하였습니다. i 값이 0 으로 초기화되었습니다.
	식 2 : 루프가 실행되기 위한 조건을 정의하였습니다. i 값이 5 보다 작으면 루프는 계속 실행됩니다.
	식 3 : 루프가 한번 실행되고 나면 변수의 값을 증가 시킵니다. i++ 되고 식 2 로 갑니다.

---

식 1 은 루프에 사용될 변수를 초기화 하는데 사용될 것입니다.

식 1 은 꼭 있어야 하는 것도 아니고 자바스크립트 에서는 식 1 은 옵션입니다.

반면 식 1 에서 여러개의 변수 값을 초기화 할 수도 있습니다.

<p id="myMotors1"></p>

<script>
var myMotors2 = ["그랜저", "에쿠스", "제네시스", "산타페"];
var i, len, myMotors3;
for (i = 0, myLength = myMotors2.length, myMotors3 = ""; i < myLength; i++) {
myMotors3 += myMotors2[i] + "<br>";
}

document.getElementById("myMotors1").innerHTML = myMotors3;
</script>

---

식 2 는 조건에 따라 변수 값을 판단하기 위해 사용됩니다.

식 2 또한 옵션입니다. 반드시 있어야 하는 식은 아닙니다.

식 2 가 true 이면, 루프는 계속 됩니다. 만일 false 이면 루프는 종료됩니다.

식 2 를 생략하면 루프 내에 break; 를 삽입해야 합니다.

그렇지 않으면 무한 루프가 될 것입니다.

이렇게 되면 브라우저는 동작 불능 (crash) 상태가 됩니다.

---

식 3 은 초기 변수의 값을 증가 시킵니다.

이것 또한 필수 항목은 아니고 옵션입니다.

식 3 은 증가가 아니라 i-- 처럼 감소로 사용할 수 도 있습니다. 또한 반드시 1 의 증분이 아니라 i = i + 100 처럼 사용할 수 도 있습니다.

증분 (increment) 을 루프 내에서 실행하면, 식 3 에서는 생략할 수 있습니다.

---

for ... in 루프 문은 객체 내의 여러 프로퍼티를 루프 시킵니다.

<p id="myForInResult1"></p>

<script>
var myForInResult2 = "";
var myForInResult3 = {carMaker:"현대자동차", carName:"그랜저", carYear:2009};
var myCar;
for (myCar in myForInResult3) {
myForInResult2 += myForInResult3[myCar] + " ";
}
document.getElementById("myForInResult1").innerHTML = myForInResult2;
</script>

---

while 루프는 지정된 조건이 true 인 한 코드 블록을 계속 실행합니다.

while (condition) {
    실행될 코드들;

---

내부의 while 문에서는 별표를 가로방향으로 i 만큼 찍고, 다 찍었으면 외부의 while 문이 줄바꿈 및 i-- 한후 다시 내부의 while 문으로 다음실행을 넘깁니다.

결과적으로 별 10개를 찍은후 줄바꿈하고 다시 9개를 찍고, 또 줄바꿈 이런식으로 i = 0 이 될 때까지 반복됩니다.

<p>내부의 while 문에서는 별표를 가로방향으로 i 만큼 찍고, 다 찍었으면 외부의 while 문이 줄바꿈 및 i-- 한후 다시 내부의 while 문으로 다음실행을 넘깁니다.</p>

<p>결과적으로 별 10개를 찍은후 줄바꿈하고 다시 9개를 찍고, 또 줄바꿈 이런식으로 i = 0 이 될 때까지 반복됩니다.</p>

<button onclick="myAsteriskFunction()">별 만들기</button>

<p id="myAsteriskResult1"></p>

<script>
function myAsteriskFunction() {
var myAsteriskResult2 = "";
var i = 10;
while (i > 0) {
var asterisk = i;

while (asterisk > 0) {
myAsteriskResult2 += "* ";
asterisk--;
}

myAsteriskResult2 += "<br />";
i--;
}
document.getElementById("myAsteriskResult1").innerHTML = myAsteriskResult2;
}
</script>

조건에 사용된 변수를 증감 시키는 코드를 잊어버리면, 루프는 끝나지 않게되고, 브라우저는 동작 불능 (crash) 상태가 됩니다.

---

do ... while 루프는 while 루프의 일종입니다.

do ... while 루프는 조건이 true 인지 체크 하기 전에 코드 블록을 항상 한번은 실행 합니다.

그 다음에 조건이 참인지 체크하고, 참이면 다시 반복합니다.

do {
    실행될 코드들;
}
while (조건);

---

do ... while 문으로 10부터 카운트 다운을 해 봅니다.

do ... while 루프는 조건이 false 인 경우에도, 항상 한번은 실행 됩니다. 

조건을 테스트 하기 전에 코드 블록이 먼저 나오기 때문입니다.

<p>do ... while 문으로 10부터 카운트 다운을 해 봅니다.</p>

<button onclick="myCountDownFunction()">Try it</button>

<p id="myCountDown1"></p>

<script>
function myCountDownFunction() {
var myCountDown2 = ""
var i = 10;
do {
myCountDown2 += "<br>카운트 다운 " + i;
i--;
}
while (i > 0)
document.getElementById("myCountDown1").innerHTML = myCountDown2;
}
</script>

주의할 점은, 조건에 사용된 변수를 증감 시키는 것을 잊으면 안됩니다. 그렇지 않으면 루프는 끝나지 않을 것입니다.

---

for 문과 while 문은 매우 유사합니다. for 문에서 식 1 과 식 3 이 생략되면, while 문과 유사해 집니다.

<p id="forResult"></p>

<p id="whileResult"></p>

<script>
var myCarsArray = ["그랜저", "에쿠스", "제네시스", "산타페"];
var i = 0;
var forText = "";
for (;myCarsArray[i];) {
forText += myCarsArray[i] + "<br>";
i++;
}
document.getElementById("forResult").innerHTML = forText;

var j = myCarsArray.length;
var whileText = "";

while (myCarsArray[j - 1]) {
whileText += myCarsArray[j - 1] + "<br>";
j--;
}
document.getElementById("whileResult").innerHTML = whileText;
</script>

---

[광고] Udemy 동영상 강의로 보기