JavaScript (4)

조건문

if

• if 문은 표현식의 결과가 참이면 주어진 실행문을 실행

• 거짓이면 아무것도 실행하지 않음

if (표현식) {
   표현식이 참인 경우 실행
}

# 예제
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = "Good day!";
}
// 실행하는 순간이 오후 6시 이전이면 Good day!를 출력

---

else

if (표현식) {
   표현식이 참인 경우 실행
} else {
   표현식이 거짓인 경우 실행
}

# 예제
var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else {
    if (x < y)
        document.write("x가 y보다 작습니다.");
    else // 실행될 실행문이 한 줄뿐이라면 중괄호({})를 생략할 수 있음.
        document.write("x가 y보다 큽니다.");
}
// x가 y보다 작으므로 "x가 y보다 잡습니다"가 출력

---

else if

if (표현식1) {
   표현식1이 참인 경우 실행
} else if (표현식2) {
   표현식2가 참인 경우 실행
} else if (표현식3) {
   표현식3이 참인 경우 실행
} else {
   표현식 결과가 모두 거짓일 때 실행
}

# 예제
var x = 10, y = 20;
if (x == y) {
    document.write("x와 y는 같습니다.");
} else if (x < y) {
    document.write("x가 y보다 작습니다.");
} else { // x > y인 경우
    document.write("x가 y보다 큽니다.");
}
// x가 y보다 작으므로 "x가 y보다 잡습니다"가 출력

---

삼항연산자

표현식 ? 반환값1 : 반환값2

# 예제
var x = 3, y = 5;
var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.
document.write("둘 중에 더 큰 수는 " + result + "입니다.");
// 5입니다.

---

switch

• 주어진 조건 값에 따라 다른 명령을 수행

• if / else 문에 비해 가독성이 좋음
• default 절은 어떠한 case 절에도 해당하지 않을 때 실행
• 모든 절은 break를 포함할 것
• 값과 타입이 모두 일치해야하는 (===) 조건

 

switch (조건 값) {
   case 값 1 : 
      조건 1인 경우 실행
      break;
   case 값 2 : 
      조건 2인 경우 실행
      break;
   case 값 3 : 
      조건 3인 경우 실행
      break;
   default :
      조건 1, 2, 3가 아닌 경우 실행
}      

var x = 10;
switch (typeof x) {
    case "number":
        document.write("변수 x의 타입은 숫자입니다.");
        break;
    case "string":
        document.write("변수 x의 타입은 문자열입니다.");
        break;
    case "object":
        document.write("변수 x의 타입은 객체입니다.");
        break;
    default:
        document.write("변수 x의 타입을 잘 모르겠네요...");
        break;
}

---

반복문

While

• 특정 조건을 만족할 때까지 계속해서 주어진 실행문을 반복

while (표현식) {
   표현식이 참일 경우 실행
}

# 예제
var text = "";
var i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}

---

do / While

• 먼저 루프를 한 번 실행한 후에 표현식을 검사

• 표현식의 결과아 상관없이 무조건 한 번은 루프를 실행

do {
   실행
} while (표현식);

# 예제
var i = 1;
do {
    document.write("i: " + (i++) + "<br>");
} while (i > 3);

---

for

• 자체적으로 초기식, 표현식, 증감식을 모두 포함
• while문 보다는 좀 더 간결한 표현
• 초기식, 표현식, 증감식은 모두 생략가능한 선택사항
• 쉼표를 사용하여 여러 개의 초기식이나 증감식을 동시에 사용

for (초기식; 표현식; 증감식) {
   표현식이 참이면 실행
}

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

---

for / in

• 해당 객체의 모든 속성을 반복
• 속성의 이름을 지정된 변수에 대입

for (변수 in 객체) {
    객체의 속성 개수만큼 실행;
}

# 예제
var arr = [3, 4, 5];
for (var i in arr) { 
    document.write(i + " ");
}

---

for / of

• 반복할 수 있는 객체를 순회하도록 해주는 반복문

• Array, Map, Set, arguments 객체 등이 있음

for (변수 of 객체) {
   실행
}

# 예제
var cars = ['BMW', 'Volvo', 'Mini'];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

---

제어문

label

• 특정 영역을 식별할는 식별자
• continue문과 break문의 동작이 프로그램의 흐름을 특정영역으로 이동

label:
식별하고자 하는 특정 영역

# 예제
arrIndex:
for (var i in arr) {
    document.write(i);
}

---

break

• 루프 내에서 사용

• 해당 반복문을 완전히 종료하며 반복문 바로 다음 위치로 이동

break;
break 라벨이름;

# 예제
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
list: {
  text += cars[0] + "<br>"; 
  text += cars[1] + "<br>"; 
  break list;
  text += cars[2] + "<br>"; 
  text += cars[3] + "<br>"; 
}

또는

gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if (i > 3)
            break gugudan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

---

cotinue

• 루프 내에서 사용

• 해당 루프의 나머지 부분을 건너뛰고 바로 다음 표현식의 판단으로 이동

1. continue;
2. continue 라벨이름;

# 예제
for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

또는

gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if ((i*j) % 2 == 0)
            continue dan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}