JavaScript : 자바스크립트 조건문, 반복문

▶ JavaScript 조건문(if else / else if)

const time = new Date().getHours();
let greeting;

// 시간이 10:00 미만이면 "Good morning" 인사말을 만들고, 
// 그렇지 않은 경우 시간이 20:00 미만이면 "Good day" 인사말을 만들고, 
// 그렇지 않으면 "Good morning"을 만듭니다.
if (time < 10) {		// 조건문1이 true이면
  greeting = "Good morning";
} else if (time < 20) {		// 조건문1은 false, 조건문2가 true이면
  greeting = "Good day";
} else {			// 조건문1,2 false
  greeting = "Good evening";
}

 

▶ JavaScript 조건문(switch)

let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

switch는 일치하는 항목이 있으면 연결된 코드블록이 실행됩니다. 만약 일치하는 항목이 없으면 default 기본 코드블록이 실행됩니다. 또한 여러 케이스가 일치하는 경우 첫 번째 케이스가 선택됩니다. 

 

▶ JavaScript 반복문

JavaScript는 다양한 종류의 루프를 지원합니다. for, for/in, for/of, while, do/while

• for - 크도 블록을 여러 번 반복
• for/in - 객체의 속성을 통해 루프
• for/of - 반복 가능한 객체의 값을 반복
• while - 지정된 조건이 참인 동안 코드 블록을 반복
• do/while - 또한 지정된 조건이 참인 동안 코드 블록을 반복

 

▶ JavaScript - for문

// 일반적인 for문 예시
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

// 루프가 시작되기 전에 값이 설정된 경우에는 문1을 생략할 수 있습니다.
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";

for (; i < len; i++) {
  text += cars[i] + "<br>";
}

 

▶ JavaScript - for..in 문

// for..in문 기본 - object
const person = {fname:"John", lname:"Doe", age:25}; 

let txt = "";
for (let x in person) {
  txt += person[x] + " ";
}

// for..in - array
const numbers = [45, 4, 9, 16, 25];

let txt = "";
for (let x in numbers) {
  txt += numbers[x] + "<br>"; 
}

// forEach
const numbers = [45, 4, 9, 16, 25];

let txt = "";
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value) {
  txt += value + "<br>"; 
}

 

▶ JavaScript - for..of문

// for..of문
const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x + "<br>";
}

* for..in문과 for..of문의 차이 : 둘다 반복문으로 사용되는데 for..in은 객체를 탐색하고, for..of문은 배열 요소를 탐색합니다.

// for ...in (객체 순환)
var obj = {
  a: 1000,
  b: 2000,
  c: 3000
};

for (var item in obj) {
  console.log(item) // a, b, c
}

for (var item of obj) {
  console.log(item) // 오류가 남.
}
//---------------------------------------------------------------
// for ...of (배열 순환)
var arr = [1, 2, 3];

for (var item of arr) {
  console.log(item); // 1, 2, 3
}

for (var item in arr) {
  console.log(item); // 0, 1, 2
}

 

▶ JavaScript - while문

// while문은 지정된 조건이 true인 한 코드 블록을 반복합니다.
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}

// 결과값
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9

 

▶ JavaScript - Do while문

Do while문은 while문의 변형입니다. 이 루프는 조건이 참인지 확인하기 전에 코드블록을 한 번 실행한 다음 조건이 true인 동안 루프를 반복합니다.

let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);

// 결과값
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9