조건 처리

조건에 따라서 if문과 조건부 연산자 ? 를 사용할 수 있습니다.

1. if 문

• if( ) 괄호 안에 들어가는 조건을 평가합니다.

• 결과가 참이라면 truthy을 반환, 거짓이라면 flasy를 반환 합니다.

값	설명
truthy	true로 평가되는 값 (참)
flasy	false로 평가되는 값 (거짓)

1.1 if문 문법

let year = propmt("ES6(ES2015)버전은 언제 출시 되었을까요?"," ");

if (year==2015) {	// year가 2015와 동일하다면, 본문 수행
 	alert("정답입니다."); 
};

코드 확인

let random = Math.floor(Math.random() * 2) + 1;	// 1~2사이의 난수 구하기

if(random < 2){
 console.log("2보다 작은 변수입니다");
 console.log(random);
}


/* 
if문은 random 변수가 2보다 작은 값일때만 중괄호의 코드를 실행합니다.
*/

1.2 논리형으로 변환

• if문은 괄호안의 표현식을 연산하고, 결과를 논리형으로 반환합니다.

• if문의 결과가 참이라면 항상 실행되고, 거짓이라면 절대 실행되지 않습니다.

• 숫자 0 빈 문자열"" null undefined NaN들은 논리형으로 변환 시 거짓이므로
  실행되지 않습니다.

• 이외의 값들은 논리형으로 변환 시, 값이 있기에 참이 됩니다.

/* 실행되지 않는 if문 */
if(0) {
 	alert("거짓");	// 0을 논리형으로 변환하면, 거짓이므로 if문이 실행되지 않습니다
}

/* 실행되는 if문 */
if(1) {
 	alert("참"); 	// 1을 논리형을 변환하면, 참이므로 if문이 항상 실행됩니다
}


/* 변수(cond)에 할당된 값을 if문에 전달 할 수 있음 */
let cond = (year == 2015); // year의 변수의 값이 2015과 똑같다면 : 참, 아니라면 : 거짓을 반환

if (cond) {					// cond 변수의 값이 참이라면 실행, 거짓이라면 작동안함
  ...
}

2. else 절

• if( ) 조건문이 거짓일 때 발동합니다.

• if 또는 else-if와 같이 사용할 때, 조건문의 마지막에 존재합니다.

❤️ 문법

let year = prompt('나는 if문을 이해하고 있을까요? 맞다면 네라고 말해주세요.',' ');

/* year 변수에 전달받은 값이 문자열 "네"라면 if문 , 그 이외의 답은 else절로 작동 */
if (year == "네") {
 	alert('잘하셧어요 다음 챕터로 넘어갈게요'); 
} else {
 	alert('다시 복습 해봅시다');	// "네" 이외의 값이 들어올 때 작동합니다.
}

코드 확인

3. else if로 복수 조건 처리하기

• if ()문이 거짓일 때, 다른 조건문을 비교하려고 할 때 사용하는게 else if () 입니다.

let year = prompt('1996년생은 몇살일까요?', '');

if (year < 27) {						// year의 변수값이 27보다 작다면 조건문 발동
    alert('제 나이는 그것보다 많습니다.')
    } else if (year > 27) {				// year의 변수 값이 27보다 크다면 조건문 발동
    alert('제 나이는 그것보다 적습니다.') 
    } else if (year == 27){				// year의 변수 값이 27과 같다면 조건문 발동
    alert('정답입니다'); 
    } else {							// if문 이외의 값이 입력받았을 시 조건문 발동
    alert('값은 정수로만 입력해주세요.');
    }


/* 
마지막에 `else`문은 필수가 아니라 선택사항 입니다.
*/

4. 다중 조건문

• 조건문 안에 조건문을 넣는 방식

/* 1. 다중 조건문을 사용하지 않았을 때 */

const password = prompt('please enter a new password');

// 비밀번호 개수가 6개 이상인 경우
if (password.length >= 6) {
    console.log("LONG ENOUGH PASSWORD!");
} else {
    console.log("PASSWORD TOO SHORT! Must be 6+ characters");
}

// 비밀번호에 공백의 유무를 찾는다. 
if (password.indexOf(' ') === -1) {  // -1이 나온다면 공백을 찾지 못한경우 (공백 X) 
    console.log('비밀번호에 공백이 없습니다');
} else {
    console.log('비밀번호에 공백이 있습니다. 수정이 필요합니다.');
}

/* 2. 다중 조건문을 사용 */

const password = prompt('please enter a new password');

// 비밀번호 개수가 6개 이상인 경우
if (password.length >= 6) {
    if (password.indexOf(' ') === -1) {  // -1이 나온다면 공백을 찾지 못한경우 (공백 X) 
        console.log('올바른 비밀번호 입니다.');
    } else {
        console.log('길이는 충분하나, 비밀번호에 공백이 있습니다.');
    }
} else {
    console.log("비밀번호가 너무 짧습니다. 6개 이상으로 설정 바랍니다.");
}


/* 
다중 조건문을 사용함으로써, 사용자에게 필요한 피드백만 제공할 수 있습니다.
(보통 로그인 홈페이지 하나당 한 개의 피드백만 전달합니다.)

단점으로는, 중첩으로 사용하다 보면 무거워질 수 있기 때문에 추후에는 논리적으로 결합해서
조건문을 사용합니다.
*/

5. 조건문 연산자 '?'

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

• 조건문 연산자는 피 연산자가 3개이므로 삼항 연산자라(ternary)고 부릅니다.

❤️ ? 연산자 대신 IF문 사용 

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

if (age > 18) {
  accessAllowed = true;			// age의 값이 18보다 크다면 변수에 true를 반환
} else {
  accessAllowed = false;		// age의 값이 18보다 작거나 같다면 변수에 false를 반환
}

alert(accessAllowed);			// 입력값에 따라서 true, false 출력

❤️ ? 연산자 문법 

let result = cond ? value1 : value2;
/* 평가 대상 cond가 참이라면 value1가, 거짓이라면 value2가 반환됩니다. */


let accessAllowed = (age > 18) ? true : false;
/* 평가대상 age가 18보다 크다면, true 반환, 작거나 같다면 false 반환 
	? 조건부 연산자는, > 비교 연산자보다 우선순위가 낮으므로 괄호가 필수는 아니다 */


/* 위 코드는 아래코드와 동일하다 */
let access = (age > 18);
/* 비교 연산자(>)는 결과 값을 논리형으로 반환하기 때문에
age가 18보다 크다면, 참을 반환, age가 18보다 작거나 같다면, 거짓을 반환 */

5.1 다중 연산자 '?'

• 조건부 연산자 ?를 여러 개 연결하면 복수의 조건을 처리할 수 있습니다.

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

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

alert( message );


/* */
(age < 3) ? '아기야 안녕?' : (age < 18)
1) age가 3보다 작다면, 문자열 출력 | 그렇지 않다면 다시 조건을 비교한다 (age < 18)


(age < 18) ? '안녕!' : (age < 100)
1) age가 18보다 작다면, 문자열 출력 | 그렇지 않다면 다시 조건 비교 (age < 100)


(age < 100) ? '환영합니다!' : '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';
1) age가 100보다 작다면 '환영합니다' 문자열 출력 | 
그렇지 않다면 ' 나이가 아주많으시거나~~'  문자열이 출력 된다.

위 예제를 elsf if문으로 표시한다면 아래와 같이 사용할 수 있습니다.

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

if(age < 3) {
  message='아기야 안녕?';
} else if (age < 18) {
  message= '안녕?';
} else if (age < 100) {
  message= '환영합니다!'; 
} else {
  message= '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'; 
}

alert(message);

코드 확인

5.2 부적절한 ? 조건문

• 조건문을 사용할 때 if( )문 대신에 ?을 사용하는 경우가 종종 있습니다.

• ? 조건문을 사용했을 때, 가독성이 떨어지는 코드를 예로 보겠습니다.

let company = prompt('자바스크립트는 누가 만들었나요?', '');

(company == 'Netscape') ? alert('정답입니다') : alert('틀렸습니다');

❤️ 위의 ? 연산자와 동일한 코드를 IF문으로 구현

let company = prompt('자바스크립트는 누가 만들었나요?','');

if (company == 'Netscape') {
 	alert('정답입니다!'); 
} else {
 	alert('틀렸습니다!'); 
}

조건문을 여러 개 사용하거나, 조건문의 길이가 길어진다면 ? 연산자 보다는
IF 조건문이 가독성이 좋습니다. 결과는 동일하지만 수평인 코드보다는 수직인
코드가 읽기 편하므로 조건에 따라서 IF문과 ? 연산자를 적재적소 합시다.