4. 조건문과 반복문

Index

4. 조건문

4.1 조건문

조건문은 조건이 참(true)인지 거짓(false)인지에 따라 코드를 수행할지 말지 판단합니다.

if문 CODE


//if

var test=5;
if(test < 10){
	//codes
}

if-else문 CODE


let x = 3;
let y = 7;

if(x == y){
  document.write('if문으로 실행되었습니다.');
} else{
  document.write('else문으로 실행되었습니다.');
}

if문 CODE


let score = 69;
let money = 1000;

if (score > 90){
  document.write('참 잘했습니다!<br>');
  money += 100000
} else if (score > 80){
  document.write('잘했습니다!<br>');
  money += 10000
} else if (score > 70){
  document.write('했습니다!<br>');
  money += 1000
} else {
  money = 0
}

document.write(money);

삼항 조건 연산자


let x = 3;
    
x == 4 ?
document.write('if문으로 실행되었습니다.<br>') :
document.write('else문으로 실행되었습니다.<br>');

let result = x == 4 ? 100 : 200;
document.write(result);

document.write('<br>');

let score = 91;
let money = 1000;
score > 90 ? money += 100000 :
score > 80 ? money += 10000 :
score > 70 ? money += 1000 : money = 0

document.write(money);

Switch문 CODE


switch (new Date().getDay()) {
  case 0:
    document.write('일요일입니다.')
    break;
  case 1:
    document.write('월요일입니다.')
    break;
  case 2:
    document.write('2번째 case입니다.')
    break;
  case 3:
    document.write('3번째 case입니다.')
    break;
  default:
    break;
}

4.2 반복문

다음에는 반복문에 대해서 알아보도록 하겠습니다. 먼저 다음과 같은 배열이 존재한다고 가정해 봅시다.

배열 CODE


var cars = ["BMW", "Volvo", "Saab", "Ford", "Flat", "Audi"];

var text = "";

여기서 만약 배열 cars에 담긴 내용을 전부 text라는 변수에 넣고 싶다면 어떻게 해야 할까요? 지금까지 배운 내용으로는 다음처럼 길고 반복적인 작업을 통해 text에 배열의 내용을 넣을 수 있습니다.

기존 방식 CODE


text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

하지만 반복문을 사용하면 아래 코드처럼 간단하게 배열의 내용을 text에 넣을 수 있습니다.


var i;
for(i = 0; i < cars.length; i++) {
	text += cars[i] + "<br>";
}

4.2.1 for 문의 다양한 예시


//반복문
for(var i=0; i<10; i++){
  document.write(i, '<br>');
}

//1부터 100까지의 짝수의 합
let s = 0;
for (var i = 0; i < 101; i+=2) {
  document.write(i, '<br>');
  s += i;
}
document.write(s, '<br>');

//구구단
for (var i = 2; i < 10; i++) {
  for (var j = 1; j < 10; j++) {
    document.write(`${i} X ${j} = ${i*j} <br>`);
  }
}

//100보다 작은 3의 배수와 5의 배수의 합
s = 0;
for (var i = 0; i < 101; i++) {
  if(i%3==0 || i%5==0){
    document.write(i, '<br>');
    s += i;
  }
}
document.write(s, '<br>');


//평균 구하기
var value1 = [100, 200, 50, 400, 900];
var value2 = [60, 40, 80, 30, 90];
function average(value){
  var sum = 0;
  for(var i=0; i<value.length; i++){
    sum += value[i];
  }
  return sum/value.length;
}

document.write('평균1 : ', average(value1)); //330
document.write('<br>');
document.write('평균2 : ', average(value2)); //60


//최댓값 구하기
var value = [100, 200, 50, 400, 900];
function maximum(value){
  var max = 0;
  for(var i=0; i<value.length; i++){
    if(max < value[i]){
      max = value[i];
    }
  }
  return max;
}
document.write(maximum(value)); //900
document.write('<br>');

//Math.max.apply() 사용해서 최댓값 구하기
var max2 = Math.max.apply(null, value);
document.write(max2); //900


// 다음 입사문제 정답코드 (https://codingdojang.com/scode/408?answer_mode=hide)
let value = [1, 3, 4, 8, 13, 17, 20];
let temp = value[1] - value[0];  // 4 - 1 -> 3, 초기 temp는 3
let result = 0;

for (let i = 0; i < value.length - 1; i++) {
    if (temp > (value[i+1] - value[i])){
        temp = value[i+1] - value[i];
        result = i;
    }
}

console.log(value[result], value[result+1]);
////////////////////////


// 1번째 순회
// initail value : i==0, temp==3, result==0
for (let i = 0; i < 8; i++) {
    if (3 > 3){ // temp > (value[1] - value[0])
        temp = value[i+1] - value[i]; // temp = value[i+1] - value[i];
        result = i; // result = i;
    }
}
// final value : i==0, temp==3, result==0

// 2번째 순회
// initail value : i==1, temp==3, result==0
for (let i = 0; i < 8; i++) {
    if (3 > 2){ // temp > (value[2] - value[1])
        temp = 2; // temp = value[2] - value[1];
        result = 1; // result = 1;
    }
}
// final value : i==1, temp==2, result==1

// 3번째 순회
// initail value : i==2, temp==2, result==1
for (let i = 0; i < 8; i++) {
    if (2 > 2){ // temp > (value[2] - value[1])
        temp = value[i+1] - value[i];
        result = i;
    }
}
// final value : i==1, temp==2, result==1

...

4.2.2 for 문의 다른 형태들


let array = [10, 20, 30, 40, 50];
let i = 0

for (; i < array.length;) {
  document.write(array[i], '<br>');
   i++;
}

array.forEach(e => console.log(e*3));

for (var variable in array) {
  document.write(array[variable], '<br>');
}

for (var variable of array) {
  document.write(variable, '!! <br>');
}

4.2.3 while 문


let num = 0;
while (num < 11) {
  document.write(num, '<br>');
  num += 1;
}

do {
  document.write(num, '!! <br>');
  num += 1;
} while (num < 11);

let i = 2;
let j = 1;
while (i < 10) {
  while (j < 10) {
    document.write(`${i} X ${j} = ${i*j} <br>`);
    j++;
  }
  j = 1;
  i++;
}

4.2.4 반복문의 break & continue


let num = 0;
while (num < 11) {
  num++;
  document.write(num, '<br>');
  if(num > 5){
    continue;
  }
}

num = 0;
while (num < 11) {
 num++;
 document.write(num, '<br>');
 if(num > 5){
   break;
 }
}


// 무한루프
for (;;) { ... }
// 무한루프
while (true) { ... }


// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label
// outer라는 식별자가 붙은 레이블 for 문
// 현업에서는 객체와 햇갈려서 잘 안쓰는 편
// 할꺼면 function으로.
hojun: for (var i = 2; i < 10; i++) {
    for (var j = 1; j < 10; j++) {
        // i + j === 3이면 hojun라는 식별자가 붙은 레이블 for 문을 탈출한다.
        if (i === 5) break hojun;
        console.log(`${i} X ${j} = ${i*j}`);
    }
}

scope


// 콘솔창이 아닌 script에서 error
let x = 10;
let x = 20;

// error 안남
var x = 10;
var x = 10;

// while 문 안에 반복 재선언 가능
let i = 0;
while (i <= 9) {
    //두번째 순회때 j가 있는지 확인
    if (i == 1) console.log(j);
    let j = 1;
    i++;
}