연산자 & 문자열 & 제어문

#1. 연산자

#산술 연산자

let a = 5, b = 2;
console.log(a + b);  // 7
console.log(a / b);  // 2.5
console.log(a % b);  // 1 (나머지)
a++;
console.log(a);      // 6

7 2.5 1 6

#대입 연산자

값을 변수에 할당하며, 산술 연산과 결합한 축약형이 있다.

let x = 10;
x += 5;   // x = x + 5
console.log(x);   // 15
x *= 2;   // x = x * 2
console.log(x);   // 30

15 30

#비교 연산자

두 값을 비교하여 true 또는 false를 반환한다.

console.log(5 == "5");    // true  (문자 "5"를 숫자로 변환해 비교)
console.log(5 === "5");   // false (타입이 달라서 false)
console.log(5 !== "5");   // true
console.log(5 >= 5);      // true

true false true true

#논리 연산자

console.log(true && false);  // false
console.log(true || false);  // true
console.log(!true);          // false

false true false

#타입 연산자

• typeof: 값의 자료형을 문자열로 반환한다.

• instanceof: 객체가 특정 클래스(타입)의 인스턴스인지 확인한다.

console.log(typeof 5);            // "number"
console.log(typeof "hi");         // "string"
console.log([] instanceof Array); // true

number string true

#삼항 연산자

조건 ? 참일_때_값 : 거짓일_때_값 형태로, if-else를 한 줄로 줄여 쓸 수 있다.

let score = 85;
let result = (score >= 60) ? "합격" : "불합격";
console.log(result);   // "합격"

합격

#비트 연산자 (참고)

32비트 정수의 각 비트를 다루는 연산자다. 입문 단계에서 자주 쓰이지는 않지만, 종류만 알아 두자: &(AND), |(OR), ^(XOR), ~(NOT), <<(왼쪽 시프트), >>(오른쪽 시프트), >>>(부호 없는 오른쪽 시프트).

console.log(5 & 1);    // 1   (0101 & 0001 = 0001)
console.log(5 | 1);    // 5   (0101 | 0001 = 0101)
console.log(5 << 1);   // 10  (왼쪽으로 1칸 시프트)

1 5 10

#2. 문자열 다루기

문자열은 + 연산자로 이어 붙일 수 있다. 숫자와 문자열을 +로 더하면 문자열로 연결된다는 점에 주의한다.

let greeting = "Hello, ";
let name = "Alice";
console.log(greeting + name);   // "Hello, Alice"

console.log(5 + 5);       // 10   (숫자 + 숫자)
console.log("5" + 5);     // "55" (문자열 + 숫자 → 연결)
console.log("점수: " + 90); // "점수: 90"

Hello, Alice 10 55 점수: 90

#자주 쓰는 문자열 메서드

let str = "Hello, World!";
console.log(str.length);              // 13
console.log(str.charAt(0));           // "H"
console.log(str.includes("World"));   // true
console.log(str.indexOf("World"));    // 7
console.log(str.substring(0, 5));     // "Hello"
console.log(str.toUpperCase());       // "HELLO, WORLD!"
console.log(str.replace("World", "JS")); // "Hello, JS!"
console.log("a,b,c".split(","));      // ["a", "b", "c"]

13 H true 7 Hello HELLO, WORLD! Hello, JS! [ 'a', 'b', 'c' ]

#템플릿 리터럴 (Template Literal)

ES6에서 도입된 기능으로, 백틱(`)으로 문자열을 감싸면 ${ } 안에 변수나 표현식을 직접 끼워 넣을 수 있고 여러 줄도 그대로 작성할 수 있다.

let name = "Bob";
let age = 25;

// 기존 방식 (+로 연결)
let msg1 = "제 이름은 " + name + "이고 " + age + "살입니다.";

// 템플릿 리터럴 (훨씬 읽기 쉬움)
let msg2 = `제 이름은 ${name}이고 ${age}살입니다.`;

console.log(msg2);

// 여러 줄 문자열
let multi = `첫째 줄
둘째 줄`;
console.log(multi);

제 이름은 Bob이고 25살입니다. 첫째 줄 둘째 줄

#3. 조건문

조건에 따라 다른 코드를 실행한다.

flowchart TD
    A["조건 검사<br/>num > 0 ?"] -->|true| B["양수입니다 출력"]
    A -->|false| C["0 또는 음수입니다 출력"]
    style A fill:#fff3e0,stroke:#fb8c00
    style B fill:#e8f5e9,stroke:#43a047
    style C fill:#ffebee,stroke:#e53935

• if: 조건이 true일 때 블록을 실행한다.

• if-else: 참일 때와 거짓일 때를 나눠 실행한다.

• else if: 여러 조건을 순서대로 검사한다.

let score = 85;

if (score >= 90) {
  console.log("A 등급");
} else if (score >= 80) {
  console.log("B 등급");
} else {
  console.log("C 등급");
}

B 등급

#4. 반복문

조건이 만족되는 동안 코드 블록을 반복 실행한다.

// for문: i를 0부터 4까지 1씩 증가시키며 5번 반복
for (let i = 0; i < 5; i++) {
  console.log(i);
}

0 1 2 3 4

for문은 시작; 조건; 증감 세 부분으로 구성된다.

flowchart LR
    A["① 초기화<br/>let i = 0"] --> B{"② 조건<br/>i < 5 ?"}
    B -->|true| C["③ 블록 실행<br/>console.log(i)"]
    C --> D["④ 증감<br/>i++"]
    D --> B
    B -->|false| E["반복 종료"]
    style B fill:#fff3e0,stroke:#fb8c00
    style E fill:#ffebee,stroke:#e53935

// while문: 조건이 참인 동안 반복
let num = 0;
while (num < 3) {
  console.log("num =", num);
  num++;
}

num = 0 num = 1 num = 2