20201002 TIL for Loop, while Loop

자바스크립트에서는 반복 가능한 객체(Array, Object)를 반복시켜 각 el에 여러 함수를 적용시키거나 적용시킨 새로운 객체를 return 시키거나 할 수 있다.

오늘은 그런 "반복"과 관련된 JavaScript 메소드에 관해 공부해보려고 한다.

가작 대표적인 반복문에는 for, 그리고 while이 있다.

🪀 정해진 횟수를 반복하는 for Loop

for ( 초기화 식 ; 조건식 ; 종결식 ) { 실행시킬 조건 } ;
for ( let i=0; i<5 ; i++) { console.log(i) } ;

- for in

for ( let i in obj ){ };

for in 문은 주로 객체의 순환에서 가장 많이 쓰인다.
반복되는 횟수는 key-value pair의 갯수만큼 반복하게 된다.
i는 객체의 key값을 가지게 되고, obj[i]를 통해 value값에 접근할 수 있게 된다.
for in은 Array에서도 사용할 수 있는데, 대신 array의 el에 접근하는 것이 아닌 "인덱스"에 접근하게 된다.

const arr = ["hello","weCode","hello","World"];
for(let i in arr){ console.log(i) };
// "0","1","2","3"

따라서 Array에서는 사용하지 않을 것을 권장한다.

- for of

for ( let i in arr ){ };

for in이 key값에 접근한다면, for of는 역으로 value에 접근한다 생각하면 좋을 것 같다.
반복하는 횟수는 arr의 el갯수만큼 반복하게 된다. (=arr.length)
for in 과 다르게 for of는 Array에서만 사용 가능하고, Object에서는 사용할 수 없다.
for of를 Object에 적용시키면
"Uncaught TypeError: obj is not iterable" 과 같은 오류 메세지가 나타나게 된다.

🪀 조건에 따라 무한히 반복하는 while Loop

while ( 조건식 ){ 실행문 };
while(true){ alert("까꿍"); };
정말 무한한 까꿍이 알람으로 뜰거고.. 컴퓨터가 죽을 수 있으니 이건 해보지 말자

while문은 조건식의 조건을 먼저 확인 한 수 => Body에 위치한 실행문을 실행시킨다.
조건이 true일 경우 계속에서 실행문을 반복시키고, 조건이 false가 되는 순간 while문을 빠져나와 반복을 종료시킨다.

- do while

do while도 조건식과 Body의 실행문을 가지고 있고다.
또 동일하게 조건이 true일동안 계속해서 실행문을 반복시키다가 조건이 false가 되는 경우 while문을 빠져나온다.
그러나 while과 do while에는 분명한 차이가 존재한다.
바로 "일단 실행하고 조건을 보느냐" 와 "조건먼저 보고 실행하느냐"의 차이이다.

위의 flow chart를 보면 while은 조건을 확인한 후 body의 실행문을 실행시키는 반면, do while은 우선 body의 실행문을 실행시킨 후 조건을 확인해 이후의 실행을 지속할지 확인한다.

참고자료

https://stackoverflow.com/questions/11789901/what-is-the-different-between-for-loop-and-for-in-loop-in-javascript

https://thecodebarbarian.com/for-vs-for-each-vs-for-in-vs-for-of-in-javascript

https://n-log.tistory.com/39

https://www.quora.com/What-is-the-difference-between-while-loop-and-for-loop-What-is-an-example-of-this

https://webclub.tistory.com/166