[조건문] if문이란?

if문
: 조건에 따라 다른 행동을 취해야 할 때가 있다. 
이럴 땐, if문과 '물음표' 연산자라고도 불리는 조건부 연산자 ? 를 사용하면 된다.

 

• ' if ' 문 

if( ... ) 문은 괄호 안에 들어가는 조건을 평가하는데 그 결과가 true이면 코드 블록이 실행된다.

let study = prompt('지금 공부하는 과목이 무엇입니까?', '');

if (study == javascript) {
	alert( "정답입니다.");
    	alert( "good!");
}

조건이 true 일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 한다.

if 문을 쓸 때는 조건이 참일 경우 실행되는 구문이 한 줄이더라도 코드의 가독성을 위해 중괄호 { }를 사용해 코드를 블록으로 감싸는걸 추천한다.

 

• boolean 형으로의 변환

if ( ... ) 문은 괄호 안의 표현식을 평가하고 그 결과를 boolean값으로 변환한다.

 

- 숫자 0, 빈 문자열 " " , null , undefined , NaN 은 boolean형으로 변환 시 모두 false가 된다. 이런 값들은 'falsy(거짓 같은)' 값이라고 부른다.

- 이 외의 값은 불린형으로 변환시 true가 되므로 truthy 값이라고 부른다.

 

if (0) { // false
	.....
}

 

위의 규칙을 따르면 0은 falsy이다.

if (1) { //true
	.....
}

 

이 코드 블록은 항상 실행된다. 

 

또한, 확정된 불린값을 if문에 전달할 수도 있다.

let current = (year == 2023); // 비교를 통해 true/false 여부를 결정.

if (current) {
  ...
}

 

 

• else 절

if 문에는 else 절을 붙일 수 있다. 

else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.

let age = prompt('올 해 몇살인가요?', '');

if (age == 27) {
  alert( '정답입니다!' );
} else {
  alert( '오답입니다!' ); // 이외의 값을 입력하는 경우
}

 

 

• ' else if '    

조건 여러 개를 처리해야 할 때 사용할 수 있다.

let year = prompt ('올 해는 몇년도 일까요?', '');

if (year < 2023) {
	alert( '숫자를 좀 올려보세요.');
} else if (year > 2023) {
	alert( '숫자를 좀 내려보세요.');
} else {
	alert('정답이에요!')
}

 

자바스크립트는 조건 year < 2023 을 먼저 확인하고, 

이 조건이 거짓이라면 다음 조건 year > 2023 을 확인한다.

이 조건 또한 거짓이라면 else 절 내의 alert를 실행한다. 

 

else if 는 여러 개를 더 붙이는 것도 가능하다.

마지막에 붙는 else는 필수가 아닌 선택사항이다.

 

 

• 조건부 연산자 ' ? '

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다. 

let accessAge;

let age = prompt('나이를 입력해 주세요.', '');
if (age > 25) {
	accessAge = true;
} else {
	accessAge = false;
}
alert(accessAge);

 

'물음표(question mark) 연산자' 라고도 불리는 '조건부(conditional) 연산자' 를 사용하면 위 예시를 더 짧고 간결하게 변형 할 수 있다.

 

조건부 연산자는 물음표 ? 로 표시한다. 

피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자' 라고 부르기도 한다.

참고로, 자바스크립트에서 피연산자를 3개나 받는 연산자는 조건부 연산자가 유일하다.

 

문법 :

let result = condition ? value1 : value2;

평가 대상인 condition이 truthy라면 value1 이, 그렇지 않으면 value2 가 반환된다.

 

예시 :

let accessAge = (age > 25) ? true : false;

 

age > 25 옆의 괄호는 생략 가능하다.

물음표 연산자는 우선순위가 낮으므로 비교 연산자 > 가 실행되고 난 뒤에 실행된다.

let accessAge = age > 25 ? true : false;

 

괄호가 있으나 없으나 차이는 없지만, 코드의 가독성 향상을 위해 괄호를 사용할 것을 권유한다.

 

또한

비교 연산자 자체가 true 나 false를 반환하기 때문에 위 예시에서 물음표 연산자를 사용하지 않아도 된다.

let accessAge = age > 25;

 

 

• 다중 ' ? '

물음표 연산자 ? 를 여러개 연결하면 복수의 조건을 처리할 수 있다.

let age = prompt('나이를 입력하세요.', 25);

let message = (age < 20) ? '미성년자는 음주 불가에요.'; :
	(20 <= age < 75) ? '어서오세요.'; :
    	(age < 75) ? '음주를 삼가해주세요.'; :
        '나이를 올바르게 입력해주세요.';
    
alert(message);

 

이 코드는 처음보기엔 파악하기 힘들 수도 있지만, 

단순히 여러 조건을 나열한 코드에 불과하다.

 

- 첫 번째 물음표에선 조건문 age < 20 을 검사합니다.

-> 그 결과가 참이면 '미성년자는 음주 불가에요.' 를 return 한다.

- 그렇지 않다면(false라면) 첫번째 콜론 " : " 에 이어지는 조건문 20 <= age < 75 를 검사한다.

-> 그 결과가 참이면 '어서오세요.' 를 반환한다. 

-  그렇지 않다면 다음 콜론 " : " 에 이어지는 조건문 age < 75를 검사한다.

-> 그 결과가 참이면 '음주를 삼가해주세요.' 를 return 한다.

- 그렇지 않다면 마지막 콜론 " : " 이후의 표현식인 '나이를 올바르게 입력해주세요.' 를 return한다.

 

위에 조건문을 if ... else 를 사용해서 변형해보자면

let age = prompt('나이를 입력하세요.', 25);

if (age < 20) { 
	message = '미성년자는 음주 불가에요.';
} else if (20 <= age < 75) {
	message = '어서오세요.';
}	else if (age < 75) { 
	message = '음주를 삼가해주세요.';
}	else {
	message = '나이를 올바르게 입력해주세요.';
}

alert(message);

 

 

• 부적절한 ' ? '

우리에겐 가독성 또한 중요하다. 

코드를 읽을 때 우리의 눈은 수직으로 움직인다.

수평으로 늘어진 코드보단

여러줄로 나뉘어 작성된 코드 블록이 더 읽기 쉽다. 

 

물음표 연산자 ? 는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다.

여러 분기를 만들어 처리할 때는 if 를 사용하자.