안녕하세요. 이번 시간에는 조건문에 대해서 알아보겠습니다. 이제 조금만 더 배우면 간단한 프로그램을 만들 수 있어요!
조건문
조건문이란 특정한 조건 아래서만 코드가 실행되게 하는 구문을 말하는데요. 로그인 되어있는 상태에서만 댓글을 남길 수 있게 한다든지 하는 상황에서 사용되겠죠?
조건문에는 if, switch가 대표적입니다.
If
if문은 if (조건) {내용}으로 구성되는데요. 조건이 true면 내용이 실행됩니다.
var a = 20;
if (a > 10) {
alert('10보다 큼'); // alert함수는 메시지를 띄웁니다.
}a가 10보다 큰 상황에서만 10보다 크다고 alert합니다. alert함수는 인자로 넣은 문장을 브라우저에 메시지로 띄웁니다. 지금 a가 20이니까 a > 10이 true가 되어alert 함수가 실행됩니다.
else나 else if를 사용해서 조건을 구체화할 수도 있습니다. else는 if 조건이 false일 때 실행됩니다. else if는 조건을 여러개로 하고 싶을 때 실행됩니다.
if (a > 10) {
alert('10보다 큼');
} else {
alert('10보다 작거나 같음');
}if (a > 10) {
alert('10보다 큼');
} else if (a > 5) {
alert('5보다 큼');
} else {
alert('5보다 작거나 같음');
}if 안의 조건은 true이면 실행된다고 했죠? 근데 true인 경우가 생각보다 많습니다. 이전 시간 비교연산자를 배울 때 ==의 오류에 대해 알아보았습니다. 문제는 if의 조건을 체크하는 방식이 == 비교연산자의 계산과 같다는 겁니다. 0, -0, null, false, NaN, undefined, ''의 값을 가지면 false이고 나머지 값을 가지면 전부 true입니다. 이상한 게 false == []이지만 if ([])는 실행됩니다.
if (0) {
alert('실행 안 됨');
}
if ('') {
alert('실행 안 됨');
}
if ([]) {
alert('실행됨');
}황당하죠? 그냥 false가 나오는 경우들을 외웁시다. 이게 자료형이 유동적인 자바스크립트 변수의 비극입니다.
간단한 if else문은 삼항연산자로 바꿀 수 있습니다. 한 줄로 줄일 수 있어 편합니다.
var i = 10, j;
if (i > 10) {
j = 15;
} else {
j = 5;
}
var j = i > 10 ? 15 : 5;Switch
switch ~ case문은 if ~ else if ~ else와 비슷합니다.
switch (c) {
case 10: // c가 10일 때
alert('c는 10');
break;
case 9: // c가 9일 때
alert('c는 9');
break;
case 8: // c가 8일 때
alert('c는 8');
break;
default: // 위의 경우에 해당하지 않을 때
alert('그 외');
}case 뒤에 c에 해당하는 조건을 적고 그 아래에 실행할 내용을 적습니다. default는 어떤 조건에도 해당이 안 될 때 실행됩니다. else와 비슷합니다. 조심할 점은 case하나마다 내용 밑에 break;을 적어줘야합니다. break을 적지 않으면 해당 case 아래로 모든 내용이 실행됩니다. 한 번 break;을 빼고 다시 실행해보세요. 바로 깨달을 겁니다. switch ~ case가 왜 if ~ else if ~ else와 비슷하냐면 위의 switch문을 다음과 같이 바꿀 수 있습니다.
if (c === 10) {
alert('c는 10');
} else if (c === 9) {
alert('c는 9');
} else if (c === 8) {
alert('c는 8');
} else {
alert('나머지');
}취향 따라 switch와 if ~ else if문을 선택하시면 되겠습니다! 다음 시간은 반복문에 대해 알아보겠습니다.
neue zeal
