퀴즈!

다음 중 무한 루프는 무엇입니까?

그리고 여러 번 console.log가 인쇄될 것입니다.

A: let 5x3 루프

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

B: var 5x3 루프

for(var i = 0; i < 5; i++){
  for(var i = 0; i < 3; i++){
    console.log(1)
  }
}

C: var 5x5 루프

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

D: let 5x5 루프

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

대답

다음 중 무한 루프는 무엇입니까?
B: var 5x3

여러 번 console.log가 인쇄될 것입니다.
A: let 5x3 - 15회
B: var 5x3 - 무한 시간
C: var 5x5 - 5회
D: let 5x5 - 25회

어떤 답변이 당신을 놀라게 했습니까? 나는 ~였다!

🧐 뭐, 그런데 왜? let 과 var 의 차이점.

< 플래시백 >

주니어 개발자가 메모리 오류를 유발하는 Javascript 코드의 버그에 대해 도움을 요청했습니다. 제 직감은 어딘가에 무한 루프가 있다고 말했습니다.

중첩 루프 중 하나는 나에게 위험 신호로 눈에 띄었습니다.

for(let i = 0; i < 5; i++){
  for(let i = 0; i < 5; i++){
    // some code
  }
}

나는 말했다 – 이봐, 당신은 외부 루프와 내부 루프에 대해 동일한 변수 이름을 사용하고 있습니다. 이것은 무한 루프를 야기할 것입니다.

JD: 어? 어때?

나: 내부 루프가 0으로 재설정i되어 외부 루프가 종료되지 않기 때문입니다. 콘솔에서 시도해 봅시다. 그냥 보는 것이 더 빠릅니다.

놀랍게도 무한 루프가 없었습니다. 다음과 같은 결과를 얻었습니다.


console.log는 25회만 인쇄되었습니다.

나: 음...? 이상하다. (그런 다음 코드가 let 대신 var 를 사용한다는 것을 깨달았습니다.) 어쩌면... 무한 루프는 var 대신 let 를 사용하는 경우에만 발생합니다.
let 를 var 로 변경하고 다시 실행했습니다.


console.log는 5회만 인쇄되었습니다.

우리: 잠깐만요? 왜 5번만 인쇄합니까?

나: ... 아, 그 이유는 이 예제에서는 var 대신 let를 사용하기 때문입니다. let를 사용하면 동일한 이름으로 범위 변수를 안전하게 선언할 수 있습니다. 그러나 var를 사용하여 다른 부모-자식 범위에서 같은 이름을 가진 변수를 선언하면 모두 같은 것을 참조합니다. 따라서 여기서 var 를 사용하면 내부 루프는 외부 루프와 동일한 i를 공유합니다. 즉, 내부 루프가 i를 5까지 세고 종료하면 외부 루프는 내부 ​​루프에 의해 i 카운터가 5로 설정되기 때문에 즉시 종료됩니다.


JD: 오... 알겠습니다. 그러면 i가 3일 때 종료하도록 내부 루프를 설정하면 어떻게 됩니까? 무한 루프를 생성한다고 생각합니까?

나: 알아봅시다.


console.log가 15회 넘게 인쇄되어 브라우저가 다운되었습니다.

우리: 🙌 무한 루프가 발생했습니다!


그리고 지금 var를 let로 변경하면 어떻게 될까요?


console.log는 15회만 인쇄되었습니다.


JD: 좋습니다. 좋습니다. 그러나 var의 사용 사례는 무엇입니까?

나: 아 좋은 질문이네요. 🤔 ...실제로는 없습니다. ES6가 var를 도입한 지금 let에 대한 좋은 사용 사례가 없습니다. var는 우리가 변수를 선언하는 데 사용한 방법입니다. 하지만 변수가 해당 범위를 벗어나는 문제가 있으므로 let가 제안되었습니다. 키워드let의 이름을 정한 이유는 묻지 마세요. 이것이 우리의 eslint가 let보다 var를 시행하도록 구성된 이유입니다. :)

JD: 오! 좋습니다... 이 루프가 메모리 오류를 일으키지 않는다면 무엇이 원인일까요? (그것은 완전히 다른 것으로 판명되었습니다.)



아 돌이켜 생각해보면 우리는 이제 ES6를 잘 사용하고 있습니다.