[JavaScript | ES6 ] 루프와 반복 ( for ...in 문, for...of문 차이점)

루프는 어떤 것을 반복적으로 시행할 때 빠르고 간편한 방법을 제공합니다. 

 

🍕반복문 (Loop)

-다양한 종류가 있음 

-기본적으로 하는 일은 모두 같다.(한 동작을 여러 번 반복, 0회 반복하는 것도 가능) 

 

🍕JS가 지원하는 반복문 종류 

• for 문
• do...while 문
• while 문
• 레이블 문
• break 문
• continue 문
• for...in 문
• for...of 문

🍕for문(기본)

for(변수 선언 초기값 설정; 조건문; 증감문){
    조건이 참인 동안 실행할 명령문(문장); 
}

//for문 무한루프 
for(;;){
 명령문
}

• for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다. // C의 반복문과 비슷
• for문의 초기문; 조건문; 증감문 은 생략이 가능하며 생략할 경우 무한루프 

▶작동 원리 

1. 초기화 구문인 초기문이 존재한다면 초기문이 실행된다. 보통 1이나 반복문 카운터로 초기 설정이 된다. 변수로 선언 되기도 한다. 
2. 조건문은 조건을 검사한다. 만약 조건문이 true라면, 그 반복문은 실행된다. false라면, 그 for문은 종료된다. 해당 조건문이 생략된 상태라면 조건문은 true로 간주된다. 
3. 문장이 실행된다. 많은 문장을 실행할 경우엔, { }을 써서 문장들을 묶어준다. 
4. 갱신 구문인 증감문이 존재한다면 실행되고 2번째 단계로 돌아간다.  

실행 순서: 초기문(1번만) -> 조건문 -> 문장 -> 증감문 // 2, 3, 4 를  조건문이 false일 때까지 반복합니다.

---

🍕while 문

초기식;
while(조건식){
      명령문;
      증감식(혹은 조건식의 상태를 바꿔주는 코드);
}

while문은 조건식이 참일 때 실행되는 반복문이다. 먼저 참, 거짓 판단을 한 뒤 while문 안의 명령문을 실행한다. 

 

예시 

let n = 0;
let x = 0; // 변수 선언 및 초기값 세팅
while( n < 3){
 n++; // 증감식
 x += n; // n을 x에 계속 더함, ( x = x + n 과 같음) 
}
// 첫번째 반복: n =1 x =1;
// 두번째 반복: n =2 x =3;
// 세번째 반복: n =3 x =6
// 3번째 반복 후, n < 3 조건이 false 가 되므로 반복 종료

 

 

for 문과 while문은 서로 변환 가능하다. 

조건식에는 비교 or 논리 연산식이 주로 오는데, 조건식이 false 가 되면 반복행위를 멈추고 while문을 종료
for문은 모든 것을 하나에 넣는 느낌이라면 while문은 초기식빠져있고 증감식은 실행문에 들어있는 느낌?

 

🐱‍👤for 과 while 차이점

for문과 while문은 같은 반복문이지만 사용 용도에 있어서 차이점을 가짐 
* while이나 for나 내부적으로 루프를 도는 것은 비슷하다. 성능 차이 x

for문 사용 

• 반복 횟수가 정해진 경우(내가 반복횟수를 정확히 알고 있을 때 언제까지 실행)
• 배열과 함께 주로 많이 사용

while문 사용 

• 무한 루프나 특정 조건에 만족할때까지 반복(언제까지 반복해야할 지 모를 때)해야 하는 경우
• 주로 파일을 읽고 쓰기, 혹은 키보드나 마우스의 이벤트 처리에 사용

---

🍕do ... while 문

do ...while문은 특정한 조건이 거짓으로 판별될 때까지 반복한다. 

do
  문장
while (조건문);

• 조건문을 확인하기 전에 문장을 한번 실행한다.(do 부분) 
• 많은 문장을 실행하기 위해선 { }중괄호를 써서 문장들을 묶어준다. (do 부분에서)
• 만약 조건이 참이라면, 해당 문장은 다시 실행된다. 매 실행 마지막마다 조건문이 확인된다. 만약 조건이 거짓일 경우, 실행을 멈추고 do....while문 바로 아래에 있는 문장으로 넘어간다. 

예시

- 다음 예제에서, do 반복문은 최소 한번은 반복된다. 그리고 i가 5보다 작지 않을 때까지 계속 반복됨

do {
  i += 1;
  console.log(i);
} while (i < 5);

 

 

🐱‍👤while 과 do...while의 차이점 

while과 do-while의 차이점은 조건식을 먼저 검사하느냐 나중에 검사하느냐 차이
do...while문

• 명령문을 먼저 실행하고 그 다음 조건식을 판별하기 때문에 무조건 1회는 조건에 상관없이 실행된다. 

while문

• 조건식을 먼저 보고 반복할 코드를 실행하기 때문에 조건식에 따라 한번도 실행되지 않을 수 있습니다.

 

---

 

🍕break 문 &  continue 문

 

🌞break 문 

break문은 반복문, switch문 레이블 문과 결합한 문장을 빠져나올 때 사용한다. 

• 레이블 없이 break문을 쓸 때: 가장 가까운 while, do-while, for, switch문을 종료하고 다음 명령어로 넘어간다. 
• 레이블 문을 쓸 때: 특정 레이블 문에서 끝난다.

▶break문 문법

//1
break;
//2
break[레이블];

• 첫번째 형식은 가장 안쪽의 반복문이나 switch문을 빠져나온다. 
• 두번째 형식은 특정한 레이블 문을 빠져나온다. 

예시1)

for (let i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

예시2 )

let x = 0;
let z = 0
labelCancelLoops: while (true) {
  console.log("Outer loops: " + x);
  x += 1;
  z = 1;
  while (true) {
    console.log("Inner loops: " + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

🌞continue 문

 

continue문은 while, do-while, for, 레이블 문을 다시 시작하기 위해 사용될 수 있음

• 레이블 없이 continue를 사용하는 경우, 가장 안쪽의 while, do-while, for문을 둘러싼 현재 반복을 종료하고, 다음 반복으로 루프의 실행을 계속한다. break 문과 달리 continue문은 전체 루프의 실행을 종료하지 않음  -> 즉, 현재 반복을 종료한다는 것은 어떤 경우(조건식이라든가)에 부합했을 때 해당 연산을 하지않고 그냥 넘긴다는 것
• 레이블과 함께 continue를 사용하는 경우, continue는 그 레이블로 식별되는 루프 문에 적용된다. 

▶continue 문법

//1
continue;
//2
continue label;

예시1) 

let i = 0;
let n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}
// i= 0 -> i = 1,  n = n + i , n = 0 + 1, n = 1
// i = 1-> i = 2, n = 1 + 2 -> n = 3 
// i = 2 -> i = 3 continue(얘는 패스)
// i = 3 -> i = 4  n = 3 + 4 -> n = 7
// i = 4 -> i = 5 n = 7 + 5 -> n = 12

-> i가 3일때는 n += i를 하지않고 그냥 넘긴다. 

n의 값은 1,3,7,12를 취한다. 

 

🍕for ... in 문(객체 순환)

for..in 문은 객체의 열거 속성을 통해 지정된 변수를 반복한다. 

각각의 고유한 속성에 대해 JS는 지정된 문을 실행합니다.

• 객체의 열거 가능한 '속성들'을 순회할 수 있도록 도와준다. 
• 객체의 key값에 접근 가능, value값에는 직접 접근 불가 
• 모든 객체에서 사용 가능
• for...in문은 순서가 보장되지 않는다. 그래서 배열에 사용하면 좋지 않음
  • for...in should not be used to iterate over an Array where the index order is important.

for (variable in object) {
  statements
}

예시) 

function dump_props(obj, obj_name) {
  let result = "";
  for (let i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

-> 다음 함수는 객체와 객체의 이름을 함수의 인수로 취한다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환한다. 

🐱‍👤배열에 for..in을 적용하는 것은 바람직하지 않다.

-배열 요소를 반복하는 방법으로 for...in를 사용하도록 유도될 수도 있지만, for...in문은 숫자 인덱스에 추가하여 사용자 정의 속성의 이름을 반환합니다. 따라서 사용자 정의 속성 또는 메서드를 추가하는 등 Array객체를 수정하게 되면, 배열 요소 외에도 사용자 정의 속성을 통해 for...in문을 반복하기 때문에, 배열을 통해 반복할 때는 인덱스와 전통적인 for 루프를 사용하는 것이 권장됩니다. -> for...in은 배열에 쓰지말고 배열은 for 루프 사용해라 아니면 for...of문(ES6) 사용

 

Q. 배열에서 for...in은 성능을 하락시킨다?
A. for ... in은 성능을 하락시킨다는 의미보다는 객체 내의 프로퍼티 속성 중 enumerable: true인 모든 프로퍼티를 순회하여 검색하는 용도이기 때문에 적합하지 않습니다. 최근의 그린 브라우저는 배열에 대해 for ... in을 사용해도 오류가 나지 않지만, Old IE의 경우에는 배열 인덱스 외에 검출되는 프로퍼티가 있기 때문에 undefined 와 같은 오류가 발생합니다. 따라서, 배열에 대해서는 for ... in 구문 보다는 for를 사용하거나 ES6의 forEach 함수를 사용하는 것을 권장합니다. 

 

🍕for ... of 문 (배열값 순환)

for ... of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체(배열, Map, Set, 인수 객체 등을 포함)를 통해 반복하는 루프를 만듭니다. 

• Object는 해당되지 않으며 Iterable 객체만 가능하다. + String 문자열에도 적용할 수 있다.
• For ...of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문이다. 해당 컬렉션 객체가 [Symbol.iterator]속성을 가지고 있어야만 합니다(직접 명시 가능).
• Iterable 객체가 아니면 TypeError를 발생시킨다. 

for (variable of iterable) {
  statement
}

🌞for...of루프와 for...in루프의 차이점

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

for...in의 경우 속성 이름을 통해 반복을 하고 for ...of는 속성 값을 통해 반복합니다. 

즉, for...in의 i는 속성 이름(key)을 뜻하고 for...of의 i는 속성 값(value)을 뜻합니다. 

-> for in 문은 key를 리턴(배열의 경우 index) / for...of문은 value를 리턴