JavaScript에서 무한 루프 방지

실수로 JavaScript에서 무한 루프를 생성하여 브라우저 충돌을 일으켰습니다. 2022년에 어떻게 이런 일이 가능할까요?

다음 코드를 고려하십시오.

const mightBeZero = 0;
const maxIterations = 100 / mightBeZero;
console.log(`maxIterations: ${maxIterations}`);

for (let i = 0; i < maxIterations; i++) {
  // do costly stuff like appending cloned DOM nodes
}

적어도 CodePen 은 사용자를 보호할 만큼 똑똑해 보이지만 ESLint는 ++ 대신 += 1 를 사용한 것 외에는 비판할 것이 없는 것 같습니다.


무한 루프에도 불구하고 JavaScript에서 0으로 나누기가 Infinity인 반면 다른 많은 프로그래밍 언어에서는 예외DivisionByZero가 발생하는 이유는 무엇입니까?

0으로 나누면 무한대가 되나요?

Miguel T Rivera ・ 2020년 9월 8일 ・ 2분 읽기

#javascript #webdev

그리고 코드에서 handle JavaScript's division by zero properly에 실패한 이유는 무엇입니까?

실패 사슬

내 빠르고 더럽고 순진하고 행복한 경로 코드가 엣지 사례를 구상하지 못했습니다(숨겨진offsetWidth 요소의 너비가 0인지 확인하지 않고 width: auto 사용)

JavaScript에서 0으로 나누기 예외를 발생시키지 못했으나 대신 계산x / 0 = Infinity

JavaScript가 `for (let i=0; i < Infinity; i += 1) 루프 수행을 거부하지 않음

eslint가 경고하지 못했습니다(i++를 i += 1로 "고정"한 후 모든 것이 정상인 것 같습니까?!)

PhpStorm 코드 검사(그렇지 않으면 JavaScript에 대해서도 상당히 스마트함)도 경고하지 않았습니다.

동료가 내 코드를 승인하고 병합했습니다.

또 다른 동료가 제로/인피니티 버그를 유발하는 사례를 추가했습니다.

내 브라우저( Chromium 기반 Vivaldi )에서 Firefox가 사용했던 것처럼 루프를 중지하도록 제안하지 않았습니다(Firefox가 계속 작동하는지 TODO 확인). (개발자 도구에는 중지 옵션이 있는 작업 관리자가 있습니다.)

미리 보기 서버를 중지하고 코드를 수정하여 서버를 다시 시작한 후에도 브라우저에서 계속 동일한 탭을 다시 열고 동일한 캐시된 프런트 엔드 코드를 실행합니다!

솔루션 및 후속 문제

보다 지능적으로 코딩하십시오!
나쁘지는 않지만 to err is human과 같은 오류를 방지한다고 보장할 수 없으며 지능을 높이려면 힘이 필요합니다.

테스트를 작성하고 테스트를 테스트하십시오! mutation testing 과 같은 메타 전략이 있습니다. 문제는 테스트 자체가 아니라 코드를 테스트할 수 있도록 설계하는 방법을 배우는 것입니다.

도구 및 정적 코드 분석은 어떻습니까? 린터가 아무것도 불평하지 않는다면 이것은 나를 그렇게 화나게 하지 않을 것입니다. 그러나 종종 이러한 "인위적으로 지능적인"도구는 잘못된 것에 대해 잔소리함으로써 훨씬 더 도움이 되지 않습니다(작년에 DEV 블로그에 게시한 내 게시물 참조).

브라우저 안전은 어떻습니까? localhost에서 내 자체 무한 루프로 내 브라우저를 중단시키는 것은 절반 정도 나쁘지만 이것이 생산 중인 고객을 대상으로 하는 악의적인 해커 계획의 일부라면 어떻게 될까요? 개발자 도구에 대한 지식이 없는 일반 사용자로서 고유한 브라우저 탭을 종료하거나 JavaScript 프로세스를 중지하는 방법은 무엇입니까?

결의안

더 나은 코딩 방법 배우기

더 많은 테스트를 수행합니다(JavaScript 기능 단위 테스트, 종단 간 웹 애플리케이션 테스트, 테스트 테스트)

.

eslint 문제가 이미 있는 경우를 제외하고 eslint 문제를 엽니다

.

Chromium 문제가 아직 없는 경우 열기

그것에 대해 DEV.to ✔️

에 쓰기