Conditional Statements
If Statement
if (condition) {
statement
};조건문
condition 을 만족하게 되면 statement 가 실행
if→ 조건문( )→ 만족할 시 true , 만족하지 않을 시 false 두 값 중 하나{ }→ ( ) 값이 true 일 때 { } 내부의 코드가 실행
예를 들어,
let shot = true;
console.log('Run away!'); // Output: Run away!
// (shot 값이 true 이므로 설정되어 Run awat! 출력)
let shot = false;
console.log('Run away!'); // Output: SyntaxError
// (shot 값이 false 이므로 설정되어 출력되는 값이 없다)If...Else Statements
if (condition) {
statement 1
} else {
statement 2
};조건문
condition이 만족되면 statement 1이 실행되고, 만족되지 않으면 statement 2가 실행
예를 들어,
let shot = true;
shot = false;
if(shot) {
console.log('Run away!');
} else {
console.log('You are safe.');
};
// Output: You are safe.
// shot 변수가 false 이므로 else 의 console.log('You are safe.') 가 출력)Comparison Operators (비교 연산자)
조건문을 사용할 때 비교를 위해 사용하는 연산자
<: Less than>: Greater than<=: Less than or equal to>=: Greater than or equal to===: Is equal to!==: Is not equal to
예를 들어,
let speed = 120;
if(speed > 100){
console.log('Slow down');
} else {
console.log('Okay');
};
// Output: Slow down
// spped value가 120이며, >100 에 대입하였을 때 true 이므로 if문의 코드 출력)Logical Operators (논리 연산자)
&&: and||: or!: not
예를 들어,
let shot = true;
console.log(!shot); // Output: false
//shot이 true이므로 !shot은 false또는,
let place = 'library';
let volume = 30;
if(place === 'library' && volume > 20){
console.log('Lower your voice.');
} else {
console.log('Please keep your silence.');
};
// Output: Lower your voice.
// place가 library이고,(&&) volume은 30으로 20을 초과하므로 if문 출력Truthy and Falsy (참 같은 값, 거짓 같은 값)
- Truthy : Boolean 문맥에서 true 로 실행되는 값
- Falsy : Boolean 문맥에서 false 로 실행되는 값
- Falsy를 갖는 값
0' '," "(empty string)null(no value at all)undefined(variable lacks a value)NaN(not a number)
예를 들어,
let variable = '';
if(variable){
console.log('I\'m true');
} else {
console.log('I\'m false');
};
// Output: I'm false
// variable 값이 falsy 값을 갖는 empty string이므로 else문 출력반대로,
let variable = 21;
if(variable){
console.log('I\'m true');
} else {
console.log('I\'m false');
};
// Output: I'm true
// variable 값이 truthy 값을 갖는 number 21이므로 if문 출력Truthy and Falsy Assignment
Logical operator (논리연산자) 등과 Truthy, Falsy를 활용하여 코드를 단축시킬 수 있다.
예를 들어,
let defaultName;
if(username) {
defaultname = username;
} else {
defaultName = 'Stranger'
};
// 위와 같은 코드를 사용한다면, 사용자가 username을 입력하면 username으로 defaultName이 출력이 되고, 입력하지 않거나 공란으로 두게 되면 Stranger로 출력이 된다.
let defaultName = username || 'Stranger'
// or 연산자 || 를 활용한다면 동일한 의미를 가진 코드가 완성된다. ||연산자를 사용하게 되면, 좌측의 코드가 먼저 출력이 되고, 그렇지 않을 시 우측이 출력되는 메커니즘을 따르기 때문이다.조금 더 활용해보면,
let instrument = '';
let salesList = instrument || 'guitar'
console.log(`We need to sell ${salesList}.`);
// Output: We need to sell guitar.
// instrument 변수가 false값이므로 guitar이 출력
let instrument = 'piano';
let salesList = instrument || 'guitar'
console.log(`We need to sell ${salesList}.`);
// Output: We need to sell piano.
// instrument 변수가 truth값인 piano이므로 piano가 출력Ternary Operator
if...else 문을 다르게 표현하는 방법
if...else 를 삭제하고, ? 와 : 를 사용하여 표현할 수 있다.
예를 들어,
let shot = true;
if(shot) {
console.log('Run away!');
} else {
console.log('You are safe.');
};
// Output: Run away!
// 와 같은 코드는 아래로 변환할 수 있다.
let shot = true;
shot ?
console.log('Run away!'):
console.log('You are safe.');
// Output: Run away! === 를 사용해본다면,
let sound = 'bang'
if(sound === 'bang') {
console.log('Run away!');
} else {
console.log('You are safe.');
};
// Output: Run away!
// 와 같은 코드는 아래로 변환할 수 있다.
let sound = 'bang'
sound === 'bang' ?
console.log('Run away!'):
console.log('You are safe.');
// Output: Run away!Else If Statements
else if
if...else 문에서 두개 이상의 조건이 필요할 경우 사용
예를 들어,
let season = 'summer';
if(season === 'summer') {
console.log ('Hello hotty day!');
} else if(season === 'fall') {
console.log('Hello autumn!');
} else if(season === 'spring') {
console.log('Hello spring!');
} else if(season === 'winter') {
console.log('Hello coldy day!');
} else {
console.log('What a weird season!');
}
// Output: Hello hotty day!The
switchkeyword
switch
복수의 if...else 문은 switch 문의로 변경 가능
예를 들어, 위 예시를 아래와 같이 바꿀 수 있다.
let season = 'summer';
switch(season) {
case 'summer':
console.log ('Hello hotty day!');
break;
case 'fall':
console.log ('Hello autumn!');
break;
case 'spring':
console.log ('Hello spring!');
break;
case 'winter':
console.log ('Hello coldy day!');
break;
default:
console.log ('What a weird season!');
break;
};1) switch문의 variable 값을 case문의 value값과 비교,
→ 일치하면 case문의 코드가 실행
→ 불일치 시 다음 case문으로 넘어가 동일 작업 실행
2) 자바스크립트가 break문을 만나면 해당 switch 블록을 이탈 (다음 switch 블록으로 이동)
3) case문과 매칭되는 키워드가 없을 경우, default문의 코드 실행
Take-Away
- 조건문의 어려움
한번에 너무 많은 내용을 머릿속에 집어넣은 것 같다.
그래도 확실히 막막하기만 하던때보단 조금 나은거 같긴 하다.
그래도 이제 조건문 코드를 보면 적어도 내가 똑같이 따라하긴 어려워도 보고 이해할 수 있을 정도는 되지 않았나 싶다.
- 적용
결국 항상 같은 문제에 부딪힌다.
이걸 내가 어떻게 활용해야 하나?
단순한 프로그램 정도는 짤 수 있을것 같다.
근데 이걸 내가 만든 홈페이지에 어떻게 적용시켜야하냐는 문제는 또 다른것 같다..
앞으로도 계속 고민해봐야할 문제인 듯 싶다.
으악