섹션 4. 비교
1강. 연산자
- 연산자 : 어떤 작업을 컴퓨터에 지시하기 위한 기호
예 : a=1
a : 변수
= : 대입연산자 (좌항에 있는 값에 우항을 대입한다)
1 : 값 (상수, 변수에 대항되는 개념) - 비교 연산자 : >, <, =
결과 : true, false - 블린(boolean)이라고 부름
2강. 비교 연산자 (==과 ===)
1) 동등 연산자(Equal Operator) : ==
좌항과 우항을 비교해서 값이 같다면 True, 다르다면 False
- ※ =가 하나면 대입하라는 대입연산자이다.
2) 일치 연산자(Strict Equal Operator) : ===
alert(1==="1") //false : 데이터의 형식이 다름
alert(1=="1") //true : 비슷하게 생긴 데이터의 외형은 같음
거대 프로그램에서 요소가 Strict 하지 않으면 버그가 발생할 가능성이 매우 크다.
그래서 == 보다는 === 을 사용하는 것이 훨씬 좋다.
데이터 타입이 다른 것은 다른 것이다.
3강. ===를 사용하자!
alert(null == undefined); //true
alert(null === undefined); //false
alert(true == 1); //true
alert(true === 1); //false
alert(true == '1'); //true
alert(true === '1'); //false
alert(0 === -0); //true
alert(NaN === NaN); //false
- NaN : 성립하지 않는것
undefined : 정의되어있지 않은
- 예 : var a;
null : 값이 없음
- undefined vs null
- 둘 다 비슷해 보이지만 다르다.
- undefined : 프로그래머가 정의하지 않음
- null : 프로그래머가 정의해서 값이 없는 것
<데이터의 Type>
- Boolean : true / false
- Numbet : -1, 0, 1, 2, 3
- String : "a", "b", "c"
- Undefined : undefined
- Null : null
<참고, ==와 ===의 차이점>
https://dorey.github.io/JavaScript-Equality-Table/
JS Comparison Table
=== (negated: !==) When using three equals signs for JavaScript equality testing, everything is as is. Nothing gets converted before being evaluated.
dorey.github.io
4강. 부정과 부등호
! 는 부정을 의미한다.
1) 같지 않다 : !=
alert(1 != 2); //true
alert(1 != 1); //false
2) 정확하게 같지 않다 : !==
>= : 좌항이 우항보다 크거나 같다.
<= : 좌항이 우항보다 작거나 같다.
섹션 5. 조건문 - ★★★가장 중요
1강. 조건문이란? (if, else)
컴퓨터가 계산기와 다른 가장 큰 점이 조건문이다.
조건문(Conditional Statement) : 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것.
- if 예시
if(true/false) {
alert('resule : true');
}
- true면 alert를 띄우고, false면 아무 일도 일어나지 않음
- if(true) {
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5); - 결과 : 팝업이 1, 2, 3, 4, 5가 뜬다.
- if(false) {
alert(1);
alert(2);
alert(3);
alert(4);
}
alert(5); - 결과 : 팝업이 5만 뜬다.
2강. else, else if
- if(true) {
alert(1);
} else {
alert(2);
} - 결과 : 1 (뒷부분 실행 안됨)
- if(false) {
alert(1);
} else {
alert(2);
} - 결과 : 2 (뒷부분까지 실행됨)
else : 참, 거짓에 따라 다른 일을 하게 해 준다.
else if : 앞에서 false가 나오면 실행, 앞이 true면 실행되지 않는다.
- if(false) { //실행X
alert(1);
} else if(false) { //실행X
alert(2);
} else if(true) { //실행O
alert(3);
} else { //앞에서 실행됐으므로 실행X
alert(4)
} - 결과 : 3
3강. 조건문의 응용
변수와 비교연산자
prompt : 입력창을 통해 상대방의 값을 받아낼 수 있는 명령어
4강. 논리 연산자
논리연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다.
1) && : and
좌항과 우항이 모두 true일 때만 참이 된다.
id와 password가 모두 true여야 웰컴메시지가 출력된다.
하나라도 맞지 않으면 '로그인 정보가 일치하지 않습니다.'라는 메시지가 출력된다.
2) || : or
여러 개 중 하나라도 참이면 참
모두 거짓이면 거짓
참고로 && 앞의 정보가 false이면 뒤의 password 정보는 거들떠보지도 않는다.
앞의 정보가 true여야 뒤의 정보를 검증한다.
3) ! : not
!true = false
!false = true
5강. Boolean의 대체재
숫자 1 = true
하지만 가급적 true/false를 쓸 것
<false로 간주>
- 빈 문자열('')
- undefined
- null
- NaN
조건문은 가장 중요하다.
JavaScript, Python, Java, C 등을 배울 때도 자주 나온다.
<느낀 점>
여기까지 듣고 나니까 React보다 이걸 먼저 들었어야 했다는 후회가 남는다.
이걸 보시는 분들은 JavaScript 강의를 먼저 들으시길 바란다.
'JavaScript' 카테고리의 다른 글
| 0029. JavaScript 공부하기4 - 함수(Function), 배열(Array), 객체(Object) (1) | 2024.01.03 |
|---|---|
| 0028. JavaScript 공부하기3 - 반복문(while, for, break, continue) (1) | 2024.01.03 |
| 0026. JavaScript 공부하기 1 - 크롬 개발자 도구, 콘솔, 숫자와 문자, 변수 (Feat. 생활코딩) (2) | 2024.01.02 |
| 0026. Front-end 공부하기17 - Project 실습(2), 코드 에러잡기 전쟁 (0) | 2024.01.02 |
| 0025. Front-end 공부하기16 - Project 실습, 미니 블로그 만들기 (1) | 2023.12.27 |
