[모던 JavaScript 파헤치기 DAY2]

김하은·2022년 9월 25일
2

Javascript

목록 보기
2/4
post-thumbnail

📍2-9. 비교연산자📍

-> 자바스크립트의 기본수학연산.
ex)
1) a > b -> 보다큼 , a < b = 보다 작음.
2) a >= b -> 보다 크거나 같음. a <= b -> 보다 작거나 같음.
3) a == b -> 같음 (동등) 주의! 자바스크립트에서 = 하나는 "할당"을 의미함.
4) a != b -> 같지 않음.

💙 불린형 반환
-> 비교 연산자 역시 값을 반환한다. 반환값은 "불린형"
-> true 가 반환되면, '긍정' '참' '사실' 을 의미한다.
-> false 가 반환되면, '부정','거짓','사실이 아님'을 의미.

ex)

alert(3 > 1); // true 
alert( 3 == 1)  // false
alert ( 2 =! 1)  // true

-> 반환된 불린값은 다른 변수에도 할당이 가능하다 .
ex)

let result = 5 > 4; //
alert(result);

💙 문자열 비교
-> 사전순으로 문자열을 비교한다. '사전편집순'이라고도함.
문자열 하나하나를 비교한다.
ex)

alert ('Z' > 'A') ; // true

1) 두 문자열의 첫글자 비교
2) 첫 번빼 문자열의 '첫' 글자 > 다른 문자열의 '첫' 글자 보다 크면
이렇게 결론내고 종료.
3) 첫번째 문자열 같으면 그 두번째 문자열로 비교 후 종료.
4) 이 마저도 같다면, 문자열의 길이로 비교한다.

💙 다른 형을 가진 값 간의 비교.
-> 비교 하려는 값의 자료형이 다르면 값들을 숫자형으로 바꾼다.
ex)

alert( '5'> 2); // true, 문자열 '5' 가 숫자로 변환.

🟣불린값의 경우
-> true 는 1 / false 는 0
ex)

alert(true == 1); // true

💙 일치연산자
-> 💥동등 연산자 ==은 0과 false를 구별하지 못한다. (피 연산자가 문자열일때도)
ex)

alert( 0 == false) // true

따라 , 📢일치 연산자 === 를 이용하면 형변환 없이 값울 비교할수 있다.
일치 연산자 === 염격한 동등 연산자 .
(자료형의 까지 검사하기 때문에 a 와 b의 형이 다를 경우 즉시 false를 반환)

💙 null 과 undefined 비교하기
🟣 === 일치 연산자를 사용하여 비교 ( 두 값의 자료형이 달라 undefined)
🟣 == 동등 연산자를 사용하여 비교 ( 특별한 규칙 적용 되어 true)

💙 null 과 0 비교하기
-> 동등 연산자 == 와 비교연산자 >=, > 는 동작 방식이 다르다.
비교 연산자의 동작원리에 따라 null이 숫자형으로 인식되어 0이 된다.
ex)

alert(null > 0 );  // false
alert( null == 0 ); // false
alert( null >=0 ); // true 

// 마지막에서 null 이 크거나 같다면 위에 로직들도 둘중 하나의 결과값이 true 로 나와야 하는데 왜 false로 나올까?

-> 동등 연산자 == 는 피연산자가 undefined나 null일때 형 변환을 하지 않는다.

💙 비교 불가능한 undefined
-> undefined 는 다른 값과 비교 하면 안된다.
ex)

alert ( undefined > 0 ); // false 출력
alert ( undefined < 0 ) ; // false 출력 
// 비교 연상자에서는 undefined -> NaN 으로 변환된다. NAN 가 피 연산자 인 경우 비교 연산자는 항상 false 를 반환한다. 
alert ( undefined == 0);  

-> 비교 연산자에서 null 값은 숫자형으로 인식이 되지만, undefined는 NAN 이 된다.

📍2-10.if와 '?'를 사용한 조건 처리📍

-> 조건에 따라 다른 행동을 취해야 할때 if문과 '물음표' 연산자인
? 조건부 연산자를 사용.

💙 'if'문 -> 괄호 안에 들어가는 조건을 평가 하는데 그, 결과가 true면 코드 블록 실행
ex)

let num = prompt("0 이상의 숫자를 입력하세요")
if (num>=0)
{
alert("입력한 숫자는 0또는 양수입니다.")
}

💙 불린형으로의 변환
-> if(...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환.
❌0 , "", null, undefined, NaN 은 불린형으로 변환시 false가 된다. \
❌ 조건식의 값에 이것들이 들어가면 절대 실행되지 않는다.

💙 'else'절
-> if 문엔 else절을 붙일 수 있습니다. else뒤에 이어지는 코드 블록은 조건이 "거짓!!"일때 실행
ex)

let year = prompt ("오늘의 년도는?");

if( year == 2022 ) {
	alert("정답입니다");
}else {
  alert("아닙니다!")
} 
  

💙 'else if'로 복수 조건 처리하기
-> 조건을 여러개 처리 해야 할때 else if 문을 사용할수 있다.
ex)

let age = prompt ("지금 제 나이는 몇살일까요? ", "");


if ( age < 20){
  alert("저도 젊었으면 좋겠어요. ");
} else if (age > 30 ){
  alert( "이렇게 나이들지는 않았어요");
} else {
  alert('정답 입니다!');
}

-> if 문의 첫번째 조건을 확인한다.
이 조건이 거짓이라면 다음 조건을 확인한다. 다음 조건 또한 거짓이라면 else 절 내의 alert를 실행한다.

💙 조건부 연산자?
-> 조건에 따라 다른 값을 변수에 할당해줘야 할때가 있다.
ex)

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

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

alert(Myage); 

💥 조건부 연산자를 사용하면 위 예시를 더 짧고 간결하게 변형할 수 있다.
💥 조건부 (물음표 연산자) 이용하기!!!!!!
💥 조건부 연산자는 ? (물음표) 로 표시 하고 피연산자를 3개나 받는다 .
🛑 피 연산자를 3개난 받는건 조건부 연산자가 유일하다 🛑

ex)

let result = condition ? value1 : value2;
// condition 이 true 야? true 면 value1 을 출력해. 그게 아니고 거짓이라면 value2를 반환.

let Myage = (age > 18) ? true : false;

💙 다중 연산자?
-> 물음표 연산자? 를 여러개 연결하면 복수의 조건을 처리할수 있다.
ex)

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

let message = (age < 3)? '애기 응애 '? : (age < 18)? '안녕!학생' : (age < 100) ? '환영합니다!' : 
'어떤걸 입력하신 건가요?!';

alert(messge);
/*
1. 조건문 (age < 3) 를 검사한다. 그 결과가 참이면 '애기 응애'를 반환단다. 
그렇지 않으면 첫번째 : (콜론) 에 있는 조건문 (age < 18) 을 검사한다.
2.  그 결과가 참이면 '안녕!학생!'을 반환단다. 그렇지 않다면 다음 :(콜론) 인 조건문  (age < 100) 을 검사한다. 그 결과가 참이면 '환영합니다'를 반환한다. 
3. 그렇지 않다면 마지막 이후의 표현식인 '어떤걸 입력하신건가요?!' 를 반환한다. ]
*/

-> ? 연산자를 사용해서 여러번의 조건식을 쓸수 있다.

💢💢💢주의점!!!!!!!!!!💢💢💢
-> 물음표 연산자는 조건에 따라 값을 달리하려는 목적으로 만들어 졌기 때문에 목적이 아닌이상
쓰는것을 자제하는게 좋다.
보통 코드를 입력할땐 한줄에 나란히 적는것 보다는,
가독성을 위해 여러 줄로 나뉘어서 작성된 코드 블록이 훨씬 읽기가 쉽다.
@@@ 여러 분기를 만들어 처리할때는 if문 을 사용하자 @@@

공부후기 : 무조건 짧은 코드를 써야 좋다라는 생각이 있었는데
무었보다 중요한건 "가독성 좋은 코드" 를 쓰는게 좋다고 느꼈다.
또한 null, uindefined의 차이점을 알았다.

profile
꾸준함을 이기는것은 없다

0개의 댓글