제어문 if 와 switch, 삼항연산자

우리는 언제나 선택의 갈래에 서있다. 날씨가 좋으면 우산을 들고가지 않고 비가오는 날씨라면 우산을 들고가야하는 것 처럼 말이다.

 

소프트웨어도 언제나 똑같은 결과를 주지 않고 항상 선택에 의해 다른 결과를 반환한다. 자바스크립트도 참과 거짓에 따른 선택을 할 수 있게 도와주는데  이럴때 사용하는 것이 제어문 if 와 switch 그리고 삼항연산자이다. 

 

if

프로그래밍을 배우기 시작하면 하루 혹은 이틀만에 배우는 것이 if문 일것이다. if문은 조건에 따라서 프로그램이 다른 일을 수행할 수 있게 해준다. 

 

var a = 10; 


if(a < 15 ){
	//실행문장
	console.log("a는 15보다 작습니다. ");
}

 

작성된 코드를 보면 if문의 오른쪽에는 () 소괄호가 있고 옆에는 {} 중괄호가 실행 문장을 감싸고 있는 형태를 한다.

 

천천히 해석을 해보면 이러하다.      만약 a 변수가 15 보다 작다면 다음 실행문장(현재는 console.log("15"))을 실행해주세요 . 

 

만약 a라는 변수가 10이 아닌  15 이상의 수가 들어가 있다면 어떻게 될까 ? if문의 조건에 맞지 않기 때문에 저 if문의 실행문장을 실행되지 않을 것이다. 

 

a라는 변수가 15보다 작은게 아닌 상황에서 console.log("a는 15보다 큽니다.."); 라는 것을 표현하고 싶을때는 어떻게 하면 좋을까 ?

 

if(a < 15 ){
console.log("a는 15보다 작습니다. ");
}else{
console.log("a는 15보다 큽니다. ")
}

 

이렇게 if문의 {}(블록) 이 끝날때 else를 붙여 새로운 블록을 추가 해주고 새로운 실행문장을 작성해주면 된다. 

 

그러나 이렇게 했을때 한가지 문제가 있다. a가 15이면 console.log("a는 15입니다.") 라는 문구를 추가 해주고 싶은데 현재 상황에서는 a가 15이든 15이상이든 전부 else문에서 "a는 15보다 큽니다."를 출력하게 될 것이다. 이럴 때 사용하는 것이 else if문이다. 

 

if(a<15){
	console.log("a는 15보다 작습니다.");
}else if(a == 15){
	console.log("a는 15입니다.");
}else{
	console.log("a는 15보다 큽니다.")
}

 

이렇게 된다면 a가 15이거나 15보다 작을때 15보다 클 때 원하는 실행문을 사용할 수 있다. 

 

물론 다음과 같이 else if를 잔뜩 적어서 각 상황에 맞게 다른 실행문도 줄 수 있고 if문 안에 if를 적어서 프로그래밍의 결과를 조금 더 엄격 하게 할 수 있다. (3 깊이의 if문은 어느정도 그럴 수 있다고 생각하기도 하지만 프로그램이 보기 힘들어지니 하지 않기를 바란다.)

 

if(a<15){
	//실행문
}else if(a == 16){
	//실행문
    if(b < 15){
    	//실행문
        if(c < 14){
        
        }
    }
}else if(a == 15){
	//실행문
}else if(a == 17){
	//실행문
}else{
	//실행문
}

 

switch 

자바스크립트에서는 if문 말고 switch 문도 지원한다. switch문은 다음과 같이 사용한다. 

 

var a = 10;

switch(a){
    case 10 : 
        console.log("a가 12보다 작습니다..");
        break;
    case 12 :
        console.log("a가 12보다 큽니다."); 
        break;
    default :
        console.log("a가 12와 같습니다.");
}

 

해석을 하면 이러하다. switch안에 a라는 변수를 던져서 만약 a가 10이라면 다음과 같은 실행문을 해줘, 12라면 다음과 같은 실행문을 해줘, 만약 이것도 저것도 아니라면 이것을 해줘. 

 

case 는 ==(동등연산자)와 동일하며 인자의 가 해당하는 값에 따라 다른 실행문을 실행하게 한다. default 는 else 와 같은 역할을 하는데 인자가 case에 해당하지 않으면 실행하는 블록이다. 

 

break 키워드 또한 처음 볼탠데 스위치문은 break; 키워드가 없다면 모든 케이스에 해당하는 실행문을 모조리 실행하게 된다. 

 

break키워드를 제거하고 실행한 결과

//a가 12보다 작습니다..
//a가 12보다 큽니다.
//a가 12와 같습니다.

 

위의 switch문을 if 문으로 작성하면 다음과 같다 .

var a = 10;

if(a==10){
	console.log("a가 12보다 작습니다..");
}else if(a==12){
 	console.log("a가 12보다 큽니다.");
}else{
	console.log("a가 12와 같습니다.");
}

 

삼항연산자 

if 문과 switch문을 보면 코드가 길고 차이하는 면적이 크다. 프로그래머는 참과 거짓을 구분하여 한줄에 다른 실행문을 작성하고 싶을 건데 그럴때 유용한 것이 삼항연산자이다. 

 

var a=10;

{a >10 ? console.log("a가 10보다 큽니다.") : console.log("a는 10보다 작거나 큽니다.")};

 

위의 2번째 줄이 삼항연산자인데 조금 복잡하게 생겼다. 그렇지만 겁먹지말자 . 의외로 간단하다. 보기 쉽게 하려 {} 블록으로 삼항 연산자를 감쌋지만 없어도 상관없다.

 

삼항 연산자는 다음과 같이 작성한다. 조건 ? 참일 때 실행하는 문장 : 거짓일 때 실행하는 문장 .

 

삼항연산자를 조금 더 활용하면 이런 것도 가능하다.

 

var a = 11;

a >10 ? console.log("a가 10보다 큽니다.") : console.log("a는 10보다 작거나 큽니다.");

var b = a > 10 ? 15 : 20;

console.log(b);

 

 

b의 값이 삼항연산자의 참과 거짓에 따라 15 혹은 20이 된다. 

 

참고로 b의 값은 20이다. 

 

정리하며

초보자라면 3가지 제어문 중 무엇을 써야하나 혼란스러울수도 있다. 같은 역할을 하는 제어문이 뭐 하러 3가지나 되서 내 머리를 혼란스럽게 하나 자바스크립트 언어개발자를 원망 할 수 있다. 그러나 3가지의 제어문은 추후 초보자들이 조금 더 성장하게 될 쯤 무수히 많은 if 문에서 벗어나서 훨씬 깔끔하고 멋진 코드로 만들어 줄 것이다.