Colin's Blog
[JavaScript] 2-7. JavaScript Control Statement

JavaScript Control Statement

조건문 (conditional statement)

우리가 실제로 사용하는 모든 프로그램은 경우의 수를 다루고 있습니다.
경우에 따라 프로그램의 동작이 달라야 할 때, 우리는 조건문을 통해 프로그램의 논리구조를 표현할 수 있습니다.



if..else

if..else 구문을 사용하면 조건에 따라 특정 영역의 코드를 실행시키거나 실행시키지 않을 수 있습니다.

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

function game() {
  const result = dice();

  alert(`결과: ${result}`);

  // if..else 구문
  if (result >= 4) {
    //  조건을 만족한다면 (만약 result가 4와 같거나 이상이면)
    alret("당신이 이겼습니다."); //  당신이 이겼다는 내용의 알람을 띄웁니다.
  } else {
    //  = if(result<4)
    //  조건을 만족하지 않는다면 (result가 4보다 작다면)
    alert("당신이 졌습니다."); //  당신이 졌다는 내용의 알림을 띄웁니다.
  }
}

위의 코드처럼 if 문을 두줄로 작성할 필요없이 else 를 쓰면 간편하게 조건이 성립하지 않을 경우의 수도 다룰 수 있습니다.
else 코드가 필요없을 경우에는 else 를 생략할 수 있습니다.

if (result === 1) {
    alert(['운이 너무 없군요..');
}

// 중괄호(curly brace) 내부에 들어있는 구문이 하나인 경우에는 생략이 가능합니다.
if (result === 1) alert('운이 너무 없군요..');



if..else 구문의 중첩

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

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

function game() {
    const result = dice();}

    alert(`결과: ${result}`);

    if (result >= 5) {
        alert('당신이 이겼습니다.');
    } else if (result >= 3) {
        alert('비겼습니다.');
    } else {
        alert('당신이 졌습니다.')
    }
}

game();

if..else 구문의 중첩에는 제한이 없으므로, 경우의 수가 많을 경우에는
if..else 구문을 계속 이어나가면 됩니다.

function translateColor(english) {
  if (english === "red") {
    return "빨강색";
  } else if (english === "blue") {
    return "파랑색";
  } else if (english === "purple" || english === "violet") {
    return "보라색";
  } else {
    return "일치하는 색깔이 없습니다.";
  }
}



Switch 구문

하나의 변수에 대해 경우의 수가 많은 경우 if..else 구문보다 switch 구문을 사용하면 코드를 조금 더 보기 좋게 만들 수 있습니다.

function translateColor(english) {
  let result;
  switch (english) {
    case "red":
      result = "빨강색";
      break;
    case "blue":
      result = "파랑색";
      break;
    case "purple":
      result = "보라색";
      break;
    case "violet":
      result = "보라색";
      break;
    default:
      result = "일치하는 색깔이 없습니다.";
  }
  return result;
}

switch 구문은 case, break, default 라는 키워드와 함께 사용됩니다.
switch 바로 뒤에 괄호에 오는 값이 코드의 실행 여부를 판별할 기준이 되는 값이고,
이 기준이 되는 값과 case 바로 뒤에 오는 값이 일치하면 콜론(:)두의 코드 영역이 실행됩니다.
case 의 뒤에 break 을 써주지 않으면 해당 case 가 실행될 때, 바로 뒤의 case 도 이어서 실행되게 됩니다.
break 을 써주지 않으면, 의도치 않은 동작을 하게 되니 실행되는 코드영역 뒤에 반드시 break 을 써주도록 합니다.

function translateColor(english) {
  let result;
  switch (english) {
    case "red":
      result = "빨강색";
      break;
    case "blue":
      result = "파랑색";
      break;
    case "purple":
    case "violet":
      // 이 코드 영역은 english 변수의 값이 'purple'일 때와 'violet'일 때 모두 실행됩니다.
      result = "보라색";
      break;
    default:
      result = "일치하는 색깔이 없습니다.";
  }
  return result;
}



반복문 (looping statement)

프로그래밍을 하다보면 유사한 작업을 여러 번 반복해서 해야할 경우가 있습니다.
이런 경우를 위해 JS 에서는 반복문을 사용합니다.
반복문은 루프라고 부르기도 합니다.



반복문 - while

while 구문은 특정 조건을 만족시키는 한 코드를 반복해서 실행시킵니다.

let i = 0;

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

console.log("루프가 종료되었습니다.");

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



반복문 - do…while

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

do {
  console.log("이거 한번은 무조건 실행시킵니다.");
} while (false); // 기존 while은 조건문이 true가 아니면 실행이 안되지만 do...while은 조건문이 false여도 무조건 루프 1번은 실행됩니다.



반복문 - for

while 에서 볼 수 있듯이, 루프에는 초기값과 갱신에 대한 코드가 있는 경우가 많습니다.
이떄 for 를 이용하면 코드를 더 짧게 작성할 수 있습니다.

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

console.log("루프가 종료되었습니다.");

for 구문으로 정의된 루프는 항상 while 구문으로 바꿔쓸 수 있고, 많은 경우 반대로도 바꿀 수 있습니다.
초기값을 정할 수 있고, 갱신을 위한 코드가 짧은 경우에는 for 문을, 그렇지 않은 경우에는 while 문을 사용해야 코드가 깔끔해집니다.



for 과 while 의 차이점?

그럼 어떨 때 for 과 while 을 쓰면 좋을까요?
-> 수행 횟수가 정해진 경우에는 for 문을, 특정 조건시 종료될 경우 while 문을 사용하도록 합니다.



반복문 - 배열의 순회

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

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

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

하지만 근래에는 배열의 forEach 메소드나 for..of 구문이 더 많이 쓰입니다.

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

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

const arr = [10, 20, 30];

for (let value of arr) {
  value *= 2;
  console.log(value);
}

// 20
// 40
// 60



break, continue

루프를 도중에 멈추거나, 남은 코드를 건너뛰어버리고 루프의 다음 번 차례로 넘어갑니다.

alert("퀴즈를 시작합니다.");
while (true) {
  const answer = prompt("빨강의 보색은 무엇일까요?");
  if (answer === "초록") {
    alert("정답입니다! 🎉");
    break; // 루프를 종료하고 다음 코드로 넘어감
  } else {
    alert("틀렸습니다! 다시 시도해보세요.");
  }
}
alert("퀴즈가 끝났습니다.");

for (let i = 1; i < 100; i++) {
  console.log(`현재 숫자는 ${i} 입니다.`);
  if (i % 7 !== 0) {
    continue; // 루프의 나머지 코드를 건너뜀
  }
  console.log(`${i}는 7의 배수입니다.`);
}



함수를 즉시 종료하기

continue와 break가 루프의 나머지 코드를 건너뛰는 효과를 갖는 것과 유사하게,
return과 throw는 함수의 나머지 코드를 건너뛰고 함수를 즉시 종료시키는 결과를 낳습니다.

function translateColor(english) {
  switch (english) {
    case "red":
      return "빨강색";
    case "blue":
      return "파랑색";
    case "purple":
    case "violet":
      return "보라색";
    default:
      return "일치하는 색깔이 없습니다.";
  }
}

break 를 쓰지 않고 return 을 사용하여 무한루프를 방지할 수 있습니다.
return 은 해당 함수만 종료시킵니다.

function translateColor(english) {
  switch (english) {
    case "red":
      return "빨강색";
    case "blue":
      return "파랑색";
    case "purple":
    case "violet":
      return "보라색";
    default:
      throw new Error("일치하는 색깔이 없습니다.");
  }
}

throw 구문은 코드의 실행을 중단시키고 에러를 발생시키는 동작을 합니다.
throw 는 본인을 포함시킨 모든 함수를 종료시킵니다.



2. Today I Found Out

수업시간에 String, Boolean, Null&Undefined, Algorhitm을 배우면서
미리 예습한 것에 대해 다행이다라는 생각을 하였습니다.
빠르게 많은 것을 학습하기 위해 예습, 복습은 필수라는 생각을 하였고,
오늘 배운 것들을 복습하고 제어구문에 대해서 예습을 하였습니다.
다양한 알고리즘 문제를 풀면서 제어구문의 중요함을 느꼈던 만큼
집중해서 어떨때 어떤 구문을 사용해야 하는지 깨달을 수 있어서
너무 좋았습니다.



3. refer

https://helloworldjavascript.net/pages/175-control-statement.html

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for…of

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

© 2018 Colin. All rights reserved.