자바스크립트에서(파이썬이나 다른 프로그래밍 언어에서도 마찬가지일 것이다) 조건이 충족되면 어떤 코드가 실행될 수 있도록 제어할 수 있다.
if (false) {
console.log("Hello, world");
}위의 console.log는 실행되지 않는다. ()안에 들어오는 코드가 조건인데, 이미 조건이 false로 전제되어 있기 때문이다. true로 되어 있다면 console.log는 실행된다. 하지만 false와 true로 조건문을 실행하는 것은 무의미하다. false라면 그냥 코드를 안적으면 되는 것이고 true라면 if 없이 쓰면 되기 때문이다.
이렇게 if문을 통해서 ()안의 조건이 충족되면 {}의 코드가 실행되도록 할 수 있다. 더 나아가 else if, else를 써서 'A라면 B를 해주세요, 하지만 C라면 D를 해주세요. 이도저도 아니면 E를 해주세요'라는 조금 더 복잡한 조건문을 만들 수 있다.
if (A) {
B
} else if (C) {
D
} else {
E
}물론 위의 A, B, C, D, E는 아무것도 정의되지 않은 코드이기 때문에 정상적으로 실행되지 않는다. console로 실행해보니 에러가 뜬다.
var something = true;
var moreSomething = true;
if (something) {
console.log("I am inside something");
if (moreSomething) {
console.log("I am inside moreSomething)";
} else {
console.log("I never gets called");
}
} else {
console.log("I never gets called either");
}
// 위와 같이 실행할 경우
// I am inside something
// I am inside moreSomething
// 만 출력된다.이렇게 서로 if문에 if문이 들어가도록 중첩되게 사용할 수도 있다.
if (A) {
// one..
} else if (B) {
// two..
} else if (C) {
// three..
} else if (D) {
// four..
} else if (E) {
// five..
} else {
// six..
}유의할 점으로, 위와 같이 코드를 짰을 때 A랑 C가 true더라도 A 조건의 one만 실행된다. else는 '~~가 아니면 ~~을 해라'라는 뜻이기 때문에, 앞의 것이 true이면 뒤의 것은 실행되지 않는다.
- Quiz
if (true) {
console.log(1);
} else if (true) {
console.log(2);
} else {
console.log(3);
}
if ("") {
console.log(1);
} else if ("a") {
console.log(2);
} else {
console.log(3);
}
if (null) {
console.log(1);
} else if (5) {
console.log(2);
} else {
console.log(3);
}맨 위의 if문은 맨 처음부터 true이므로 1이 출력된다. 두 번째 if문에서는 처음에는 Falsy값인 ""이 조건으로, false로 인지하기 때문에 두 번째에서 Truthy 값인 "a"가 true로 인식되어 2가 출력된다. 3번째도 마찬가지로 처음에 Falsy값인 null로 인해 false로 인지하여 1이 출력되지 않고 두 번째에서 Truthy값인 5를 true로 인지하여 2가 출력된다.
- Switch
if문과 비슷한 것이 switch문인데 switch문은 case를 사용한다.
var expr = 'Bananas'
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Apples':
console.log('Apples are $0.32 a pound.');
break;
case 'Bananas':
console.log('Bananas are $0.48 a pound.');
break;
case 'Cherries':
console.log('Cherries are $3.00 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
break;
default:
console.log('Sorry, we are out of ' + expr + '.');
}
console.log("Is there anything else you'd like?");
// 위의 코드를 실행할 경우
// 'Bananas are $0.48 a pound.'
// "Is there anything else you'd like?")
// 가 출력된다.말그대로 해당되는 case를 찾아간다.
var expr = 'Bananas';
switch (expr) {
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Apples':
console.log('Apples are $0.32 a pound.');
break;
case 'Bananas':
console.log('Bananas are $0.48 a pound.');
case 'Cherries':
console.log('Cherries are $3.00 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
break;
default:
console.log('Sorry, we are out of ' + expr + '.');
}
console.log("Is there anything else you'd like?");
// 'Bananas' case에 break가 빠져있다.
// Bananas are $0.48 a pound.
// Cherries are $3.00 a pound.
// Is there anything else you'd like?
// 가 출력된다.이 때 주의할 것이 break인데, break를 각 case마다 설정해두지 않는다면 다음 case문이 실행된다.
var expr = 'Pineapple';
switch (expr) {
default:
console.log('Sorry, we are out of ' + expr + '.');
case 'Oranges':
console.log('Oranges are $0.59 a pound.');
break;
case 'Apples':
console.log('Apples are $0.32 a pound.');
break;
case 'Bananas':
console.log('Bananas are $0.48 a pound.');
break;
case 'Cherries':
console.log('Cherries are $3.00 a pound.');
break;
case 'Mangoes':
case 'Papayas':
console.log('Mangoes and papayas are $2.79 a pound.');
break;
}
console.log("Is there anything else you'd like?");
// 위 코드를 실행할 경우
// 'Sorry, we are out of Pineapple.'
// 'Oranges are $0.59 a pound.'
// "Is there anything else you'd like?"
// 가 출력된다.또 다른 주의점은 default문이다. 아무것도 해당하지 않을 경우 기본적인 문구가 나오도록 설정하는 것인데, 위와 같이 맨 마지막에 위치한 경우가 아닐 경우 defauly문에는 break가 없기 때문에 break를 만나기 전까지의 코드가 실행된다. 따라서 default는 마지막에 넣어주는 것이 좋다.
switch 참고 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/switch
'프로그래밍 > 바닐라코딩_Prep Guide' 카테고리의 다른 글
| Step 2. JavaScript(6) - Exercise (0) | 2021.11.25 |
|---|---|
| Step 2. JavaScript(5) - for, 반복문 (0) | 2021.11.25 |
| Step 2. JavaScript(3) - Truthy and Falsy + Logical Operator (0) | 2021.11.25 |
| Step 2. JavaScript(2) (0) | 2021.11.25 |
| Step 2. JavaScript(1) (0) | 2021.11.24 |
