20/08/31 : 오늘은 자바스크립트의 조건문을 공부했다.
if와 else
if문은 (조건) {내용}으로 구성된다. 이 점만 알면, 어떻게 사용하는 지는 if와 else에 대해 우리가 알고 있는 용법 그대로라서 상당히 이해하기 쉬웠다.
let hungry = true;
if(hungry) { console.log('Time to eat!')};
else { console.log('Are you sure?') };
여기서 주의할 점은 else 다음에는 ()와 함께 condition을 다시 넣지 않는 것이다. 연습문제를 풀 때 else(hungry) {console.log('Are you sure?')} 라고 했더니 에러가 발생했다.
비교 연산자
미만 <
초과 >
이하 <=
이상 >=
같은 ===
같지 않은 !==
다른 것은 아주 직관적인데 ===과 !==는 좀 신기하다. 같지 않음은 =!=로 표현할 수도 있었을 것 같기도 한데 ㅋㅋㅋㅋ
아무튼, 위에서 공부했던 if와 else조건문과 비교 연산자를 활용해 이러한 코드를 짤 수 있다.
let bonusPoint = 600;
if (bonusPoint>600) { console.log('You got a SUPER BONUS!') }
else {console. log('That's a shame...')}
(스플래툰 연어런에서 600점을 넘으면 슈퍼보너스를 얻는 것에서 착안해서 적어봤다. 연어런 꿀잼!)
논리 연산자
논리 연산자는 아주 간단하다. 단 3가지로 이루어져있다.
And &&
Or ||
Not !
And와 Or, Not의 개념을 그대로 이해하면 된다. And(그리고)는 둘다 참일 경우에만 참이고, Or(또는)은 둘 중 한 가지만 참이어도 참이다. Not(부정)은 참이면 거짓, 거짓이면 참이다. Not의 개념이 조금 헷갈렸는데, 조건의 결과를 뒤집는 거라고 이해하니 편했다.
let X = false; //prints false
console.log(!X); //prints true
이런 식으로!
Codecademy의 연습문제를 그대로 가져와 논리 연산자의 예시를 들어보겠다.
let mood = 'sleepy';
let tirednessLevel = 6;
if (mood==='sleepy' && tirednessLevel>8) {
console.log ('time to sleep!') ;}
else {
console.log ('not bed time yet.') ;}
이 경우 sleepy라는 조건은 만족하지만 tirednessLevel을 만족하지 못했으므로 'not bed time yet'이 출력된다. 살짝 졸렸는데 하필 이때 딱 이런 예시가 나오다니.. 더 공부하라는 계시인가 ㅎㅎ;
(9/10일 추가)
||는 or이기 때문에 앞의 한 가지만 참이 되면 뒤는 굳이 연산하지 않는다. 그래서 코드를 짤 때 연산이 복잡하고 무거운 것은 맨 뒤에 놓고 가벼운 것부터 앞에 적는 것이 좋다. 연산의 부담이 최소화가 되도록!
&&의 경우도 마찬가지다. 앞의 value가 거짓이 되면 뒤는 실행되지 않는다. 하나라도 거짓이면 거짓이기 때문에!
Truthy and Falsy
참거짓을 판별하지 않고, 값을 할당받았는지 확인하는 것에만 if문을 사용하기도 한다. 그러니까 뭐라도 적었두었다면 Truthy가 되어 if가 실행되지만 빈값일 경우 Falsy가 되어 if문이 실행되지 않는다.
Falsy로 간주되는 6가지가 있다.
- 0
- " " or ' '
- null
- undefined
- Nan, or Not a numbers
이거를 대체 어느 때 활용하나 궁금했는데 생각보다 여러 곳에서 유용하게 쓰이는 기능이었다. 웹사이트에서 회원가입할 때 '빈칸을 입력하세요!' 하는 데에도 사용하는 듯.
Ternary Operator(삼항 연산자)
if문을 이용하는 것보다 간결하게 나타내줄 수 있는 연산자다. 조건이 하나이고, 실행할 명령도 하나일 때 if문보다 삼항 연산자를 사용하는 편이 간단하다.
조건 ? 첫번째내용 : 두번째 내용
간.단.
let isCorrect = true;
if(isCorrect) {
console.log('Correct!');}
else {
console. log('Incorrect!');}
if문을 사용했다면 이렇게 적었을 것을
isCorrect ? console.log('Correct!) : console.log('Incorrect!') ;
이렇게 줄일 수 있다. 간.단.
let favoritePhrase = 'Love That!';
favoritePhrase === 'Love That!' ? console.log('I love that!') : console.log("I don't love that!");
또 이처럼 비교연산자를 이용할 때도 사용할 수 있다!
else if문
else if문은 else문과 마찬가지로 if 뒤에 오는데, else if를 사용할 경우 두 가지 이상의 조건을 적을 수 있다. 이게 무슨 소리인지 말로 하자니 조금 어려운데, 예제를 보면 알 수 있다
let score = 80;
if(score>=90) {
console.log('A');}
else if(score>=80){
console.log('B');}
else if(score>=70){
console.log('C');}
else {
console.log('F');}
ㄴ여기서도 else 뒤에는 조건 붙이지 않는 것 주의!
Switch문
조건이 100개 이상일 때 else if를 이용한다면 100개가 넘는 값을 일일히 체크해야한다. 생각만해도 복잡하다! 이럴 때 사용하는 것이 바로 Switch문. Switch문은 여러 개의 코드블록 중 하나를 선택해야할 때 사용한다.
let athleteFinalPosition = 'first place';
switch(athleteFinalPosition){
case'first place':
console.log('You get the gold medal!');
break;
case'second place':
console.log('You get the silver medal!');
break;
case'third place':
console.log('You get the bronze medal!');
break;
default:
console.log('No medal awarded.')
break;
}
주의해야할 점은 case마다 뒤에 break를 붙이지 않으면 전부 실행되어버린다는 것이다. 또한 예외가 없을 경우 default는 굳이 사용하지 않아도 된다.
