[JavaScript]조건문(if else문,변수와 비교연산자, 논리 연산자)

조건문

조건문과 Boolean은 아주 밀접한 관계를 가지고 있다.

 

조건문이란 무엇일까?

조건문은 주어진 조건에 따라서 application을 다르게 동작하도록 하는 것.

-우리가 만드는 프로그램을 더 좋은 상태로 만들어준다.

 

1. if문

//if 뒤의 괄호에는 Boolean의값 true,flase만 들어갈 수 있다.
if(true){
  alert('result: true');
}
//if 뒤의 true가 나왔기 때문에 중괄호 안의 값을 출력한다.
if(false){
  alert('result: true');
}
//if뒤에 false가 나왔기때 중괄호 값을 출력하지 않는다.

//조건문과 boolean(데이터타입)은 아주 밀접한 관계를 가지고있다.

예제

if(true){
  alert(1);
  alert(2);
  alert(3);
  alert(4);
}
alert(5);

//모두 출력한다.


if(false){
  alert(1);
  alert(2);
  alert(3);
  alert(4);
}
alert(5);

//5만 출력한다.

 2. else문

if(true){
  alert(1);
} else{
  alert(2);
}
//if의 값이 true로 실행되어 else는 실행되지 않는다.

if(false){
  alert(1);
} else{
  alert(2);
}
//if의 값이 false로 실행되지 않음으로 else가 실행된다.

3. else if

//앞에 조건문이 실행된다면 다음 조건문들은 실행되지 않는다.
if(false){
  alert(1);
} else if(true){
  alert(2);
} else if (true){
  alert(3);
} else{
  alert(4);
}
//2출력

if(false){
  alert(1);
} else if(false){
  alert(2);
} else if (true){
  alert(3);
} else{
  alert(4);
}
//3출력

(! 중요) if뒤에 boolean값이 들어가는 것을 설명하기 위해 true와 false를 대입한 것.

실제로 true와 false가 들어가면 옳지 못한 조건문이다.

a=1;

if(a===1){
  alert(1);
}

실제 조건문은 가변 할 수 있는 값이 들어가야 한다.

---

변수와 비교 연산자

prompt('당신의 나이는?');

alert(prompt('당신의 나이는?'));
//prompt먼저 실행 후 alert의 prompt값을 출력한다.

alert(prompt('당신의 나이는?')*2);
//prompt값의 2배를 해준다.

로그인할 때 사용하는 logic

var id = prompt('아이디를 입력해주세요')
if( id ==='codinglog'){
  var password =prompt('비밀번호를 입력해주세요');
  if(password === '111111'){
    alert('로그인하셨습니다'+ id +'님 반갑습니다');
  } else{
    alert('로그인에 실패하셨습니다.');
  }
} else{
  alert('아이디가 일치하지 않습니다.');
}

비교란?

값과 값 사이의 크기가 일치하는지, 크거나 작은지 비교하는 데 사용된다.

 

연산자: 어떠한 작업을 컴퓨터에게 지시하기 위한 기호이다.

a=1 : 식의 풀이(하단)

a->(변수) / 1 ->(값, 상수)  / = ->(대입 연산자, (좌항에 있는 값을 우항에 대입한다.),  이항 연산자(좌항과 우항 두 개의 값을 연결하는 연산자))

==	동등 연산자(equal operator)	좌항의 값과 우항의 값이 서로 같다.
>	비교 연산자	좌항의 값이 우항의 값보다 크다.
<	비교 연산자	우항의 값이 좌항의 값보다 크다.
===	일치 연산자(strict equal operator)	좌항과 우항이 '정확'하게 같을때 .
=	대입 연산자	우항의 값을 좌항에 대입한다.
!=	!는 반대(부정)의 의미를 가진다.	==와 정반대의 결과를 보여준다
!==		!==는 !=와 ==의 관계와 같다. 정확하게 같지 않다는 의미이다.
>=	비교연산자	좌항이 우항보다 크거나 같다.
<=	자비교연산자	우항이 좌항보다 크거나 같다.

(상단)이러한 값을 가질 때 True의 값을 출력한다.

비교 연산자는 True / False의 값을 뽑아낸다. (블린의 데이터 형식을 가진다.)

 

동등 연산자와 일치 연산자

//일치 연산자
alert(1 === "1");
//false의 출력 값을 뽑아낸다.
//좌항과 우항의 데이터 타입(형식)과 값이 정확히 일치해야한다.

//동등 연산자
alert(1 == "1");
//true의 출력 값을 뽑아낸다.
//데이터 타입은 다르지만 정보의 의미는 동일하기 때문에 true의 값을 출력한다.

Q. python,c와 같은 언어와 다르게 JS에선 왜 true를 왜 뽑아낼까?

A. JS와 PHP의 특이한 점은 값이 같은 의미를 가진다면 같다고 인정해준다.

*거대한 프로그램을 운영할때 동등 연산자를 사용한다면  버그나 오류가 발생할 확률이 크다.

*작은 프로그램을 편리 할 수 있지만 문제가 발생할 확률이 크기에 정확한 형식을 맞춰 사용하는 것이 좋다.

---

논리 연산자

1. && (AND연산자)

if true && true{
  alert(1);
}

//&&=and연산자

&&이용한 로그인(동일한 logic은 아니지만 이런 식으로 짧게 만들 수 있다는 것을 보여주기 위함이다.)

var id = prompt('아이디를 입력해주세요');
var password = prompt('비밀번호를 입력해주세요');
if( id ==='codinglog' && password === '111111'){
    alert('로그인하셨습니다'+ id +'님 반갑습니다');
} else{
  alert('아이디가 일치하지 않습니다.');
}

 

2. || (OR연산자)

if(true || true){
  alert(1); 
}
//둘중 하나라도 true면 true를 출력한다.


 var id = prompt('아이디를 입력해주세요');
 var password = prompt('비밀번호를 입력해주세요');
if( (id ==='codinglog' || id === 'yoonmin' || id === 'tistory') && password ==='111111')){
    alert('인증 했습니다');
} else{
  alert('인증에 실패했습니다'):
}
//id가 하나라도 일치한다면 비밀번호 기입으로 넘어가 인증 성공, 불일치시 인증 실패

3.!(NOT연산자)

if(true && !true){
  alert(1); 
}
//!true =false이기 떄문에 출력이 안된다.

 

(+추가) Boolean의 대체제

if() 뒤에 true, false대신 1과 0이 들어가도 된다.

JS에선 true=1, false=0으로 인식하기 때문이다. 

(but, 0과 1을 사용한 코드를 사용하는 건 권하지 않는다.)

 

기타 flase로 간주되는 데이터형

//flase
if(''){ alert('빈문자열')}
//실행이 안된다. ' '안에 아무 값이 없기 때문
if('egoing'){ alert('빈문자열')}
//아무 문자열을 넣어주면 실행이 된다.
if(undefined){alert('undefined')}
//실행이 안된다. undefined는 JS에서 False로 간주되기 때문에 실행이안된다.

var a
if(!a){ alert('값이 할당되지 않은 변수') }
//변수를 설정했지만 값을 설정해주지 않았기 때문에 undefined이다. + !가 있어 not연산을 진행한다.

if(!null){ alert(null);}
if(!NaN){ alert(NaN); }
//위의 두 코드는 실행이 된다.