공부 날짜 : 2021-06-02

참고자료 :

• 인프런 : 풀스택을 위한 탄탄탄 프런트엔드

• Javascript.info

for & for of

for문의 기본 작성법은 아래와 같습니다.

for(초기문; 조건문; 증감문){
    ...
}

먼저 변수의 값을 초기화하고, i++ 증감문 때문에 변수가 1씩 증가하게되고,
i<5; i가 5보다 작을 때까지 증가하며, 값이 같거나 크면 반복문을 빠져나오게 됩니다.
(i<=5;가 되면 같을 때까지 증가하기 때문에 0 1 2 3 4 5가 출력됩니다.)

for(let i = 0; i<5; i++){
    console.log(i);
}

/* 
결과 

0
1
2
3
4

*/

배열 안에 있는 아이템들의 데이터 타입은 상관없습니다.
data.length는 위에 배열로 만들었던 data의 아이템 개수를 구합니다.

const data = ['HTML','CSS','JS']; //문자열 외에 숫자나 불리언도 가능.
for(let i=0; i<data.length; i++){ //data.length : 객체인 data에 있는 아이템 개수를 구함. 
    console.log(data[i]);
}
/* 
결과

HTML
CSS
JS
*/

for of문은 배열 안에 있는 아이템들을 변수로 가져올 수 있습니다.
배열 안에 있는 아이템 'React','Vue','Angular' 가 변수 item에 들어가게 되는 것입니다!

const data02 = ['React','Vue','Angular']; //배열에 있는 아이템들을 for 변수에 가져올 수 있음.
for(let item of data02){
    console.log(item);
}
/*
결과

React
Vue
Angular
*/

for in

const data03 = {
    name:'dave',
    age: 20,
    brand : 'fun-coding',
    get_message: () => '0602'
}

for (let property in data03){ //data03이 가지고 있는 프로퍼티들을 변수에 가져올 수 있음.
    console.log(property); //data03이 가지고 있는 프로퍼티가 4개이므로 4번 반복 수행.
}

for (let property02 in data03){
    console.log(property02, data03[property02]); //프로퍼티의 값을 알고싶은 경우.
}

console.log(Object.entries(data03));
console.log(Object.keys(data03));
console.log(Object.values(data03));

data03이 가지고있는 프로퍼티들 (name,age,brand,get_message) 을 변수 (let property) 에 가져올 수 있습니다.

Object.entries,keys,values

Object.entries : 프로퍼티의 키와 값으로 이루어진 배열을 반환합니다.
ex) [[키,값] ,[키.값]]

콘솔 결과 ▼

Object.keys : 프로퍼티의 키만 있는 배열을 반환합니다.
ex) [키,키,키]

콘솔 결과 ▼

Object.values : 프로퍼티의 값만 있는 배열을 반환합니다.
ex) [값,값,값]

콘솔 결과 ▼

while

다른 프로그래밍 언어에서도 쓰이는 while문도 지원합니다.
w가 5보다 커질때까지 계속 반복을 수행합니다. for문과 마찬가지로, w<=5가 되면 0 1 2 3 4 5가 출력되겠죠?

let w = 0;
while (w < 5){
    console.log(w);
    w++; //증감 연산자를 안쓰면 무한반복.
}

/*
결과

0
1
2
3
4

*/

break & continue

c가 5가 될때까지 반복하는 for문입니다. 원래대로라면, 0 1 2 3 4가 출력되는게 맞는데 이 코드에서는 0 1 2 4가 출력됩니다. 왜 3을 스킵했을까요? 그 이유는, continue때문입니다. continue문은 그 다음 코드를 실행하지 않고 넘어가기 때문에 continue 바로 밑에 있는 console.log(c); 를 실행하지 않고 위로 올라가서 for문을 다시 실행 한 것입니다.

for(let c=0; c < 5; c++){
    if(c === 3){ //만약 c가 3이면?
        continue; //다음 코드 스킵. 
    }
    console.log(c);
}

break문은 반복문 자체를 빠져나오기 때문에, if(c === 3) 만약 c가 3이되면 break for문을 빠져나온다는 뜻입니다. 반복문 자체를 빠져나오니까 밑에 있는 console.log(c); 도 당연히 실행이 안되는 것입니다. 결과는 0 1 2가 출력됩니다.

for(let c=0; c < 5; c++){
    if(c === 3){ //만약 c가 3이면?
        break; //for문 빠져나오기.
    }
    console.log(c);
}