JS 공식문서 스터디 3. 제어흐름 및 오류처리 ~ 루프와 반복

CHO WanGi·2025년 9월 3일

Javascript

목록 보기
14/20

제어 흐름과 오류 처리

모든 JS 표현식은 명령문이다.

  • 블록 문
    명령문을 그룹으로 묶는 것.
    한 쌍의 중괄호로 감싸는 것
{
  statement_1;
  statement_2;
  ⋮
  statement_n;
}

이러한 블록문은 제어 흐름 명령문(if, for, while...) 에 많이 사용

조건문

if ... else 문

if (condition) {
  statement_1;
} else {
  statement_2;
}

if (condition_1) {
  statement_1;
} else if (condition_2) {
  statement_2;
} else if (condition_n) {
  statement_n;
} else {
  statement_last;
}

저 Condition 안에는 true 와 false로 평가 가능한 아무 표현식이 다들어갈 수 있다.

Falsy 와 Truthy

false, undefined, null, 0, NaN, ""(빈 문자열)

위 값들은 Falsy 한 값이라 false로 평가되고 나머지 값들은 true 로 평가된다.

  • Ex. [] == 0 은 왜 true 일까?

일단 빈 배열은 Truthy 이고, 0은 Falsy 니 false가 나올줄 알았는데 true가 나왔다.

  1. 일단 동등비교 연산자를 활용
    == 은 타입이 다를 경우 내부적으로 변환 과정을 거치게 된다.
    객체(array) vs 숫자 비교라서 변환과정에 돌입!
    객체는 원시값으로 변경되고, [].toString() 을 해보면 ""(빈 문자열)로 변환된다.

따라서 ""와 0 은 둘다 Falsy라 true가 나오는 것.

반면 일치 연산자인 === 은 false가 나온다.
이 친구는 타입변환을 안하기 때문.

Switch 문

switch (expression) {
  case label_1:
    statements_1;
    break;
  case label_2:
    statements_2;
    break;default:
    statements_default;
}

예외 처리 명령문

throw 문

JS는 모든 것을 예외로 던질 수 있음.

function sum (x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw new Error("숫자를 입력하세요");
  }
  return x + y; 
}

console.log(sum("abc", 1))

이런식으로 숫자값이외에 다른 자료형이 input으로 들어오는 경우
예외처리를 통해서 에러를 던지기 가능

try...catch

throw는 에러를 던지기만 할뿐, 에러 처리 상황에 맞게 handling은 불가함.
이를 try...catch 문을 통해 에러를 핸들링 할 수 있음.

function sum (x, y) {
  if (typeof x !== 'number' || typeof y !== 'number') {
    throw "숫자를 입력하세요"
  }
  return x + y; 
}

try {
  sum("abc", 1)
} catch (e) {
  console.log(e); // "숫자를 입력하세요"
}
  • try..catch..finally

finally 블록은 try 블록 내 예외가 발생했는지 여부에 관계 없이 catch 블록이 존재하지 않아도 항상 실행
특히 예외 발생 여부와 관계 없이 리소스를 해제시 유용

openMyFile();
try {
  writeMyFile(theData); // 오류가 발생할 수 있는 코드
} catch (e) {
  handleError(e); // 오류가 발생하면 처리함
} finally {
  closeMyFile(); // 항상 리소스 해제
}

이를 통해 file 이 열린채로 끝나는 것을 방지.

Error 객체

Error 객체는 name 과 message 속성이 있음.

  • name : ERROR의 일반적인 Class (DOMException, Error...etc) 를 제공
  • message: 오류 메시지
function doSomethingErrorProne () {
  if (ourCodeMakesAMistake()) {
    throw (new Error('메시지'));
  } else {
    doSomethingToGetAJavascriptError();
  }
}try {
  doSomethingErrorProne();
}
catch (e) {
  console.log(e.name); // 'Error' 기록
  console.log(e.message); // '메시지' 또는 JavaScript 오류 메시지 기록
}

직접 던지는 error와 시스템오류를 구분하지 않는다면, Error 를 통해 두 속성 제공 가능

루프와 반복

for문

  for ([초기문]; [조건문]; [증감문])
      문장

do...while문

  do
      문장
    while (조건문)

do 에 묶인 문장을 실행하고 루프를 실행.

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

매 실행 마지막마다 조건문을 확인하고 Loop를 실행하기때문에
1부터 5까지 출력된다.

while문

    while (조건문)
      문장

while문은 반드시 종료조건이 있어야 함.

braek with label

var x = 0;
var 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;
    }
  }
}

for ... in 문

for (variable in object) {
  statements
}

쉽게 말해 배열 요소의 idx 를 활용

for ... of 문

for...in 과 다르게 배열 요소를 활용

  for (variable of object) {
      statement
    }
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"
}
profile
제 Velog에 오신 모든 분들이 작더라도 인사이트를 얻어가셨으면 좋겠습니다 :)

0개의 댓글