TIL - 11 - JavaScript - if문, 연산자

1. if문

if 문은 지정한 조건이 참값(truthy)인 경우 명령문을 실행한다. 조건이 거짓값(falsy)인 경우 또 다른 명령문(else if / else)이 실행 될 수 있다. 말 그대로 "만약에 ~한다면 ~한다"를 컴퓨터 언어로 변환된 것이다.

if(A조건) {
	A조건이 맞으면 여기만 실행
	}else if(B조건){
	B조건이 맞으면 여기만 실행
	}else if(C조건){
	C조건이 맞으면 여기만 실행
	}else{
	위의 조건 모두 안 맞으면 여기 실행
}

if

let answer = 3 + 3;


if (answer > 5) {        //괄호안에 조건이 맞으면
  alert("5보다 큰 숫자!"); //{}안에 명령문이 시행됨
} 

if + else

let answer = 3 + 3;


if (answer > 5) {
  alert("5보다 큰 숫자!");
} else {	// else문은 1if문안에 조건이 falsy값인 경우 실행됨
  alert("5보다 작거나 같은 숫자!");
}입력하세요

if+else if + else

let answer = 3 + 3;


if (answer > 15) {			//A조건
  alert("15보다 큰 숫자!");
} else if (answer > 10) {  //B조건 
  alert("10보다 큰 숫자!");
} else if (answer > 5) {   //C조건
  alert("5보다 큰 숫자!");					//answer = 6이므로 해당 명령문 실행
} else {			       //A,B,C조건이 모두 아닌 경우
  alert("5보다 작거나 같은 숫자!");
}

위의 예제를 보면 위에서부터 차례로 조건울 체크하며 내려오다 조건에 부합하면 해당 명령문을 실행하는 것을 알 수 있다. 따라서 조건문은 순서가 중요하다.

2. 비교 연산자

비교 연산자는 연산자 양쪽에 있는 두값을 비교하는 연산자이다.

• 동치 연산자(==, ===, !=, !==)는 다양한 데이터 타입을 비교할때 사용한다.
  - ==동등 비교 연산자로 값만 비교하고, 타입은 비교하지 않는다.
  ex) 3 == "3" //true
  - === 비교 연산자 중 하나로, 값과 타입이 같은지를 비교한다. ==보다 엄격
  ex) 3 == "3" //false
  - !==서로 같지 않음을 타나낸다.
• 관계 연산자(>, <, >=, <=)는 문자열(사전순으로)과 숫자(크기로) 데이터 타입을 비교할때 사용한다.

3. 논리 연산자

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있다.

• &&(AND) 어떤 조건 하나만 맞으면 되는 것이 아니라 모두 충족해야할 때 사용하는 연산자이다.
  expr1 && expr2
  • expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.

const hobby = prompt("취미가 무엇인가요?");
const morning = prompt("아침형 인간인가요?");

if (hobby === "축구" && morning === "네") { // 조건: 취미가 축구이면서 아침형 인간인가?
  alert("조기축구회를 추천합니다.");
} else {
  alert("무슨 동아리가 좋을지 생각해볼게요.");
}

• ||(OR) "또는"에 해당하는 연산자로 좌항과 우항중 하나라도 true이면 충족하는 연산자이다.
  expr1 || expr2
  • expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

const answer = prompt("어디사세요?");

if (answer === "선릉" || answer === "강남" || answer === "역삼") {
  alert("가까우시네요!");
} else if (answer === "을지로") {   
  alert("조금 멀리 사시네요."); 
} else {
 alert("거긴 어디인가요?");
}

• !(NOT)
  !expr
  • 단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.

false로 변환될 수 있는 표현 예제들은 null, 0, NaN, 빈 문자열 (""), 또는 undefined 으로 평가될 수 있다.

오늘의 한줄 ✏️

if문을 활용한 문제를 풀다가 계속 오류가 뜨는 상황이 있었는데, 다시 살펴보니 if문 조건문안에 비교 연산자를 사용하지 않고 =하나만 사용했었다.

틀린 코드를 고치고 나서 생각해보니 어찌보면 if문의 특성상 당연히 조건문 안에는 비교 연산자가 들어가야 한다는걸 깨달았다.🤦‍♂️

앞으로 코드를 적을때 왜 이러한 코드를 적는지 생각해는 습관을 들여야겠다.

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
• https://ko.javascript.info/logical-operators
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators