JavaScript 조건 문

if else와 else if

조건이 true로 되어 있을 때 실행되는 명령어 집합입니다.

많은 경우에, 사용자 입력이나 다른 요인에 따라 다른 코드 블록을 실행하고 싶습니다.

조건 문장은 컴퓨터 프로그램의 논리, 결정 또는 흐름 지정의 일부입니다.

JavaScript에서는 다음과 같은 조건 문장을 가지고 있습니다：

• if 문장

• if...else 문장

• else...if 문장

• switch 문장

다음 장에서 switch 문장에 대해 논의할 것입니다.

JavaScript If 문장

만약 if 지정 조건이 true로 되어 있을 때만 이 문장이 코드를 실행합니다. 문법은 다음과 같습니다：

if　(condition)　{
　　//조건이 참이면 실행할 코드 블록
}

if　(x　<　0)　{
　　　document.getElementById("result").innerHTML = "NEGATIVE";
}

JavaScript의 if ... else 문

if ... else 문은 지정된 조건이 true일 때 하나의 코드 블록을 실행하고, 조건이 false일 때 다른 코드 블록을 실행할 수 있습니다. 문법은 다음과 같습니다:

if　(condition)　{
　　　//조건이 참이면 실행할 코드 블록
} else {
　　　//조건이 거짓이면 실행할 코드 블록
}

var　x　=　-4;
if　(x　<　0)　{
　　　msg　=　"NEGATIVE";
} else {
　　　msg　=　"POSITIVE";　　　
}

사용자가 이미지를 클릭하면 다음 예제에서 이미지의 src 속성 값을 변경합니다:

<img　id="demo"　onclick="changeImage()"　src="avatar-female.jpg">
<script>
function　changeImage()　{
　　　var　image　=　document.getElementById("demo");
　　　if　(image.src.match("female"))　{
　　　image.src　=　"avatar-male.jpg";
　　　} else {
　　　image.src　=　"avatar-female.jpg";
　　　}
}
</script>

JavaScript의 else ... if 문

if ... else를 사용하면 조건이 맞는지 아니면 아니지에 따라 코드 블록을 실행할 수 있습니다. 하지만, 여러 가지 가능한 조건과 출력이 있을 때에는 두 가지 옵션만 필요하지 않을 수도 있습니다. 이를 수행하는 방법 중 하나는 else ... if 문을 사용하는 것입니다. 이 문은 두 개 이상의 가능한 결과를 평가할 수 있습니다. 문법은 다음과 같습니다:

if　(condition1)　{
　　//condition이면1true이면 실행할 코드 블록
}　else　if　(condition2)　{
　　//condition이면1false이고 condition2true이면 실행할 코드 블록
} else {
　　//condition이면1false이고 condition2false로 설정되면 실행할 코드 블록
}

//　학생의 현재 등급 설정
var　grade　=　88;
//　성적이 A, B, C, D, 또는 F인지 확인
if　(grade　>=　90)　{
　　　document.write("A");
}　else　if　(grade　>=　80)　{
　　　document.write("B");
}　else　if　(grade　>=　70)　{
　　　document.write("C");
}　else　if　(grade　>=　60)　{
　　　document.write("D");
} else {
　　　document.write("F");
}

중첩된 if ... else 문

JavaScript 프로그램의 결정 능력을 강화하기 위해 중첩된 if ... else 문을 사용할 수 있습니다.

var a =　10, b =　20, c =　30;
var answer;
if (a > b) {
　　　if (a > c) {
　　answer = "A는 세 가지 중 가장 큰 것입니다";
　　　} else {
　　answer = "C는 세 가지 중 가장 큰 것입니다";
　　　}
} else if (b > c) {
　　　answer = "B는 세 가지 중 가장 큰 것입니다";
} else {
　　　answer = "C는 세 가지 중 가장 큰 것입니다";　　　
}

삼항 연산자

삼항 연산자는 if ... else 문을 쓰는 데 편리한 방법을 제공합니다.

삼항 연산자는 물음표(?)와 콜론(:) 문법으로 작성됩니다. 다음과 같이 보입니다:

(condition) ? expression_on_true : expression_on_false

위의 문법에서condition먼저 기록되고, 그 다음은 ?로 기록됩니다. 첫 번째 표현식은true에실행하면, 두 번째 표현식은false에실행.

삼항 연산자가 어떻게 작동하는지 이해하려면 다음 예제를 고려해 보세요:

var status = (age >=　18) ? "adult" : "minor";

만약 나이가18세 또는 이상이면, 위의 문장은 변수 status에 값 "adult"를 할당합니다. 그렇지 않으면, 변수 status에 값 "minor"를 할당합니다。