[JavaScript] 조건문 if와 선택문 switch 이해하기

개념

if

var n = 100;

if (n < 200) {
  document.write("n은 200미만입니다.")
}

if (조건식) {실행문} 형태로, n이 200 미만이라면 "n은 200미만입니다."를 출력한다는 식이다.

하지만, n이 200 이상일 때는 어떻게 될까? 조건식에 맞지 않기 때문에 아무것도 실행하지 않는다.

 

if (n < 200) {
  document.write("n은 200미만입니다.")
} else {
  document.write("n은 200이상입니다.")
}

if 뒤에 else {실행문}를 추가해서 if의 조건식이 아닐 경우 else의 실행문을 실행하게 된다.

하지만, 여기서 n이 딱 200일 경우 "n은 200입니다."를 추가하고 싶다면 어떻게 해야 할까?

 

if (n < 200) {
  document.write("n은 200미만입니다.")
} else if (n == 200) {
  document.write("n은 200입니다.")
} else {
  document.write("n은 200이상입니다.")
}

중간에 else if를 넣고 (조건식)과 {실행문}을 삽입함으로써 "n은 200입니다."를 출력할 수 있게 하였다.

이처럼, if - else if - else 순서대로 조건식에 맞게 여과된다고 생각하면 된다. 마지막 else가 위에 있는 모든 조건식에 불합되는 경우 실행되는, 즉 쉽게 표현하자면 거르고 걸렀을 때 남은 찌꺼기라고 생각하면 된다.

 

switch

var n = 0;

switch(n) {
  case 0:
    document.write("결과는 0입니다.")
    break;  // 없으면 밑에 case도 같이 나오기 때문에 꼭 넣어주자!
  case 1:
    document.write("결과는 1입니다.")
    break;
  case 2:
    document.write("결과는 2입니다.")
    break;
  case 3:
    document.write("결과는 3입니다.")
    break;
  default:  //  해당하는 case가 없으면 출력되는 값
    document.write("범위를 벗어났습니다.")
}

switch는 (  )에 해당하는 case 값을 찾아 해당 case의 실행문을 실행시켜주는 선택문으로, 위 코드처럼 n이 0이면, case 0의 식을 실행하게 된다. 여기서 주의할 점은 case와 case 사이에 break가 있는 것을 볼 수 있는데, break는 그 즉시 코드(Loop)를 중단시키고 나간다는 뜻으로 switch의 경우 break가 없으면 밑의 case까지 전부 실행시키기 때문에 이를 방지하기 위해서 무조건 들어가야 할 문장이라고 할 수 있다.

맨 마지막의 식은 자신 외에 더 이상 실행시킬 문장이 없기 때문에 break를 넣지 않아도 된다. (break는 반복은 멈춘다는 뜻으로 switch 뿐만 아니라 for, while 등의 반복문에서 주로 쓰인다.)

 

if와 switch는 해당 조건 또는 값에 일치할 경우 특정한 식을 실행한다는 것에 공통점이 있다.

하지만, if는 조건문에 특정 값이 아닌 범위를 입력할 수 있기 때문에 switch보다 범용성이 더 좋다고 할 수 있다.

대신 switch의 경우 if문보다 더 가독성이 좋고 직관적이기 때문에 특정한 값을 대입하는 것이라면, if문보다 switch를 활용하는 게 더 좋다고 할 수 있다. (if ⊃ switch)

 

삼항 조건 연산자

var a = 5, b = 8;
var result = a < b ? "참" : "거짓"

document.write(result)

삼항 조건 연산자는 조건식 ? "true일 때의 값" : "false일 때의 값"으로 if와 switch처럼 다중 조건이 아닌, true or false의 논리에 맞는 경우 간단하게 쓰면 좋을만한 식이다.

위의 코드를 보면, a>b가 true일 때 "참"을 반환하고 false일 때는 "거짓"을 반환한다.

 

문제

과목의 전체 평균을 구하고 95점 이상은 A+, 90점 이상은 A … 나머지는 F학점으로 평가하는 식을 만들어라.
(단, if문을 활용해서 만들어야 한다.)

var 과목 = {
  국어: 98,
  영어: 85,
  수학: 60
};
var 평균 = (과목.국어 + 과목.영어 + 과목.수학) / Object.keys(과목).length;

if (평균 >= 95) {
  var 학점 = "A+";
} else if (평균 >= 90) {
  var 학점 = "A";
} else if (평균 >= 85) {
  var 학점 = "B+";
} else if (평균 >= 80) {
  var 학점 = "B";
} else if (평균 >= 75) {
  var 학점 = "C+";
} else if (평균 >= 70) {
  var 학점 = "C";
} else {
  var 학점 = "F";
}

document.write(평균 + ", " + 학점)

Object.keys()는 오브젝트의 key값을 배열하는 함수이다. length는 갯수를 표시해주는 속성으로 Object.keys().length는 해당 오브젝트의 키값의 갯수를 구하는 함수식이라고 할 수 있다. "오브젝트 이름. 키 값"의 형태로 해당 키 값의 value를 구할 수 있다.

 

1~100 까지의 숫자 중 유저가 임의의 숫자를 입력하게 하고, 숫자 7를 입력했을 시 "행운의 숫자"라고 알려주는 식을 완성하라.
(단, if와 switch를 모두 사용해야 한다.)

var number = prompt("1~100 까지의 숫자 중 하나를 입력하세요.", "0")

if (number > 100) {
  alert("100 이하의 숫자를 입력해주세요.")  // 100 초과의 숫자를 입력했을 시
} else if (number < 1) {
  alert("1 이상의 숫자를 입력해주세요.")  // 1 미만의 숫자를 입력했을 시
} else if (isNaN(number) == true) {
  alert("숫자를 입력해주세요.")  // 숫자가 아닌 문자를 입력했을 시
} else if (number != 7) {
  document.write("꽝입니다.")
} 

switch (number) {
  case "7": document.write("행운의 숫자에 당첨되셨습니다!");
}

if를 통해 우선 prompt()로 받은 값 중 1부터 100까지의 범위에 해당하지 않는 숫자 혹은 문자들을 모두 제외시켰고, 7이 아닌 모든 숫자에 "꽝입니다."를 출력시키게 하였다.

switch로는 사용자가 7을 입력했을 시, "행운의 숫자에 당첨되셨습니다!"라고 출력되게 하였다. 여기서 주의해야 할 점은 prompt()로 받아오는 값은 모두 문자(String) 타입이기 때문에 case에 " "를 표시해야 한다.

 

다음 배열 안의 숫자들의 최댓값과 최솟값을 구하고, 평균값을 구해라.
(단, for문을 이용하여 만들어야 한다.)

// 최댓값 구하기

var arr = [1, 2, 3, 4, 5]
var max = 0;

for (i = 0; i < arr.length; i++) {
  if (max < arr[i]) {
    var max = arr[i];
  }
}

document.write(max)

number.length는 arr 배열의 갯수를 뜻하며 number[i]는 배열 arr의 1부터 5까지의 값을 하나하나 대입한다.

max는 0이기 때문에 1부터 5까지 비교하고, 이 중 가장 높은 값인 5가 max로 변환되는 것을 알 수 있다.

var arr = [1, 2, 3, 4, 5]
var max = Math.max(...arr);

최댓값은 Math.max() 함수를 통해 쉽게 구하는 방법이 있는데, 함수의 인자로 ...arr을 넣어 arr에 있는 모든 객체들을 손쉽게 가져왔다. ...은 전개 연산자라고 하는데, 배열의 요소나 객체를 나열해주는 역할을 한다.

 

// 최솟값 구하기

var arr = [1, 2, 3, 4, 5]
var min = 10;

for (i = 0; i < arr.length; i++) {
  if (min > arr[i]) {
    var min = arr[i];
  }
}

document.write(min);

최솟값 구하는 방법은 최댓값 구하는 방법과 원리는 똑같다. 단, 최솟값이기 때문에 if문에서 min이 arr[i]보다 작은 경우 min = arr[i]로 변환하도록 하였고, min의 초기값 역시 0이 아닌 배열 안의 숫자보다 큰 10을 넣어 주었다.

var arr = [1, 2, 3, 4, 5]
var min = Math.min(...arr);

최솟값 역시 Math.min() 함수를 통해 쉽게 구할 수 있다. 원리는 위의 Matn.max()와 같다.

 

// 평균값 구하기

var arr = [1, 2, 3, 4, 5]
var sum = 0;

for (i = 0; i < arr.length; i++) {
  sum += arr[i];
}

document.write(sum / arr.length);

for문으로 평균값을 구하기 위해서는 누적 연산자를 사용하면 쉽다. sum의 초기값을 0으로 하고, 반복을 통해 arr 배열의 객체들을 모두 sum에 누적하여 더한다.

var arr = [1, 2, 3, 4, 5]
var avg = arr.reduce((a, b) => a + b) / arr.length;

평균값은 reduce() 메소드를 통해 구할 수 있는데, 위의 코드에 b가 for문의 arr[i]와 같은 역할을 수행하고 a가 sum += arr[i]의 역할을 한다고 생각하면 된다.