본문 바로가기

html+CSS+JS

스터디 일지 | HTML, CSS, jQuery 어중간한 초급자 탈출하기 #8 (if문, else문, else if문, switch문)

반응형
#8회차
if문, else문, else if문, switch문

1) if문

조건에 맞으면(true값을 나타내면) 행동문이 실행된다.

if(조건 내용) {
	조건이 맞는 경우, 실행되는 코드(행동문)
}

 

ex) 물의 온도(변수 temperature)가 100℃ 이상인 경우, 물이 끓습니다.

let temperature = 89;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
}

temperature를 89로 해두었기에 if문의 조건인 100보다 크거나 같다는 조건에 부합하지 않아 행동문이 실행되지 않습니다.

 

let temperature = 105;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
}

temperature를 105로 하여 100을 넘어가게 만들면 그제야 행동문이 실행이 되어 콘솔에 '물이 끓습니다.' 라는 문구가 출력됩니다.

 

 

 

2) else문

if문의 조건에 부합하지 않은 경우, else문이 뒤에 붙어있으면 else문이 실행됩니다.

if(조건 내용) {
	조건이 true인 경우, 실행되는 코드(if의 행동문)
} else {
	조건이 true가 아닌 경우, 실행되는 코드 (else의 행동문)
}

 

ex) 물의 온도(변수 temperature)가 100℃ 이상인 경우, 물이 끓는다고 할 때 else 추가.

let temperature = 89;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
} else {
	console.log('물이 끓지 않습니다.');
}

앞서 else가 없었을 땐, temperature를 89로 하여 100보다 낮아 콘솔에 아무것도 뜨지 않았지만,

이번엔 조건이 맞지 않는 경우 실행할 수 있는 else문이 있기 때문에 '물이 끓지 않습니다.'라는 문구가 뜹니다.

 

let temperature = 105;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
} else {
	console.log('물이 끓지 않습니다.');
}

위와 같이 temperature를 105로 하여 100도를 넘어가게 만들면

조건을 만족한 것이므로 else가 없을 때와 동일하게 콘솔에 '물이 끓습니다.' 라는 문구가 출력됩니다.

 

 

3) else if문

if문의 조건에 부합하지 않은 경우 중에서 또다른 조건을 부여하는 경우에 사용함.

if(조건 내용1) {
	조건이 true인 경우, 실행되는 코드(if의 행동문)
} else if (조건 내용2) {
	조건 내용1이 true가 아닌 경우 중에서, 조건 내용2가 true인 경우 실행되는 코드(else if의 행동문)
} else {
	조건 내용1, 2 두 조건 다 부합하지 않은 경우 실행되는 코드(else의 행동문)
}

 

ex) 물의 온도(변수 temperature)가 100℃ 이상인 경우, 물이 끓고, 0℃ 이하인 경우 물이 언다고 가정했을 때

let temperature = 0;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
} else if(temperature <= 0) {
	console.log('물이 업니다.');
} else {
	console.log('물이 끓지 않습니다.');
}

이번에는 temperature를 0으로 스타트 해보겠습니다.

위와 같은 경우, 일단 100을 넘지 않으므로 if문은 건너뛰고,

else if 문으로 가는데 여기서 0보다 작거나 같다는 조건에 부합하니 콘솔에 '물이 업니다.'라는 문구가 출력됩니다.

그 아래 있는 else문은 무시가 됩니다.

 

let temperature = 54;

if(temperature >= 100) {
	console.log('물이 끓습니다.');
} else if(temperature <= 0) {
	console.log('물이 업니다.');
} else {
	console.log('물이 끓지 않습니다.');
}

temperature를 54로 바꾸어보겠습니다.

당연히 이번에도 일단 100을 넘지 않으므로 if문은 건너뛰고,

else if 문으로 가는데 여기서 0보다 작거나 같다는 조건에도 부합하지 않으니 else if문도 건너뜁니다.

남은 건 else문이므로 바로 else의 행동문이 실행되어 콘솔에 '물이 끓지 않습니다.'라는 문구가 뜨게 됩니다.

 

 

4) switch문

if문이 조건에 true, false를 통해 정의할 수 있었다면, switch는 특정 값을 가지는지 아닌지에 따라 함수 실행을 달리 할 수 있습니다.

switch (비교할 값) {
	case 조건값1 :
    		값이 조건값1과 동일한 경우, 실행할 코드;
        	break;
	case 조건값2 :
    		값이 조건값2와 동일한 경우, 실행할 코드;
        	break;
	default :
    		위 조건값과 다 맞지 않을 경우, 실행할 코드;
        	break;
}

비교할 값이 가진 값이 어떤 조건값과 같은지에 따라 해당 case 다음의 코드부터 실행이 되고, break에서 함수 실행이 멈춥니다.

 

switch문은 if문과 다르게 이번에는 반드시 특정 값과 동일해야 하는 경우(ex.심리 테스트)에 사용되는 편입니다.

if문으로 따지면 조건에 '비교할값 === 조건값1' 이런식으로 들어가야겠죠.

default는 else와 비슷한 역할을 한다고 보시면 됩니다.

 

ex) 심리 테스트로 과일 중 바나나, 사과, 귤 중 선택해야 할 때.

let choice = '사과';


switch (choice) {
	case '바나나' :
          console.log(`바나나를 선택한 당신은, ...`);
          break;
	case '사과' :
          console.log(`사과를 선택한 당신은, ...`);
          break;
	case '귤' :
          console.log(`귤을 선택한 당신은, ...`);
          break;
	default :
          console.log(`바나나, 사과, 귤 중에서 선택해주세요.`);
          break;
}

위와 같은 경우 변수 choice에 '사과'가 들어가있기에, case 중 '사과'에 해당하는 함수부터 시작하여

콘솔에 '사과를 선택한 당신은, ...'이라는 문구가 출력됩니다.

 

이 때 break를 쓰지 않는다면

let choice = '사과';


switch (choice) {
	case '바나나' :
          console.log(`바나나를 선택한 당신은, ...`);
	case '사과' :
          console.log(`사과를 선택한 당신은, ...`);
	case '귤' :
          console.log(`귤을 선택한 당신은, ...`);
	default :
          console.log(`바나나, 사과, 귤 중에서 선택해주세요.`);
}

동일한 조건값을 가진 case '사과' 다음 줄부터의 함수가 실행되고 멈추는 장치가 없어 아래와 같이 출력됩니다.

사과를 선택한 당신은, ...
귤을 선택한 당신은, ...
바나나, 사과, 귤 중에 선택해주세요.

때문에 상황을 판단하여 break를 삽입할지 말지 결정하면 될 것 같습니다.

 

 

 

 

확실히 점점 어려워진다.

제대로 이해하고 넘어간다고 생각해도 나중에 막히는 경우가 생기는데

지금 당장 이해가 안 간다 느끼면 안되기에 확실히 짚고 넘어가려고 노력 중:3

 

반응형