JavaScript 조건문, 비교 연산자 정리 (this, target 포함)

이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
실제 이론, 실습과 다른 부분이 있을 수 있습니다.

 

자바스크립트에서 조건문은 프로그램의 흐름을 제어하는 데 사용된다.

주로 특정 조건이 참일 때 또는 거짓일 때 다른 코드 블록이 실행되도록 한다.

자바스크립트에서는 주로 if, else if, else 키워드를 사용하여 조건문을 작성한다.

 

1. if문

- if 문은 지정된 조건이 참이면 특정 코드 블록을 실행한다.

let x = 10;

if (x > 5) {
    console.log("x는 5보다 큽니다.");
}

 

2. if-else문

- if-else 문은 조건이 참일 때와 거짓일 때 각각 다른 코드 블록을 실행한다.

let y = 3;

if (y > 5) {
    console.log("y는 5보다 큽니다.");
} else {
    console.log("y는 5보다 작거나 같습니다.");
}

 

3. else if문

- else if 문은 여러 조건을 체크하고 각각에 맞는 코드 블록을 실행할 때 사용된다.

let z = 7;

if (z > 10) {
    console.log("z는 10보다 큽니다.");
} else if (z > 5) {
    console.log("z는 5보다 크고 10보다 작거나 같습니다.");
} else {
    console.log("z는 5보다 작거나 같습니다.");
}

 

4. switch문

- switch 문은 다양한 경우(case)에 대해 다른 동작을 수행할 때 사용된다.

let day = "월요일";

switch (day) {
    case "월요일":
        console.log("출근합니다.");
        break;
    case "화요일":
        console.log("미팅이 있습니다.");
        break;
    default:
        console.log("휴일입니다.");
}

---

자바스크립트에서는 여러 가지 비교 연산자를 사용하여 값을 비교할 수 있다. 

 

1. 동등 비교(Equality)

- == : 값이 같으면 true를 반환한다. 자동으로 형 변환이 이루어진다.

- === : 값과 데이터 타입이 모두 같아야 true를 반환한다. 엄격한 동등성(strict equality) 비교이다.

console.log(5 == "5");    // true (값이 같으므로)
console.log(5 === "5");   // false (값은 같지만 데이터 타입이 다름)

 

2. 부등 비교(Inequality)

- != : 값이 다르면 true를 반환한다.

- !== : 값 또는 데이터 타입이 다르면 true를 반환한다.

console.log(10 != "10");   // false (값이 같으므로)
console.log(10 !== "10");  // true (값은 같지만 데이터 타입이 다름)

 

3. 크기 비교(Relational)

- < : 작다.

- > : 크다.

- <= : 작거나 같다.

- >= : 크거나 같다

console.log(3 < 5);    // true
console.log(8 >= 10);  // false

 

4. 논리 연산자(Logical)

- && : 논리 AND (둘 다 참이어야 참)

- || : 논리 OR (둘 중 하나만 참이면 참)

- ! : 논리 NOT (참이면 거짓, 거짓이면 참)

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

---

1. this

- this는 현재 실행 중인 코드에서 사용 중인 객체를 참조하는 특별한 키워드이다.

- this의 값은 실행 문맥에 따라 동적으로 결정되며, 함수가 어떻게 호출되느냐에 따라 달라진다.

 

2. event.target

- event.target은 이벤트가 발생한 요소를 가리키는 객체이다.

- 이벤트 핸들러 내에서 주로 사용된다.

- 예를 들어 클릭 또는 - 입력과 같은 이벤트가 발생했을 때, 그 이벤트를 일으킨 요소를 식별하는 데 사용된다.

 

this와 target을 이용한 야간모드 예제 (생활코딩 유튜브 참고)

https://www.youtube.com/watch?v=Gt2iGEEKXww&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=17

        <input type="button" value="night" onclick="
        var target = document.querySelector('body'); // target을 만들어 더욱 간결해짐
        if(this.value === 'night'){
            target.style.backgroundColor='black';
            target.style.color='white';
            this.value = 'day';
            }else {
                target.style.backgroundColor='white';
                target.style.color='black';
            this.value = 'night';
            }
            ">