21_[vanillajs]반복문

반복문

• 특정 작업을 반복적으로 실행할 때 사용
• 특정 조건이 만족되는 동안에 구문이 실행되고, 조건이 어긋나면 끝나게 되는 과정으로 실행됨(반복문이 끝나지 않는 경우는 무한루프!)

for 문

for(let 반복자=초기값; 조건문; 증감자){
//...
}

• let을 사용하는 이유는 값을 변경해야하기 때문!

for(let i = 10; i > 0; i-=2){
    console.log(i);//10 8 6 4 2
}

• 이렇게 for문은 증감자에 따라서 처음부터 찬찬히 반복할 수 있다는 점에서 배열과 관련된 반복된 작업도 수행이 가능하다!

const names=['멍멍이','야옹이','멍뭉이'];
for(let i = 0; i < names.length; i++){
    console.log(names[i]);//멍멍이 야옹이 멍뭉이
}

while 문

• 괄호 내부의 조건이 true인 동안에만 실행되는 반복문
• 대부분 while문은 숫자를 비교할 때 보다 조건을 비교할 때 보다 가치있음(while 문의 마지막 예제처럼!)

while(조건식){
	//...
}

let i = 0;
while(i < 10){
    console.log(i+=2);//2 4 6 8 10
}

let i = 0 ;
let isFun =false;

while(!isFun){
    console.log(i);
    i++;
    if(i === 30){
        isFun = true;
    }
}//0 1 2 3 ... 29

---

for..of 반복문과 for..in 반복문

1. for … of 반복문

[Usage]

for(let 반복자이름 of 배열이름){
	//반복자에는 배열의 x번째 요소의 값이 들어가 있음
}

(예시)

const numbers=[10,20,30,40,50];

for(let iter of numbers){
    console.log(iter);//10 20 30 40 50
}

• for of 반복문은 배열안의 값을 순차적으로 접근해서 사용할 수 있도록 도와줌!
• 위의 예제는

for(let i = 0; i < numbers.length;i++){
}

와 동일한 기능을 한다! 참고로!! 배열의 내장 함수 중에는 for..of 나 위의 for문의 케이스(배열 크기만큼 반복) 함수가 존재!

---

객체를 배열로 바꾸어주는 방법

1. Object.keys(객체명) : 객체의 key만 배열로 만들어줌
2. Object.values(객체명): 객체의 value만 배열로 만들어줌
3. Object.entries(객체명): (key,value)쌍이 배열로 만들어짐

const doggy={
    name:'멍멍이',
    sound:'멍멍',
    age:2
};
console.log(Object.keys(doggy));// ["name", "sound", "age"]
console.log(Object.values(doggy));// ["멍멍이", "멍멍", 2]
console.log(Object.entries(doggy));
/**
 * 0: (2) ["name", "멍멍이"]
1: (2) ["sound", "멍멍"]
2: (2) ["age", 2]
 */

1. for…in 반복문

• 주로 객체에 대한 반복문에서 사용됨

for(let key in doggy){
    console.log(key);
    /*
    객체의 key값만 출력됨

    다만, 반복자가 key가 아닌 value였어도
    동일하게 key값만 반복됨!
    */
}

위의 경우에서는 반복자를 통해서 키값만 얻을 수 있었는데,

객체[키값]을 통해서 value값을 얻을 수 있게 된다!

for(let key in doggy){
    console.log(`${key}:${doggy[key]}`);
    /**
     * name:멍멍이
     * sound:멍멍
     * age:2
     */
}

---

continue와 break

• continue: 다음 루프를 돌도록 하는 것
• break: 반복문을 벗어나는 것

for(let i = 0; i < 10; i++){
    if(i > 5){
        break;
    }
    console.log(i);
}//0 1 2 3 4 5

for(let i = 0 ; i < 10; i++){
    if(i < 3){
        continue;
    }
    console.log(i);
}//3 4 5 6 7 8 9

• for, for.. of, for..in, while 에서 모두 사용 가능