04 조건문

• 조건에 따라 코드를 실행하는 구문

04-01 if else 조건문

• if: 조건이 true일 때 실행
• else if: (if에서 false인 것들 중에서) 조건이 true일 때 실행
• else: 모든 조건에서 false일 때 실행

// if문의 4가지 형식
// 1. 단일 if문
if (true) {
  console.log("true입니다.");
}
// 2. if else문
if (false) {
  console.log("true입니다.");
} else {
  console.log("false입니다.");
}
// 3. if else if문
if (false) {
  console.log("조건 1이 true입니다.");
} else if (true) {
  console.log("조건 1이 false이고 조건 2가 true입니다.");
} else {
  console.log("조건 1이 false이고 조건 2도 false입니다.");
}
// 4. 중첩 if문
if (true) {
  if (false) {
    console.log("조건 1-1이 true입니다.");
  } else if (false) {
    console.log(
      "조건 1-2이 false이고 조건 1-2가 true입니다.",
      "<br />"
    );
  } else {
    console.log(
      "조건 1은 true이지만 하위 조건이 false입니다.",
      "<br />"
    );
  }
} else {
  console.log("조건 1이 false입니다.");
}

// 연습문제
//1. 1~10까지의 정수중에 하나를 prompt로 입력받고,
//   짝수이면, "짝수입니다"
//   홀수이면, "홀수입니다"
// 1~10외의 수이면, "그외의 수입니다."
//2. 1~10까지의 정수중에 하나를 prompt로 3개 입력받고,
//  총합을 출력하시오.

let num1 = prompt("1 ~ 10 중의 정수 하나를 입력하세요.");
if (num1 < 1 || num1 > 10 || parseFloat(num1) > parseInt(num1)) {
  alert("잘못 입력하였습니다.");
} else if (num1 % 2 == 0) {
  alert(num1 + "은 짝수입니다.");
} else {
  alert(num1 + "은(는) 홀수입니다.");
}

let num2 = Number(prompt("1 ~ 10 중의 정수 하나를 입력하세요."));
if (num2 < 1 || num2 > 10 || parseFloat(num2) > parseInt(num2)) {
  alert("잘못 입력하였습니다.");
} else {
  let num3 = Number(prompt("1 ~ 10 중의 정수 하나를 입력하세요."));
  if (num3 < 1 || num3 > 10 || parseFloat(num3) > parseInt(num3)) {
    alert("잘못 입력하였습니다.");
  } else {
    let num4 = Number(prompt("1 ~ 10 중의 정수 하나를 입력하세요."));
    if (num4 < 1 || num4 > 10 || parseFloat(num4) > parseInt(num4)) {
      alert("잘못 입력하였습니다.");
    } else {
      alert("세 수의 합은 " + (num2 + num3 + num4) + "입니다.");
    }
  }
}

04-02 조건부 연산자(A?B:C)

A?B:C(조건부 연산자): A(조건)이 true일 때 B 실행, false일 때 C 실행

console.log(true?"true입니다.":"false입니다.");
// 아래처럼 2개 이상의 조건부 연산자는 가독성 떨어짐(더티 코드)
console.log(true?false?"1 true입니다.":"1 false입니다.":true?"2 true입니다.":"2 false입니다.");
console.log(false?false?"1 true입니다.":"1 false입니다.":true?"2 true입니다.":"2 false입니다.");

04-03 switch(case, default) 조건문

• switch: 비교할 값 설정
• case: 값 비교
• break: 구문 중단 및 탈출(반복문에서도 사용)
• default: 해당하는 case 없을 경우 실행

// switch문 형식
let num = 20;
switch (num) {
  // case: === 와 같음(num === 10)
  case 10:
    console.log("10입니다.");
  // break: 구문을 멈추고 빠져나감. 없으면 switch문 계속 진행행
    break;
  case 20:
    console.log("20입니다.");
    break;
  // default: else와 같은 역할. 생략 가능.
  default:
    console.log("그 외의 수입니다.");
}
// "fall-through"현상: break 부재 시 다른 case도 실행되는 현상
// 첫 true 이후로 전부 true로 인식
switch (num) {
  case 10:
    console.log("10입니다.");
  case 20:
    console.log("20입니다.");
  case 30:
    console.log("30입니다.");
  default:
    console.log("그 외의 수입니다.");
}

// 문자열 사용
let str1 = "10";
switch (str1) {
  case 10:
    // case는 `===`로 비교
    console.log("number 10입니다.");
    break;
  case "10":
    console.log("string 10입니다.");
    break;
}

// boolean 사용
let isLogin = false;
switch (isLogin) {
  case true:
    console.log("true입니다.");
    break;
  case false:
    console.log("false입니다.");
    break;
}

05 반복문

05-01 while 반복문

• while: 조건이 true이면 반복 실행 false면 중단
• continue: 반복문 중단하고 다음 루프(반복) 시작
• break: 반복문 중단 및 탈출
• do: 실행 후 조건 판단(최소 1회 실행)

// 2의 배수 찾기
let res = [];
let num = 1;
while (num < 11) {
  let target = num;
  console.log("target: " + target);
  if (target < 3) {
    num += 1;
    target === 2 ? res.push(target) : ""
    console.log("continue 실행");
    continue;
  }
  let cnt = 0
  while (target % 2 === 0) {
    cnt += 1
    target = parseInt(target / 2);
    if (target === 2) {
      res.push(num);
      console.log("break 실행");
      break;
    }
  }
  console.log(`중첩 반복문 ${cnt} loop 실행`);
  num += 1;
  console.log("");
}
console.log(res);

// do while
let stars1 = 5;
do {
  document.writeln("*");
  stars1--;
} while (stars1 > 0);
let stars2 = 5;
while (stars2 > 0) {
  document.writeln("☆");
  stars2--;
}

// do 실행 후 조건 확인
let stars3 = 0;
do {
  document.writeln("*");
  stars3--;
} while (stars3 > 0);

let stars4 = 0;
while (stars4 > 0) {
  document.writeln("☆");
  stars4--;
}

05-02 for 반복문

• for: 조건 혹은 변수를 이용하여 그 조건이나 변수의 값에 따라 반복문 완료

05-02-01 조건에 따른 for문

• for(초기화ㅣ 조건식; 증감문): 조건이 참일 때 수행되는 반복적 실행문

// for(초기화ㅣ 조건식; 증감문) {
//   조건이 참일 때  수행되는 반복적 실행문
// }
// 초기화(1) -> 조건식(2) -> 실행문(3) -> 증감문(4)
// -> 2 3 4 2 3 4 -> 조건이 false일 때 빠져나감.
console.log("반복문 시작")
for (let i = 0; i < 5; ++i) {
  console.log(i)
}
// 증감자 변경
console.log("반복문 시작")
for (let i = 0; i < 5; i++) {
  console.log(i)
}
// i++과 ++i가 같은 이유는
// for문의 순서가 초기화 -> 조건식 -> 실행문 -> 증감문 -> 조건식부터 반복
// 순이기 때문에 증감이 완료된 후 조건식을 비교하여 결과가 동일한 것.
console.log("반복문 시작")
for (let i = 1; i < 5; i++) {
  console.log(i)
}
//증감문 변경
// `i + 2`로 할 경우 i의 값이 변하지 않기에 무한 루프
console.log("반복문 시작")
for (let i = 0; i < 10; i += 2) {
  console.log(i)
}
// 조건식 변경
console.log("반복문 시작")
for (let i = 1; i < 10; i = i + 2) {
  console.log(i)
}

05-02-02 변수(배열 등)를 이용한 for문

• for in: 변수의 인덱스를 추출
• for of: 변수의 값을 추출

// for in: 변수 인덱스 추출 및 할당
let arr = [10, 20, 30, 40, 50];
console.log("반복문 시작");
for (let i in arr) {
  console.log(i, typeof i, arr[i]);
}
// for of: 변수 값 추출 및 할당
console.log("반복문 시작");
for (let i of arr) {
  console.log(i, typeof i);
}

let str = "67890"
console.log("반복문 시작");
for (let i in str) {
  console.log(i, typeof i, str[i]);
}
// for of: 변수 값 추출 및 할당
console.log("반복문 시작");
for (let i of str) {
  console.log(i, typeof i);
}

// 객체의 반복문
let obj = {
  key5: 10,
  key4: 20,
  key3: 30,
  key2: 40,
  key1: 50,
};
console.log("반복문 시작");
for (let i in obj) {
  console.log(i, typeof i, obj[i]);
}
// TypeError: obj is not iterable 발생
// for (let i of obj) {
//   console.log(i, typeof i);
// }

06 예외 처리

• 구문 오류(syntax error): 문법 오류

• 예외(exception): 코드 실행 중간에 발생하는 오류

• 예외 객체(exception object): 예외와 오류 정보 확인할 수 있게 해주는 객체

• 예외 처리(exception handling): 예외를 처리하는 것

  • 기본 예외 처리: 조건문으로 예외 처리.

  • 고급 예외 처리: try, catch, finally로 예외 처리. 기본 예외 처리보다 살짝 느림.

    • try: 구문 안에 오류 발생할 경우 catch로 넘김.
    • catch: try에서 오류 발생 시 구문 실행
    • finally: catch 작동 여부 무관 작동
    • throw: 사용자 정의 오류 발생

    ※ SyntaxError처럼 코드 실행 전 발생 오류는 try로 잡을 수 없음

// 기본 예외 처리
let num = prompt("양수 입력하세요.");
if (parseFloat(num) > 0) {
  console.log("양수 " + num + "을(를) 입력하였습니다.");
} else {
  console.log("양수가 아닙니다.");
}
// 고급 예외 처리(try, catch, finally): 조건문보다 미세하게 느림
try {
  notExist; // 존재하지 않는 변수
} catch (exception) {
  // exception: 예외 객체. 예외 객체 선언 없이 바로 예외 처리 구문 사용 가능
  console.log(exception.name);
  console.log(exception.message);
  console.log("오류 발생으로 catch 실행");
} finally {
  console.log("오류 발생 여부 관계 없이 실행");
}
try {
} finally {
  console.log("오류 발생 여부 관계 없이 실행");
}
try {
  // throw: 값을 반환
  throw "throw";
} catch (exception) {
  // 오류 객체 정보 없음
  console.log(exception.name);
  console.log(exception.message);
}
try {
  // throw new [Error]: 오류 객체를 반환. TypeError 등 구체적 사용 가능
  // Error 종류: Error, SyntaxError, ReferenceError, TypeError, RangeError, EvalError, URIError
  throw new Error("throw new Error");
} catch (exception) {
  // 오류 객체 정보 있음
  console.log(exception.name);
  console.log(exception.message);
}

// 특정 예외만 처리
try {
  // throw new TypeError("TypeError occurred");
  throw new ReferenceError;
} catch (exception) {
  if (exception instanceof TypeError) {
    console.log(exception.name + ": " + exception.message);
  } else {
    throw exception;
  }
}

• 오류 정리(ChatGPT 응답**

에러 타입	설명
Error	일반적인 오류 객체입니다. 다른 구체적인 오류 객체들이 모두 Error를 상속받습니다.
SyntaxError	문법적으로 잘못된 코드가 있을 때 발생하는 오류입니다. JavaScript 문법을 위반한 경우에 발생합니다.
EvalError	eval() 함수와 관련된 오류입니다. eval()을 사용할 때 발생할 수 있는 오류입니다.
RangeError	숫자나 값이 허용된 범위를 벗어날 때 발생하는 오류입니다.
ReferenceError	존재하지 않는 변수나 객체를 참조하려고 할 때 발생하는 오류입니다.
TypeError	값이 잘못된 타입일 때 발생하는 오류입니다. 예를 들어, null 또는 undefined에서 메서드를 호출하려고 할 때 발생할 수 있습니다.
URIError	encodeURI() 또는 decodeURI()와 같은 URI 관련 함수에 잘못된 인수를 전달할 때 발생하는 오류입니다.
InternalError	JavaScript 엔진 내부에서 발생한 오류입니다. 일반적으로 사용자가 이 오류를 처리할 필요는 없습니다.
AggregateError	여러 오류를 묶어서 하나의 오류 객체로 처리할 수 있는 오류입니다. 주로 Promise.all()과 관련된 오류로, 여러 개의 오류를 한 번에 처리할 때 사용됩니다.
SecurityError	보안 정책 위반으로 인해 발생하는 오류입니다. 예를 들어, 동일 출처 정책(CORS) 등을 위반하는 경우에 발생할 수 있습니다.

출처: 한국경제신문 K-Digital Training - toss bank
첨고 서적:
윤인성 지음, 혼자 공부하는 자바스크립트, 한빛미디어, 2021년
고경희 지음, Do it! HTML+CSS+자바스크립트 웹 표준의 정석, 이지스퍼블리싱, 2024년