April 13, 2024 5 min to read

If 문

If 문

If문 작동방식

• if 키워드와 그 뒤에 괄호()를 사용, 이 괄호 안에 조건을 작성함, true or false 의 질문이 들어감.
• 괄호 뒤에 {} 중괄호 안에 코드블록을 추가하고 이 코드블록은 조건이 true인 경우 실행되는 코드임.
• 괄호 안의 조건이 false인 경우 javaScript 는 중괄호 안의 코드 블록을 건너 뜀.

var weather = "sunny";
if(weather === "sunny"){
    console.log("Let's go to the beach!");
}

여기서 조건은 weather === “sunny” 임. 날씨를 sunny로 정의했으니 답은 true임. 따라서 중괄호 내 코드를 실행함. 날씨가 sunny 가 아니라면 코드블록은 건너뜀.

Else if 문

추가 조건을 순차적으로 테스트하기 위해 if 문과 같이 사용되는데 첫 번째 조건이 true가 아니면 다음 조건을 시도하는 것임. 필요한 만큼의 else if문을 사용할 수 있으며 if, else if 둘다 아닌 경우 else문이 실행됨.

1. if 문: 시작문, 조건 확인 후 true면 if문의 중괄호 안 코드블록이 실행됨. false면 건너뜀.
2. else if문: if문이 거짓인 경우 else if문으로 이동 후 조건을 확인하고 true면 코드블록을 실행, false인경우 다음 else if문이나 else 문으로 이동.
3. else문: if및 else if 문 모두 false 인 경우 최종적으로 도달하는 위치.

비교 연산자 (Comparison operators)

비교연산자는 두 값이 어떻게 연관되어 있는지 이해하는데 도움이 됨. 두 값을 비교해 true or false 결과를 제공함, 이런 연산자는 루프나 if 문등의 흐름제어에 매우 중요함.

• == (Equal to): 값이 같은지 확인.
• === (Strictly equal to): 값이 같고 유형까지 확인하여 유형이 다른 경우 false 반환.
• != (Not equal to): 값이 같지 않은지 확인
• !== (Strictly not equal to): 값이나 유형이 같지 않은지 확인.
• >(Greather than):왼쪽이 오른쪽 값보다 큰지 확인.
• <(Less than): 왼쪽이 오른쪽보다 작은지 확인.
• >=(Greather than or equal to): 왼쪽값이 오른쪽값보다 크거나 같은지 확인.
• <=(Less than or equal to): 왼쪽값이 오른쪽값보다 작거나 같은지 확인.

논리 연산자(Logical Operators)

여러 조건을 결합하여 복잡한 표현식과 의사 결정 시나리오를 구성할 수 있게 하는 도구. 프로그램 흐름제어에 중요한 역할을 하며 특정 조건에 따라 어떤 코드가 실행되는지 결정하는 유연성을 제공함.

• &&(and)
• ||(or)
• !(not)

1. &&은 논리 AND 연산자 두 개의 피연산자를 사용해 조건이 모두 true일 경우 true 반환. 하나라도 false이면 false 반환.

var age = 25;
var hasDriverLicense = true;

if(age >= 16 && hasDriverLicense){
    console.log("You can drive a car!);
} else
{
    console.log("You are not eliglibe to drive a car.");
}

1. || OR 연산자. 조건 중 하나 이상이 true인 경우 true 반환, 두 조건 모두 false 인 경우 false 반환.

var hasCoffee = false;
var hasTea = true;

if(hasCoffee || hasTea){
    console.log("You have something to drink.);
} else{
    console.log("You don't have anything to drink.");
}

1. ! NOT 연산자. 하나의 조건에서만 작동하며 부울값을 반환함. 조건이 true면 false를 반환하고 조건이 false이면 true를 반환함.

var isRaining = false;

if(!isRaining){
    console.log("You don't need an umbrella.");
} else{
    console.log("You need an umbrella.");
}

잘못된 값을 || 연산자로 테스트

속성 값이 false인 경우 대체 값이나 기본값을 제공할 수 있음.

const falsyProperties = {
    a: "",  // empty string
    b: 0,
    c: false,
    d: undefined,
    e: null,
    f: "f is truthy" 
}
console.log(falsyProperties.a || "a is falsy"); // output: a is falsy
console.log(falsyProperties.a || "b is falsy"); // output: b is falsy
console.log(falsyProperties.a || "c is falsy"); // output: c is falsy
console.log(falsyProperties.a || "d is falsy"); // output: d is falsy
console.log(falsyProperties.a || "e is falsy"); // output: e is falsy
console.log(falsyProperties.a || "f is falsy"); // output: f is truthy

삼항 연산자 (Ternary Operator)

간결한 조건문 작성

if-else문의 대한 간결한 대안을 제공함. 3개의 피연산자를 취하기 때문에 삼항이라고 함.

condition ? expresstionTrue : expressionFalse;

var isRaining = true;
var message;
if(isRaning){
    message = "Don't forget your umbrella!";
} else {
    message = "You don't need an umbrella.";
}
console.log(message); // output: "Don't forget your umbrella!"

위의 if-else문을 간결하게 해서

var isRaining = true;
var message = isRaining ? "Don't forget your umbrella!" : "You don't need an umbrella.";
console.log(message); // output: "Don't forget your umbrella!"