새싹 프론트엔드

[새싹 프론트엔드] 11/1 (조건문과 반복문)

sognociel 2022. 11. 1. 17:50

01. 조건문

조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)을 실행

  • if, if-else, 다중 if-else, 중첩 if
  • switch
  • break

 

if문 | if(조건식) { 조건식이 참일 경우 실행 코드 }

  • 조건식이 참이면 실행문을 실행한 후 if문을 벗어남
  • 조건식이 거짓이면 바로 if문을 벗어남
if (a > b) { // 조건식은 무조건 true 혹은 false가 나와야 한다.
  document.write("a가 크다");
}

 

 

if-else문 | 조건식이 참인 경우와 거짓인 경우에 다른 코드를 실행

if (a > b) {
  document.write(`<h1>a가 크다</h1>`);
} else {
  document.write(`<h1>b가 크다</h1>`);
}

 

 

다중 if-else문 | if문 다음 else if 문을 연속으로 작성하여 각 조건에 맞는 코드를 실행. else if의 개수에 제한은 없다.

if (a > b) {
  document.write(`<h1>a가 크다</h1>`);
} else if (a < b) {
  document.write(`<h1>b가 크다</h1>`);
} else {
  document.write(`<h1>a와 b는 같다</h1>`);
}

 

 

중첩 if문 | if문 안에 다시 if문 작성이 가능하다.

var num = parseInt(prompt("숫자를 입력하세요"));

if (num > 0) {
  if (num % 2 == 0) {
    document.write(`0보다 큰 짝수`);
  } else {
    document.write(`0보다 큰 홀수`);
  }
} else {
  document.write(`0보다 작거나 같은 수`);
}

중첩 if문 내의 결과는 조건 연산자로도 대체 가능하다

if (num > 0) {
  num % 2 == 0 ? document.write(`0보다 큰 짝수`) : document.write(`0보다 큰 홀수`);
} else {
  document.write(`0보다 작거나 같은 수`);
}

 

 

cf.1) 결과를 출력할 때 if문에 불리언 연산자를 쓰는 경우, 변수와 비교할 문자를 각각 지정한 후 불리언 연산자로 연결을 해주어야 한다.

// day는 prompt로 입력을 받아서 영어로 변환한 것을 출력할 때

if (
  day == "월" ||
  day == "화" ||
  day == "수" ||
  day == "목" ||
  day == "금" ||
  day == "토" ||
  day == "일"
) {
  document.write(`<h1>${eng}</h1>`);
} else {
  document.write(`<h1>${day}는 요일이 아닙니다.</h1>`);
}

// if ( day == "월"||"화"||"수"|| .... 는 적용이 안된다!!

 

cf.2) 조건 계산을 빠르게 하는 방법

true가 될 확률이 높은 조건식을 첫 번째 조건식으로 사용한다.

 

 

switch문 | 값에 따라 서로 다른 코드를 실행. boolean(true, false)만으로 조건을 따지는 if보다 조건문에 적용할 수 있는 값이 많음. 따라서 상수, 문자, boolean이 가능하지만 변수나 식은 사용이 불가능하다.

 

※ case의 경우는 중괄호가 없다. case문이 끝나는 부분에는 break; 를 걸어 해당 값이 일치할 때 실행되는 case문의 끝남을 알려주어야 한다.
만약 break; 로 case 값n의 종료를 알리지 않는다면 break; 를 만날 때까지 case 값n+1 case 값n+2까지 연달아 실행한다.

switch (조건) {
  case 값1:
    조건과 값이 일치할 때 실행할 코드
    break;

  case 값2:
    조건과 값이 일치할 때 실행할 코드
    break;

  default:
    값이 없어도 디폴트로 실행할 부분의 코드. if문의 else와 같은 역할
    필수는 아니다.
    break;
}
var fruits = "키위";
var price;

switch (fruits) {
  case "바나나":
    price = 200;
    break;
  case "사과":
    price = 300;
    break;
  case "키위":
    price = 400;
    break;
  default:
    price = 0;
    document.write(`팔지 않습니다.`);
}

document.write(`${fruits}는 ${price}원 입니다.`);

 

cf.) break; 를 적재적소에 쓴다면 코드를 한 줄이라도 더 줄일 수 있다.

아래 코드의 경우 메뉴로 영어, 한국어를 둘 다 입력받을 수 있는데, 같은 품목의 경우에는 가격이 같으므로 동일 종류 중 한 case의 break를 지워 코드를 작성하였다.

var coffee = prompt("무슨 커피 드릴까요?");
var price = 0;

switch (coffee) {
  case "espresso":
  case "에스프레소":
    price = 2000;
    break;
  case "latte":
  case "라떼":
    price = 3000;
    break;
  case "milk":
  case "우유":
    price = 4000;
    break;
  case "shake":
  case "셰이크":
    price = 6000;
    break;

  default:
    document.write(`메뉴에 없는 품목입니다.`);
}

if (price != 0) {
  document.write(`${coffee}는 ${price}원 입니다.`);
}

 

 

 

02. 반복문

  • for, 중첩for
  • while, do while
  • break
  • continue

 

for문 | 조건식이 true인 동안 작업문을 반복하여 실행하며 조건식의 결과가 false이면 for문을 종료

for (초기문; 조건식; 반복 후 작업) {
  작업문
}
// 폰트 사이즈대로 출력하기 (5px씩 증가)

for (var size = 10; size <= 35; size += 5) {
  document.write(`<span style="font-size:${size}px">${size}px</span>`);
}

코드 실행 결과

 

 

중첩 for문 | if문도 중첩이 가능했던 것처럼 for문도 중첩이 가능하다.

// 별 찍기

for (var i = 1; i <= 5; i++) {
  for (var j = 0; j < i; j++) {
    document.write("*");
  }
  document.write("<br />");
}

 

 

while문 | 조건식이 true인 동안 작업문을 반복 실행. 반복 횟수를 알 수 없는 경우 주로 사용한다.

while (조건식) { // 조건식이 true일 경우에는 무한반복
  작업문
}

for문의 경우 (변수 초기화; 조건식; 반복 후 작업) 총 3덩어리를 작성했다면 while문은 변수 초기화는 바깥(전역)에, 조건식은 조건식 안에, 반복 후 작업은 중괄호 안 작업문에 작성한다. 

 

 

do while문 | 조건식을 검사하여 true인 동안 작업문이 반복 실행. 작업문은 최소 한 번은 실행(do)

while의 경우 조건식이 true일 때 실행되는 반면, do while의 경우 do가 먼저 실행된 후 while이 실행되기 때문에 최소 한 번은 실행된다고 하는 것이다. 

var i = 0;

do {
  document.write(i); // 최소 한 번은 코드를 실행한다. 따라서 do에는 조건문이 없음.
  i++;
} while (i < 10);
// do문을 실행 후 while의 조건문이 true라면 do 안의 구문을 반복 실행. false라면 실행하지 않는다.

 

입력받은 숫자 더하기 while과 do while문 비교

// 변수 초기화
var input = parseInt(prompt("0보다 큰 정수를 입력하세요"));
var i = 0;
var sum = 0;

// while문의 경우
while (i <= input) {
  sum += i;
  i++;
}

// do while문의 경우
do {
  sum += i;
  i++;
} while (i <= input);

// 마지막 출력
document.write(`<h1>0부터 ${input}까지의 합은 ${sum}입니다.`);

 

 

break문 | 반복문을 종료하고 빠져나올 때 사용

 

3000이 넘을 때까지 더하기

var i = 0;
var sum = 0;

while (true) {
  sum += i;
  if (sum >= 3000) {
    break;
  }
  i++; // if문 전에 i++을 해주면 3000이 넘는 i값은 77인데 78로 결과가 나온다.
}

 

 

continue문 | 반복 코드 실행을 중단하고, 다음 반복으로 점프

// 3으로 나눈 나머지가 1인 수만 더하기

var i = 0;
var sum = 0;

for (i = 1; i <= 10; i++) {
  if (i % 3 !== 1) {
    continue; // i값을 3으로 나누었을 때 나머지가 1이 아니라면 다음 조건식으로 간다.
  } // 따라서 나머지가 1이 아닌 수들의 경우 아래 코드가 실행되지 않음
  document.write(`${i} `);
  sum += i;
}

document.write(`합은 ${sum}`);

 

 

 

※ 문자열이나 배열, 객체에서 사용할 수 있는 for of, for in

for...of문 | 이터러블(배열, 문자열 등)을 순회하면서 요소를 변수에 할당

const array = [10, 20, 30, 40, 50];

for (const item of array) {
  document.write(`${item}<br />`);
}

const say = "Hello";
for (const item of say) {
  document.write(`${item}<br />`);
}

 

 

for...in문 | 객체의 모든 프로퍼티를 순회하며 열거

const person = {
  name: "soo",
  age: 20,
  addr: "seoul",
};

for (const key in person) {
  document.write(`${key} : ${person[key]}<br />`);
}

결과

 

 

 

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅'

저작자표시