[Js] if와 '?'를 사용한 조건문에 대해서 알아보자.

조건에 따라서 다른 처리결과를 보여주기 위해서 조건문(if)과 물음표를 사용한 ? 조건부 연산자를 사용합니다.

 

 

if문 

if(...)문은 괄호 안에 들어가는 조건을 평가해서 그 결과가 true이면 코드가 실행됩니다. 

let value = prompt('집에 가고 싶습니까?', 'yes or no')

if(value == 'yes') alert('저도 그렇습니다.')

 

위 조건문에서는 하나의 간단한 조건만을 다뤘는데, 조건문은 조금 더 복잡할 수도 있습니다. 

조건이 맞을 때 복수의 문을 실행하려면 중괄호를 사용해서 코드 블럭을 감싸주면 됩니다.

let value = prompt('집에 가고 싶습니까?', 'yes or no')

if(value == 'yes') {
    alert('저도 그렇습니다.')
    alert('사실 농담입니다.')
}

 

불린형 변환

if 조건문은 괄호안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다. 앞전에 형 변환에 대한 내용을 상기하자면 

 

• 숫자0
• 빈문자열""
• null
• undefined
• NaN

 

위 항목들은 모두 불린형으로 변환 시 false를 반환하는 것이 특징입니다. 이런 값들을 falsy(거짓 같은)값이라고 합니다. 

위 항목들은 제외한 이외의 값들은 모두 true가 되며 truthy(참 같은)값이라고 합니다. 

 

그렇다면 위의 규칙에 따라서 해당 코드는 절대로 실행되지 않습니다. 

if(0) { 
	alert('실행되지 않는 알림')
}

 

반대로 아래의 예시코드는 항상 실행됩니다. 

 

if(1){
	alert('항상 실행되는 알림')
}

 

 

 

 

else절

if문에는 else 절을 붙일 수 있습니다. 이때 else절의 코드는 조건이 거짓일 경우에 실행됩니다.

let value = prompt('자바스크립트의 공식이름은 무엇일까요??')

if(value == 'ECMAScript'){
    alert('정답입니다.')
} else {
    alert('오답입니다.')
}

 

 

 

else if로 복수 조건 처리하기

유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야할 때 else if 문을 사용할수 있습니다.

 

let value = prompt('우리나라의 광복년도는 몇년도일까요??', '19xx')

if(value < 1945){
    alert('조금 더 숫자를 올려보세요.')
} else if(value > 1945){
    alert('조금 더 숫자를 낮춰보세요.')
} else{
    alert('정답입니다.')
}

예시에서 맨 처음 if 조건문을 확인하고 이 조건에 부합하지 않는다면 else if 조건문을 확인합니다. 만약 이 조건 역시 부합하지 않는다면 else 절의 alert 함수가 실행됩니다. 

 

 

 

 

조건부 연산자  '?'

조건에 따라서 다른 값을 변수에 할당해야할 경우 사용합니다. 

let accessAllow;
let age = prompt('나이를 입력해주세요.', '');

if(age > 18){
    accessAllow = true
} else {
    accessAllow = false
}

alert(accessAllow)

 

위 예시를 '?'를 사용한 조건부(conditional) 연산자를 사용하면 조금 더 간결한 코드 작성이 가능합니다. 

let accessAllow;
let age = prompt('나이를 입력해주세요.', '');

(age > 18) ? accessAllow = true : accessAllow = false

alert(accessAllow)

위 코드에서 피연산자가 세 개이기 때문에 조건부 연산자를 삼항('ternary')연산자라고도 합니다. 

만약 age가 18보다 크다면 accessAllow가 true이며,

반대로 age가 18보다 낮다면 accessAllow가 false가 됩니다. 

 

 

let result = condition ? value1 : value2;

평가대상인 condition이 truethy라면 value1이, 그렇지 않다면 value2가 반환됩니다.

 

let age = prompt('나이를 입력해주세요.', '');
        
let accessAllow = (age > 18) ? true : false

alert(accessAllow);

 

 

 

다중 '?' 

물음표 연산자를 여러 개 연결하면 복수의 조건을 처리하는 것이 가능합니다. 

 

let age = prompt('나이를 입력해주세요.', 18);
        
let message = (age < 5) ? '안녕 아기야' : 
(age < 18)  ? '안녕' : 
(age < 100) ? '환영합니다.' : 
'나이가 아주 많으시거나, 아닌 값을 입력하셨네요.';

alert(message);

물음표 연산자를 처음 보는 사람이라면 이런식의 코드 작성이 어떻게 동작하는지 파악하기 어려울 수 있습니다. 하지만 자세히 잘 살펴보면 해당 코드는 단순히 여러 조건을 나열한 것뿐 입니다. 

 

조건문을 물음표 연산자로 변형했던 것 처럼 반대로 물음표 연산자를 조건문으로 바꿔서 코드를 작성할 수도 있습니다.

if(age < 5){
    alert('안녕 아가야')
} else if(age < 18){
    alert(message = '안녕.')
} else if(age < 100){
    alert(message = '환영합니다.')
} else {
    alert(message = '나이가 아주 많으시거나, 아닌 값을 입력하셨네요.')
}

alert(message);

 

 

 

문제

1. 해당 코드는 실행될까?

if('0') alert('hello')

 

 

2. 정답 맞추기

자바스크립트의 공식 이름은 무엇일까요??

 

 

3. 입력값 출력하기