dolog

if 와 ‘?’를 사용한 조건 처리 - if 문과 조건부 연산자(?) 본문

JavaScript/자바스크립트의 기본

if 와 ‘?’를 사용한 조건 처리 - if 문과 조건부 연산자(?)

dokite 2022. 7. 1. 00:55

if 문

  • if(…) 문은 괄호 안에 들어가는 조건을 평가, true 일 때 코드 블록 실행
  • if(…) { } 의 형식을 지키도록 하자

 

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

 

if (year == 2015) alert( '정답입니다!' );

 

복수의 문 실행도 가능

 

if (year == 2015) {

  alert( "정답입니다!" );

  alert( "아주 똑똑하시네요!" );

}

 

boolean 형으로의 변환

  • if(…) 문은 괄호 안의 표현식을 평가, 결과값은 불린값으로 변환
  • falsy 값 : 0, “”, null, undefined, NaN
  • falsy 값 이외는 truthy 값

 

let condition = (year == 2015); // 확정된 불린값을 전달할 수도 있다

 

if (condition) {

console.log(true)

};

 

else 절

  • if의 친구, else는 뒤에 이어지는 코드블록의 조건이 거짓일 때 실행
  • 표현식이 따로 필요 없고 출력값만 적어주면 된다

 

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

 

if (year == 2015) {

  alert( '정답입니다!' );

} else {

  alert( '오답입니다!' ); // 2015 이외의 값을 입력한 경우

}

 

else if 로 복수 조건 처리하기

  • 차이가 있는 여러가지 조건들을 처리해야 할 때 사용
  • 위에서 아래로 평가하는 진행방식

 

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

 

if (year < 2015) {

  alert( '숫자를 좀 더 올려보세요.' );

} else if (year > 2015) {

  alert( '숫자를 좀 더 내려보세요.' );

} else {

  alert( '정답입니다!' );

 

조건부 연산자(conditional operator, ? = 물음표 연산자 = 삼항 연산자)

  • 물음표(question mark) 연산자라고도 불린다
  • 피연산자가 세 개이기 때문에 삼항(ternary) 연산자라고도 불린다
  • JS에서 유일하게 피연산자를 3개 받는 연산자

 

let accessAllowed;

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

 

if (age > 18) {

  accessAllowed = true;

} else {

  accessAllowed = false;

}

 

alert(accessAllowed);

 

사용하는 이유는 코드를 간결하게 하기 위해서

 

let result = condition ? value1(true) : value2(false);

 

다중 조건부 연산자

  • ? 를 여러 개 연결 ➡️ 복수의 조건 처리

 

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

 

let message = (age < 3) ? '아기야 안녕?' : // 1 평가

  (age < 18) ? '안녕!' : // 1이 false면 2 평가

  (age < 100) ? '환영합니다!' : // 2가 false면 3 평가

  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'; // 3에서 false면 나오는 메세지

 

alert( message );

 

if 문으로 변형 ⬇️

 

if (age < 3) {

console.log(‘아기야 안녕?’)

} else if (age < 18) {

console.log(‘안녕!’)

} else if (age < 100) {

console.log(‘환영합니다!’)

} else {

console.log(‘나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!’)

}

 

부적절한 ?

 

(a)

let company = prompt(‘what’s company to make the JS?’, ‘’);

 

let message = (company == ‘Netscape’) ?

alert(true) : alert(false);

 

if 문으로 변형 ⬇️

 

(b)

let company = prompt(‘what’s company to make the JS?’, ‘’);

 

if (company == ‘Netscape’) {

console.log(true)

} else {

console.log(false)

};

 

(a)보다 (b)를 더 권장하는 이유는 더 읽기 쉽게 작성된 코드의 가독성 때문이다

 

물음표 연산자를 사용할 때와 if 문을 사용할 때를 잘 분별하여 상황에 맞게 사용하는 것이 베스트다

(예를 들어 물음표 연산자는 조건에 따라 반환 값을 달리하는 목적에 맞을 , if 문은 여러 분기를 만들어 처리할 …)

'JavaScript > 자바스크립트의 기본' 카테고리의 다른 글

nullish 병합 연산자(??)  (0) 2022.07.03
논리연산자  (0) 2022.07.01
비교 연산자  (0) 2022.06.29
기본 연산자와 수학 2  (0) 2022.06.28
기본 연산자와 수학 1  (0) 2022.06.27