27_[vanillajs]조건문

조건문

• 특수한 상황에 특정 작업을 실행해줄 수 있음

1. if문
   • 특정 조건이 만족될 때 실행

const a = 1;
//if문
if(a+1 ===2){
	console.log(`a+1=${a+1}`);//a+1=2
}

• 상수 혹은 변수는 동일한 이름의 변수를 지역변수가 존재할 수 있는 블록 범위 내에서 아래와 같이 사용 가능!

const a = 1;
//if문
if(a+1 ===2){
    const a = 2;
    console.log('if문 밖의 a일까? a:'+a);//if문 밖의 a일까? a:2
    
}

• 앞서 언급되었던, var와 let 의 차이

1) let,const로 변수, 상수가 구분이 잘 된다!

2) var는 영역구분이 모호하다!

➡️

(1)let을 사용하면

let a = 1;
//if문
if(a+1 ===2){
   //console.log(`a+1=${a+1}`);//a+1=2
    let a = 2;
    console.log('if문 밖의 a일까? a:'+a);//if문 밖의 a일까? a:2
    
}
console.log('if문 밖의 a일까? a:'+a);//if문 밖의 a일까? a:1

(2)var를 사용하면

var a = 1;
//if문
if(a+1 ===2){
   //console.log(`a+1=${a+1}`);//a+1=2
    var a = 2;
    console.log('if문 밖의 a일까? a:'+a);//if문 밖의 a일까? a:2
    
}
console.log('if문 밖의 a일까? a:'+a);//if문 밖의 a일까? a:2

1. if- else 문

• 어떤 특정조건1을 만족하면 특정행동1을 하고
• 그렇지 않고, 특정조건2를 만족하면 특정행동2를 하자!

const a = 10;
if(a > 15){
    console.log('a가 15보다 큽니다');
}else{
    console.log('a가 15보다 작거나 같습니다');
}

위의 경우, a 의 값이 10으로, 15보다 작으므로 else 문 영역의 expression이 실행되기 된다!

1. if-else if-else문

• 어떤 특정조건1을 만족하면 특정행동1을 하고
• 그렇지 않고, 특정조건2를 만족하면 특정행동2를 하자!
• 그런데 특정조건2도 만족하지 않으면 특정행동3을 하자!

if(특정조건1){
	//특정행동1
}else if(특정조건2){
	//특정행동2
}else{
	//특정행동3
}

const b = 10;
if(b === 5){
    console.log('5입니다');
}else if(b > 5){
    console.log('5보다 큽니다');
}else{
    console.log('5보다 작습니다');
}

위의 경우, 상수 b에 10이 들어있는데, 10이 5보다 크므로 가운데 else if 블록의 코드가 실행되어 콘솔에 “5보다 큽니다”가 출력된다!

1. switch-case

• 특정값에 따른 특정 행동을 수행
• if-else if -else를 간결화시킬 수 있음!

switch(변수){
	case ~:
	 expression;
   break;
  default:
	//아무것도 해당안될때
	  expression;
}

const device = 'galaxy';

switch(device){
    case 'iphone':
    case 'galaxy':
        console.log('iphone or galaxy');
        break;
    case 'galaxy tab':
        console.log('galaxy tab');
        break;
    default:
        console.log('모르겠어요');     
}

위의 iphone, galaxy 경우처럼 두 케이스를 break 없이 사용한다면,

두 값인 경우에 동일하게 console.log(‘iphone or galaxy’);를 실행하게 될 것이다!