공부 날짜 : 2021-06-02
참고자료 :
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);
}