자바스크립트로 프로그래밍 입문 9. 조건문(Conditional Statement) 2 - else if, 논리연산자, 나머지 연산자

else if

else if는 if와 else 사이에 사용되어 2가지 이상의 분기를 줄 수 있습니다.

if(조건1){
  조건1을 만족하는 경우 이곳의 코드가 실행됨
}
else if(조건2){
  조건1을 만족하지 못하지만 조건2를 만족하는 경우 이곳의 코드가 실행됨
}
else{
  어떠한 조건도 만족하지 못하는 경우 이곳의 코드가 실행됨
}

- if else 문에서 if 와 else 사이에 else if가 끼어 들어간 형태로, if else 문의 확장입니다.
- if의 조건이 만족하지 않을 경우에만, else if의 조건을 확인합니다. if의 조건이 만족된다면 if else의 조건을 확인하지 않습니다.

if, else if, else를 사용해서 주어진 값이 음수인지, 양수인지 혹은 0인지를 확인하는 함수를 만들어 봅시다.

function checkNumber(num){

  if(num > 0){
    console.log("양수입니다.");
  }
  else if(num == 0){
    console.log("0입니다.");
  }
  else{
    console.log("음수입니다.");
  }

}

주어진 값에 따라 3가지 분기를 가질 수 있게 되었습니다. 3가지보다 더 많은 분기가 필요하다면, else if를 더 반복하면 됩니다.

성적에 따라 A, B, C, D, F를 주는 함수를 만들어 봅시다.

function getGrade(score){

  var grade;

  if(score > 90){
    grade = 'A';
  }
  else if(score > 80){
    grade = 'B';
  }
  else if(score > 70){
    grade = 'C';
  }
  else if(score > 60){
    grade = 'D';
  }
  else{
    grade = 'F';
  }

  return grade;

}

if else가 여러번 사용된 경우, if의 조건을 포함하여 첫번째로 만족하는 조건의 {}안의 코드가 실행되고, 그 다음의 조건들은 아예 확인조차 하지 않고 if문 다음 코드로 진행합니다. 위 함수에서 만약 score가 80이라면, 처음 if의 score > 90을 확인한 후 해당되지 않으므로 다음 else if의 score > 80 을 확인하고, 이 조건에 해당하므로 해당 {}안의 코드를 실행하지만, 그 뒤에 있는 score > 70, score > 60의 조건은 아에 확인조차 않고 다음 코드인 return grade;로 넘어갑니다.

첫번째 예제는 console.log로 결과를 콘솔에 표시하도록 하였고, 두번째 예제는 return을 통해 결과값을 return합니다. 이 둘의 차이점은 무엇일까요?

console.log로 결과를 표시하면 콘솔을 보는 사람이 바로 결과를 알아 볼 순 있지만 콘솔에 표시된 값을 어딘가에 저장한다거나, 다시 사용할 수 없습니다. return을 사용하면 해당 함수는 데이터를 return하게 되므로 이 데이터를 활용할 수가 있습니다. 아래처럼 말이죠.

var myGrade = getGrade(86);

console.log("내성적: "+myGrade);

논리연산자

논리연산자는 Boolean 데이터(true/false)를 연산하여 새로운 Boolean 데이터를 생성합니다.

논리연산자	하는 일	예제	결과
&&	좌항과 우항이 모두 true이면 true, 나머지는 false	true && true	true
		true && false	false
		false && true	false
		false && false	false
||	좌항과 우항 중 하나라도 true이면 true	true || true	true
		true || false	true
		false || true	true
		false || false	false
!	true이면 false, false이면 true	!true	false
		!false	true

&& 연산자는 and 연산자, || 연산자는 or 연산자로 불리며, 이 둘을 사용해서 if문의 조건부에 두가지 이상의 조건 줄 수 있습니다.

키가 80cm 이상, 195cm 이하인 사람만 탑승할 수 있는 롤러코스터가 있습니다. 이 롤러코스터에 탑승할 수 있는지 없는지를 true/false로 나타내는 함수를 만들어 봅시다.

function checkHeight(height){

  if(height >= 80 && height <= 195){
    return true;
  }
  else {
    return false;
  }

}

조건 그 자체가 Boolean 데이터를 생성하는 연산식이므로 아래와 같이 나타낼 수도 있습니다.

function checkHeight(height){

  return height >= 80 && height <= 195;

}

한 식에 덧셈과 곱셈이 같이 있는 경우 곱셈을 먼저 계산하는 것처럼, &&와 ||이 같이 있는 경우 &&이 먼저 연산된 후 ||이 연산됩니다.

true || true && false

위 값은 &&가 먼저 계산되어 true가 됩니다. 수학과 마찬가지로 괄호를 이용하여 연산 순서를 조절할 수 있습니다.

(true || true) && false

위 값은 괄호안이 먼저 계산되어 false가 됩니다.

나머지 연산자

마지막으로 나머지 연산자라는 조금 특별한 연산자에 대해 알아봅시다.

숫자1 % 숫자2

%는 나머지 연산자로 숫자1을 숫자2로 나누었을 경우 나머지가 몇인지 알려주는 연산자입니다.

예를 들어, 13%3은 13을 3으로 나누면 4로 나누어진 후 1이 남으므로 1이 되고, 100%20은 100을 20으로 나누면 5로 나누어 떨어지므로 0이 됩니다.

나머지 연산자의 연산 결과는 항상 숫자2보다 작다는 특징이 있습니다.

주로 주어진 수가 홀수(odd) 인지 짝수(even)인지 구별하는 용도로 쓰입니다. 2로 나누어 떨어지면 짝수, 2로 나누어서 1이 남으면 홀수입니다.

function isEven(num){
  return num%2 == 0;
}

위 함수에 수를 넣어서 호출하면, 짝수인 경우 true가, 홀수인 경우 false가 return됩니다.

정리 및 요약

• else if는 if와 else 사이에 사용되어 2가지 이상의 분기를 줄 수 있음. 한번 이상 사용도 가능
• 조건들 중에 가장 먼저 만족하는 조건의 {}안의 코드가 실행되고, 그 다음의 조건들은 아예 확인조차 하지 않고 if문 다음 코드로 진행됨
• 논리연산자: Boolean 데이터(true/false)를 연산하여 새로운 Boolean 데이터를 생성하는 연산자

• 논리연산자	하는 일
  &&	좌항과 우항이 모두 true이면 true, 나머지는 false
  ||	좌항과 우항 중 하나라도 true이면 true
  !	true이면 false, false이면 true

• &&와 ||이 같이 있는 경우 &&을 먼저 계산
• 괄호를 이용하여 논리연산자의 연산 순서를 조절할 수 있음
• %: 나머지 연산자. 좌항을 우항의 값으로 나눈 후 나머지의 값이 됨