JS공식문서 읽기 스터디 3일차 ) 프로그램의 핵심구조 파악하기 (1)

JS 명령문

JavaScript는 애플리케이션에 다양한 상호작용을 추가하기 위한 일련의 명령문, 특히 제어 흐름 명령문을 지원한다.

블록문

가장 기초적인 명령문이다.

{
  statement_1;
  statement_2;
  ⋮
  statement_n;
}```

제어흐름문(for while if 와 함께 사용된다.

```js
let x = 0;

while (x < 3) {
  let y = x + 1; // ES6 이후, let과 const는 블록 스코프를 가진다.
  console.log("반복 안에서 y:", y); 
  x++;
}

console.log("반복 밖에서 y:", y);

조건문

조건문은 지정한 조건이 참인 경우에 실행하는 명령 집합이다.
JavaScript는 if...else와 switch 두 종류의 조건문을 지원한다.

if문

• if 문은 조건이 참(true) 일 때 실행할 명령문을 지정함.
• else 절을 추가하면 조건이 거짓(false) 일 때 실행할 명령문을 지정할 수 있음.

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

• condition → 불리언 값으로 평가되는 표현식
• 참일 경우 statement_1, 거짓일 경우 statement_2 실행

---

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

• 순차적으로 조건을 평가 → 처음으로 true인 블록만 실행

---

4. 모범 사례

1. 항상 블록문 {} 사용하기

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

   → 중첩된 if 문일수록 블록을 생략하지 않는 것이 가독성과 안전성에 좋음.

2. 조건식에서 할당(=) 지양하기

   if ((x = y)) { 
     /* ... */
   }

   • 대신 비교 연산자(==, ===)를 써야 의도를 명확히 표현 가능.

---

5. 거짓 값 (Falsy Values)

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

= > 이외의 값(객체, 배열, 문자열 "0" 등)은 모두 true 로 평가됨.

---

6. Boolean 객체

const b = new Boolean(false);

if (b)         // true (객체는 truthy)
if (b == true) // false (비교 결과 다름)

• Boolean 객체는 항상 truthy → 혼동하기 쉬움.
• 원시값 true / false 와는 구분해야 함.

ㄴ 원시값 true false와 Boolean객체는 왜 구분되어야 하는 개념인가?

• 원시값은 속성과 메서드를 가질 수 없기 때문에, 불리언이라는 원시값에 속성과 메서드를 부여해 원시값에는 없는 메서드 호출등의 기능을 사용해야함.
  모든것이 객체인 파이썬과는 다른 개념.

---

7. 예제

function checkData() {
  if (document.form1.threeChar.value.length == 3) {
    return true;
  } else {
    alert(
      "정확히 세 글자를 입력하세요. " +
      `${document.form1.threeChar.value}은(는) 유효하지 않습니다.`
    );
    return false;
  }
}

• 입력 값 길이가 3이면 true 반환
• 그렇지 않으면 경고창 표시 후 false 반환

---

1. switch 문

• 표현식을 평가한 뒤, case 값과 일치하는 블록 실행.
• break를 만나면 switch 탈출. 없으면 fall-through 발생.
• default 절은 일치하는 case가 없을 때 실행 (위치 제약 없음).

switch (fruit) {
  case "사과":
    console.log("사과 0.32$");
    break;
  case "바나나":
    console.log("바나나 0.48$");
    break;
  default:
    console.log("품절입니다");
}

---

2. 예외 처리

(1) throw

• 예외를 던질 때 사용.
• 어떤 타입이든 던질 수 있음 (문자열, 숫자, 객체…).

throw "Error";
throw 42;
throw new Error("메시지");

---

(2) try...catch

• try 블록 안에서 예외 발생 시 catch 블록으로 제어권 이동.
• catch는 던져진 예외를 식별자로 받아 처리.

try {
  riskyFunction();
} catch (e) {
  console.error(e);
}

---

(3) finally

• 예외 발생 여부와 상관없이 항상 실행되는 블록.
• 리소스 해제, 정리 작업에 적합.
• finally의 return 값이 try/catch의 return이나 throw보다 우선함.

try {
  openResource();
} catch (e) {
  handleError(e);
} finally {
  closeResource();
}

---

(4) 예외 객체 활용

JS에서는 throw로 아무 값이나 던질 수 있는데,
이런 방식은 시스템(자바스크립트 엔진)이 던지는 에러와 개발자가 직접 던지는 에러를 구분하기 어려움.
해서 Error 생성자 사용을 권장함.

try {
  throw new Error("메시지");
} catch (e) {
  console.log(e.name);    // "Error"
  console.log(e.message); // "메시지"
}

---

1. for 문

• 형식:

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

• 초기문 → 조건 검사 → 문장 실행 → 증감문 → 반복.

• 조건이 거짓이면 종료. 조건을 생략하면 항상 참으로 간주.

---

2. do...while 문

• 형식:

  do {
    문장
  } while (조건문);

• 문장을 최소 1회 실행 후 조건 검사.

• 조건이 참이면 계속 반복, 거짓이면 종료.

---

3. while 문

• 형식:

  while (조건문) {
    문장
  }

• 조건을 먼저 검사 → 참이면 문장 실행, 거짓이면 종료.

• 조건이 항상 참이면 무한 루프 발생.

---

4. 레이블 문

• 형식:

  labelName: statement

• 루프에 이름(레이블)을 붙여 break나 continue가 특정 루프를 제어할 수 있게 함.

---

5. break 문

• 반복문, switch, 레이블 문에서 사용.
• 레이블 없이 → 가장 가까운 반복문/switch 종료.
• 레이블과 함께 → 해당 레이블이 붙은 루프 종료.

---

6. continue 문

• 현재 반복을 종료하고 다음 반복으로 이동.
• 레이블 없이 → 가장 가까운 루프에 적용.
• 레이블과 함께 → 지정한 루프에 적용.

---

7. for...in 문

• 형식:

  for (variable in object) {
    문장
  }

• 객체의 열거 가능한 속성 이름(key) 을 반복.

• 배열 요소 순회에는 권장되지 않음(사용자 정의 속성도 반환하기 때문).

---

8. for...of 문

• 형식:

  for (variable of iterable) {
    문장
  }

• 반복 가능한 객체(iterable) 의 값(value) 을 순회.

• 배열, 문자열, Map, Set, arguments 등에서 사용.

• for...in과의 차이: for...in은 key, for...of는 value 반복.

---

핵심 요약

• for: 조건이 거짓될 때까지 반복 (전형적인 카운터 기반).
• do...while: 최소 1회 실행 보장.
• while: 조건이 참인 동안 반복.
• 레이블 + break/continue: 중첩 루프 제어.
• break: 루프 완전 종료.
• continue: 현재 반복 건너뛰고 다음 반복으로.
• for...in: 객체 속성 이름 순회.
• for...of: 반복 가능한 객체의 값 순회.

---