[Tamwood_JS_Assignment] Fundamentals of Web Development 8.5 Loops

Yunju·2024년 10월 5일

Loops

Test Your Knowledge #2

Modify your results from previous Test Your Knowledge (or create a copy of previous version) and implement the following functionality.
Requirement :
1. Display an error message to the console if the user input is not a valid number.

let billTotal = prompt("Please enter the total bill : ");

//string --> float
billTotal = parseFloat(billTotal);

// 유효한 숫자인지 확인
if (isNaN(billTotal)) {
  // 숫자가 아닌 경우 콘솔에 오류 메시지 출력
  console.error("Error: Please enter the number");
} else {
  
  const tip = 0.1;
  let tipTotal = billTotal * tip;

  console.log(`For bill of ${billTotal} the tip should be ${tipTotal}`);
}

8.5.1 While and do...while Loops

  • One must be sure that the variables that make up the condition are updated inside the loop (or elsewhere) to avoid an infinite loop!

8.5.2 For Loops

  • For loops combine the common components of a loop—initialization, condition, and postloop operation—into one statement.
  • for...in vs for...of
    • for...in 루프: 객체의 열거 가능한 속성(enumerable properties)을 반복할 때 사용됩니다. 객체의 속성 이름(key)을 반복하는데 유용합니다.
let obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key);  // "a", "b", "c" 출력
}
  • for...of 루프: ES6부터 도입된 반복문으로, 반복 가능한(iterable) 객체(예: 배열, 문자열, Map, Set 등)를 순회할 때 사용됩니다. 각 요소의 값을 반복합니다.
let arr = [10, 20, 30];

for (let value of arr) {
  console.log(value);  // 10, 20, 30 출력
}

8.5.3. infinite loops

1. 무한 루프란?

  • 무한 루프(Infinite loop): 반복문이 종료되지 않고 계속해서 실행되는 상황을 의미.
    • 주로 while 또는 for 반복문에서 발생.
    • 조건이 항상 참(true)으로 평가될 때 발생하며, 종료 조건을 만족하지 못하는 경우가 원인.

2. 무한 루프의 결과

  • 자바스크립트는 클라이언트 측에서 실행되기 때문에, 무한 루프가 발생하면 사용자의 브라우저가 멈춘 것처럼 보일 수 있음.
  • 브라우저가 멈추는 현상: 스크립트가 끝없이 실행되면 브라우저가 중단되거나 응답하지 않는 것처럼 보임. 이를 사용자는 "브라우저가 멈췄다"라고 인식할 수 있음.

3. 브라우저의 대처 방식

  • 경고 메시지: 스크립트가 너무 오래 실행되면, 브라우저는 사용자가 직접 중지할 수 있도록 경고 메시지를 표시할 수 있음.
  • 스크립트 강제 종료: 일부 브라우저는 특정 시간이 지나도 스크립트가 끝나지 않으면, 스크립트를 자동으로 종료하여 무한 루프 문제를 해결하려고 시도함.

4. 무한 루프 예시 (문제 발생 코드)

let count = 0;

while (count < 5) {
    console.log("이 코드는 끝나지 않습니다.");
    // count가 증가하지 않아 조건이 항상 true로 남음 -> 무한 루프 발생
}
  • 이 코드에서는 count가 증가하지 않기 때문에, 조건인 count < 5가 항상 참으로 남아 무한 루프에 빠짐.

5. 무한 루프 방지 방법

  • 루프 제어 변수 업데이트: 루프 내부에서 제어 변수를 적절하게 업데이트해야 함.
  • 종료 조건 설정: 반복문이 적절한 시점에서 종료될 수 있는 조건을 명확히 설정해야 함.

6. 올바른 루프 예시

let count = 0;

while (count < 5) {
    console.log("Count is: " + count);
    count++;  // count가 매 반복마다 1씩 증가함 -> 조건이 참에서 거짓으로 변할 수 있음
}
  • count++로 제어 변수를 매 반복마다 업데이트하여, 일정 시점에서 종료 조건을 만족시킴.
  • 이 코드는 count가 5가 되면 반복이 종료되므로, 무한 루프가 발생하지 않음.

8.5.4. Errors Using Try and Catch

  • 자바스크립트는 런타임 오류를 만나면 예외를 발생시킵니다.
  • try...catch 블록을 사용하면 이러한 예외를 처리하여 프로그램의 중단을 방지할 수 있습니다.
  • try 안에서 오류가 발생하면 catch 블록에서 오류를 처리하여, 프로그램이 안전하게 계속 실행될 수 있게 합니다.
try {
   nonexistantfunction("hello");
}
catch(err) {
   alert ("An exception was caught:" + err);
}
  • try...catch는 자바스크립트 내장 오류만 처리하는 데 사용되는 것이 아니라, 개발자가 직접 사용자 정의 오류를 던지고 처리할 때도 사용할 수 있습니다.
if (x<0) {
   throw "smallerthan0Error";
}

0개의 댓글