반복문 종류 (JS) (loop)

• for문 - for(초기화(1번);조건식(2번);증감문(3번)) {4번}

  • 순서 : 1번 -> 4번 -> 3번 -> 2번 조건 확인 -> 4번 -> 3번 ->.....

let sum; // sum을 선언만 해준다. 
for (let i = 0; i <= 10; i++) {  // i++는 i = i + 1과 같다. 
  sum += i;  // sum += i 는 sum = sum + i와 같다. 
}
  console.log(sum); // 55 (0 + 1 + 2 + ... 10) 
// let i = 0으로 i를 초기화 해줬다. 
// i <= 10으로 i가 10일 때까지 계속 for문이 돌아간다. 
// for 문 내의 sum += i가 실행되면 자동으로 i++ 해준다. 

• while문 - 초기화, 증감문은 따로 두고, 조건식만 괄호 안에 넣어준다.

let sum; // sum 선언만 해준다. 
let i = 0;  // 초기화를 밖에서 해준다. 
while(i <= 10) {  // 괄호 안에 조건식만 넣어준다. 
  sum += i;  
  i++;  // 증감문 
}
  console.log(sum); // 55 

• for ~ in & for ~ of문 차이점.

차이점 1 : for...in은 배열, 객체에서 iterate가능. for..of는 배열, map, set등에서만 가능하다. (객체 x)

let food = {  // food는 객체 타입.
  pork : '1';
  beef : '2';
}
for (let i in food) {  // for ~ in 구문 사용. 
  console.log(food[i]); // "1", "2"
}
for (let i of food) {  // for ~ of 구문에서는 객체가 에러를 보여줌. 
  console.log(i); // TypeError : food is not iterable
}

차이점 2: 배열이 있을 경우, for...in은 배열의 property name을 iterate하고 for..of는 배열의 property value를 iterate한다.

let food = ['pork','beef','lamb']; // food는 배열 타입. 
for (let key in food) {
  console.log(key); // "0","1","2" 
}
// food라는 배열의 키 값을 iterate하는데 배열의 키 값은 인덱스 값과 같으므로 위와 같은 결과 나온다. 
for (let value of food) {
  console.log(value); // "pork","beef","lamb"
}
// food라는 배열의 value 값을 iterate함으로 위와 같은 결과 나온다. 

결론:
1. array, object를 모두 활용하고 배열의 property name만을 얻고자 한다면 for...in을 쓰는 것이 안전하다.
2. array만 사용하고 배열의 property value값을 얻고자 한다면 for...of를 사용하자.

참고하면 좋을 링크

for 반복문 => 검색어 : mdn for javascript
for...in => 검색어 : mdn for in javascript
for...of => 검색어 : mdn for of javascript
for...in & for...of difference => 검색어 : mdn difference between for in for of javascript