[Javascript] 3강 제어문

 

JS는 논리 구조를 갖고 있고, 그를 통해 프로그램의 여러 기능들을 제공합니다. 이번 시간에는 자바스크립트의 제어문에 대해 살펴보겠습니다. 제어문은 주어진 조건에 따라서 코드 블록을 실행(조건문)하거나 반복 실행(반복문)합니다.

 

1.조건문 

 

조건문(conditional statement)은 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정합니다. 조건문은 불리언 값으로 평가될 수 없는 표현 식입니다. 자바스크립트에서 조건문은 if...else 문과 switch문을 제공합니다.

 

1-1.if...else 문

 

if..else 문을 사용하면 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 참&거짓에 따라 실행할 코드 블록을 결정합니다.

function roll() {
//  return Math.ceil(Math.random() * 6);
}

function game() {
    // const result = roll();
    var result = 100;
    while(result <= 101) {
    result--;
    console.log(`체력:${result}`);
    if (result == 50) {
        console.log("체력 50% 게임종료!");
        break;
    } else {
        console.log("게임이 진행중입니다.");
        
    }    
  } 
  
}

game();

 

if...else 구문의 중첩

 

만약 세 개 이상의 경우의 수를 if...else를 통해 표현하려면 중첩시키면 됩니다.

function roll() {
//  return Math.ceil(Math.random() * 6);
}

function game() {
    // const result = roll();
    var result = 100;
    while(result <= 101) {
    result--;
    console.log(`체력:${result}`);
    if (result == 50) {
        console.log("체력 50% 게임종료!");
        break;
    } else {
        if (result >= 50) {
        console.log("게임이 진행중입니다.");
    } else {
        console.log(`체력은 현재 ${result}입니다`);
        
    } 

    }
  } 
  
}

game();

 

위와 같이 if...else 구문이 단순 중첩인 경우라면 바깥쪽 else의 중괄호(curly brace)를 생략할 수 있습니다.

if (result == 50) {
        console.log("체력 50% 게임종료!");
        break;
} else if (result >= 50) {
        console.log("게임이 진행중입니다.");
} else {
        console.log(`체력은 현재 ${result}입니다`);
   }
}

 

코드가 이전보다 훨씬더 깔끔해졌습니다. if..else 의 중첩에는 제한이 없습니다.

 

1-2.switch 문

 

switch 문은 하나의 변수에 대해 많은 경우의 수가 있는 경우 switch 구문을 사용하면 됩니다. switch 문은 switch 문의 표현식을 평가해 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킵니다.

function translate(english) {
    let result;
    switch(english) {
        case 'korea':
            result = "한국어";
            break;
        case 'japan':
            result = "일본어";
            break;
        case 'francas':
           result = "프랑스어";
           break;
        case 'italian':
            result = "이탈리아어";
            break;
        case 'Portuguese':
            result = "포루투갈어";
            break; 
        default: 
           result = "일치하는 언어가 없습니다.";
    }
     return result;
}

switch 구문은 case, break, default 라는 키워드와 함께 사용합니다. switch 바로 뒤의 괄호의 값이 '코드 실행 여부를 판별할 기준이 되는 값'이고, 이 기준이 되는 값과 case 바로 뒤에 오는 값이 일치하면 콜론(;)뒤의 코드 영역이 실행됩니다. 일치하는 값이 없으면 default 코드 영역이 대신 실행됩니다.

 

1-3.while 구문

 

while 구문을 사용해 특정 조건이 만족하는 코드를 반복해 실행할 수 있습니다.

let i = 0; // 초기 값

while (i < 5) {
    console.log(`현재 i 값은: ${i}`);
    i++; 
}

console.log("end loop!");

 

처음에는 i의 값이 0이었다 코드가 실행됨에 따라 점차 증가하면서 결국 i < 5의 값이 false가 되면, while 구문은 더 이상 내부 코드를 실행시키지 않고 실행 흐름을 다음으로 넘깁니다.

 

1-4. do while 구문 

 

do..while 구문은 while 구문과 사용법이 크게 다르지 않지만, 내부 코드를 무조건 한 번은 실행시킵니다.

do {
    console.log(`do....while`);
} while (false) // true not!

 

1-5. for 문 

 

for 문은 조건식이 false가 될때까지 반복 실행됩니다. 이런 경우 for 구문을 이용해 코드를 짧게 짤 수 있습니다.

for (let i = 0; i < 10; i++) {
    console.log(`현재 i 값: ${i}`);
}

console.log('루프 종료');

현재 i 값: 0
현재 i 값: 1
현재 i 값: 2
현재 i 값: 3
현재 i 값: 4
현재 i 값: 5
현재 i 값: 6
현재 i 값: 7
현재 i 값: 8
현재 i 값: 9
루프 종료

 

for 구문으로 정의돈 루프는 항상 while 구문으로 바꿔쓸 수 있습니다 다만 위와 같이 초기값을 정할 수 있고 갱신을 위한 코드가 짧은 경우 for 구문을, 그렇지 않을 경우 while 문을 사용하면 코드가 깔끔해질 것입니다.

 

 

1-6.배열과 순회

 

ES2015가 나오기 전까지 for 문이 배열을 순회하는 데에 많이 사용되었습니다.

const arr = [1,2,3,4,5,6,7];

for (let i = 0; i < arr.length; i++) {
    console.log(`배열의 ${i + 1} 번째 요소는 ${arr[i]} 입니다.`);
    
}

 

forEach 메소드나 for...of 구문이 더 많이 쓰이는 편입니다.

const arr = [1,2,3,4,5,6,7];

arr.forEach((item, index) => {
    console.log(`배열의 ${index + 1} 번째 요소는 ${item}입니다.`);
    
})

for (let item of arr) {
    console.log(`현재 요소는 ${item} 입니다.`);
}

 

 

1-7. break, continue

 

간혹 루프를 도중에 멈추거나, 코드를 건너뛰어버리고 루프의 다음 번 차례로 넘어가야 할 필요가 있습니다.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
    
}

for (let i = 1; i < 20; i++) {
    console.log(`현재 숫자는 ${i} 입니다.`);

    if ( i % 2 === 0) {
        continue; // i 가 짝수일때 건너뜀 
    }
    console.log(`${i}는 홀수`);
    
    
}

 

1-8. for...in 문

 

객체의 열거 속성을 통해 지정된 변수를 반복합니다. 각각의 고유한 속성에 대해, Javascript는 지정된 문을 실행합니다.

for (variable in object) {
    statements;
}

 

예시

 

다음 함수는 객체와 객체의 이름을 함수의 인수로 취합니다. 그런 다음 모든 객체의 속성을 반복하고 속성 이름과 값을 나열하는 문자열을 반환합니다.

function dump_props(obj, obj_name) {
    var result = "";
    for (var i in obj) {
        result += obj_name + "." + i + " = " + obj[i] + "<br>";
    }
    result += "<hr>";
    return result;
}

 

1.9. for...of 문

 

for...of 문은 각각의 고유한 특성의 값을 실행할 명령과 함께 사용자 지정 반복 후크를 호출하여, 반복 가능한 객체(배열, Map,Set,인수 객체 등을 포함)를 통해 반복하는 루프를 만듭니다.

for (variable of object) {
      statement
}

 

let arr = [3,5,7];
arr.foo = "hello";

for (let i in arr) {
    console.log(i);   // "0", "1", "2", "foo" 
}

for(let i of arr) {
    console.log(i); // "3", "5", "7"
    
}

 

참고 자료

루프와 반복 - JavaScript | MDN

 

제어 구문 | JavaScript로 만나는 세상