1. if문
- if ( ... ) 문은 괄호 안에 들어가는 조건을 평가하는데 ,
그 결과가 true이면 코드 블록이 실행된다. - 코드 가독성이 증가를 위해 if 문을 쓸 때는 조건이 참일 경우
실행되는 구문이 단 한 줄이더라도 중괄호 { } 를 사용해
코드를 블록으로 감싸는 것을 추천한다.
2. 불린형으로의 변환
if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다.
형 변환 규칙
- 숫자 0 , 빈 문자열 "" , null , undefined , NaN 은 불린형으로 변환 시 모두 false가 된다.
이런 값들은 ‘ falsy ( 거짓 같은 ) ’ 값이라고 부른다. - 이 외의 값은 불린형으로 변환시 true 가 되므로 ‘ truthy ( 참 같은 ) ’ 값이라고 부른다.
if (0) { ... }
위 규칙에 따르면 이 코드는 절대 실행되지 않는다.
if (1) { ... }
이 코드는 항상 실행된다.
평가를 통해 확정된 불린값을 if문에 전달할 수도 있다.
let cond = (year == 2015); if (cond) { ... }
동등 비교를 통해 true/false 여부를 결정한다.
3. 'else’절
if문엔 else 절을 붙일 수 있다.
else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행된다.
let year = prompt('올해는 몇년도 인가요?', ''); if (year == 2020) { alert( '정답!' ); } else { alert( '오답!' ); // 2020 이외의 값을 입력한 경우 }
4. 'else if’로 복수 조건 처리하기
유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있다.
이때 else if 를 사용할 수 있다.
let year = prompt('제 생일은 몇년도 일까요?', ''); if (year < 1999) { alert( '숫자를 좀 더 올려보세요.' ); } else if (year > 1999) { alert( '숫자를 좀 더 내려보세요.' ); } else { alert( '정답!' ); }
위 예시에서 , 자바스크립트는 조건 year < 1999 를 먼저 확인한다.
이 조건이 거짓이라면 다음 조건 year > 1999 를 확인한다.
이 조건 또한 거짓이라면 else 절 내의 alert 를 실행한다.
else if 블록을 더 많이 붙이는 것도 가능하다.
마지막에 붙는 else는 필수가 아닌 선택 사항이다.
5. 조건부 연산자 ‘?’
조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다.
let accessAllowed; let age = prompt('나이를 입력해 주세요.', ''); if (age > 22) { accessAllowed = true; } else { accessAllowed = false; } alert(accessAllowed);
' 물음표 ( question mark ) 연산자 ’ 라고도 불리는
' 조건부 ( conditional ) 연산자 ’ 를 사용하면 더 짧고 간결하게 변형할 수 있다.
조건부 연산자는 물음표 [ ? ] 로 표시한다.
피연산자가 세 개이기 때문에 조건부 연산자를 ' 삼항 ( ternary ) 연산자 ' 라 부르기도 한다.
자바스크립트에서 피연산자가 3 개나 받는 연산자는 조건부 연산자가 유일하다.
문법
let result = condition ? value1 : value2;
평가 대상인 condition이 truthy라면 value1 이 , 그렇지 않으면 value2 가 반환된다.
예시
let accessAllowed = (age > 22) ? true : false;
age > 22 주위의 괄호는 생략 가능하다.
물음표 연산자는 우선순위가 낮으므로 비교 연산자 > 가 실행되고 난 뒤에 실행된다.
괄호가 있으나 없으나 차이는 없지만 ,
코드의 가독성 향상을 위해 괄호를 사용하는 것이 좋다.
비교 연산자 자체가 true나 false를 반환하기 때문에
위 예시에서 물음표 연산자를 사용하지 않아도 된다.
let accessAllowed = age > 22;
6. 다중 ‘?’
물음표 연산자 [ ? ] 를 여러 개 연결하면 복수의 조건을 처리할 수 있다.
let age = prompt('나이를 입력해주세요.', 22); let message = (age < 3) ? '타자를 어떻게 ,,' : (age < 22) ? '안녕!' : (age < 100) ? '환영합니다!' : '나이가 아닌 값을 입력하셨습니다!'; alert( message );
if..else 를 사용하여 변형하기.
if (age < 3) { message = '타자를 어떻게,,'; } else if (age < 22) { message = '안녕!'; } else if (age < 100) { message = '환영합니다!'; } else { message = '나이가 아닌 값을 입력하셨습니다!'; }
7. 부적절한 ‘?’
물음표?를 if 대용으로 쓰는 경우가 종종 있다.
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', ''); (company == 'Netscape') ? alert('정답!') : alert('오답!');
조건 company == 'Netscape' 의 검사 결과에 따라
[ ? ] 뒤에 이어지는 첫 번째 혹은 두 번째 표현식이 실행되어 얼럿 창이 뜬다.
위 예시에선 평가 결과를 변수에 할당하지 않고 ,
결과에 따라 실행되는 표현식이 달라지도록 하였다.
이런 식으로 물음표 연산자를 사용하는 것은 좋지 않다.
개발자 입장에선 if 문을 사용할 때 보다 코드 길이가 짧아진다는 점 때문에
물음표 [ ? ] 를 if 대용으로 쓰는 게 매력적일 순 있지만 가독성이 떨어진다.
let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', ''); if (company == 'Netscape') { alert('정답!'); } else { alert('오답!'); }
if 를 사용해 변형하면, 훨씬 더 가독성이 좋다.
물음표 연산자 [ ? ] 는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다.
이런 목적에 부합하는 곳에 물음표를 사용하는것이 좋으며,
여러 분기를 만들어 처리할 때는 if 를 사용하자.
