웹 프로그래머(웹 개발자)가 되어보자 - 14

5-4. 비교문

앞시간까지 if 조건문을 활용하여 보았습니다.
조건문에는 if조건문 말고 다른 형태의 조건문도 존재합니다.
아래 예문을 살펴보겠습니다.

var who = '치킨';
switch (who) {
  case '치킨':
    console.log('치킨입니다.');
    break;
  case '무':
    console.log('무 입니다.');
    break;
  default:
    console.log('치킨도 아니고 무도 아닙니다 : ' + who);
}

치킨..인건 반갑네요. 근데 switch~?

 

switch라는조건문이 나타났습니다.
switch조건문은 if와 사용법이 비슷합니다.
switch 소괄호에 판별할 값을 넣어주고 대괄호로 경우(case)를 작성하여 줍니다.
들어온 변수값이 해당 경우(case)에 맞으면 break라는 명령어(예약어)를 만나기 전까지 행동을 실시합니다.
또한 경우(case)에 해당하지 않으면 default라는 예약어에 의해 기본형태가 동작하게 됩니다.(마치 if 조건문의 else 와 같습니다.)
이해를 위해 다른 예제를 살펴보겠습니다.

var number = 90;
switch (true) {
  case (number < 90):
    console.log('up 90');
    break;
  case (number > 0):
    console.log('up 0');
    break;
}

요렇게 조건을 case에 넣을 수도 있습니다.

 

switch 소괄호 조건이 true이므로 항상 동작합니다. 그리고 경우가(case) 비교연산자에 의해서 비교하도록 되어있습니다.
여기서 보아두어야 할 것은 else의 역할을 하던 default가 생략 가능하다는 점 입니다.
이렇게 숫자를 비교할 때도 사용할 수 있습니다.
앞선 문제들을 switch case 로 연습 해 보는것이 매우 좋습니다.

간단한 문제를 풀고 넘어가도록 하겠습니다.

 

* 문제 : 5-4-1

* 반드시 switch, case를 사용하여야 합니다!
"변수 text에 값이 a면 안녕, b면 반가워, 다른 내용이면 잘가를 출력하여 주세요." 

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

위 문제에 대한 답 입니다.

* 답

var arg = '치킨';
var response = '';
switch (arg) {
  case 'a':
    response = '안녕';
    break;
  case 'b':
    response = '반가워';
    break;
  default:
    response = '잘가';
}
console.log(response);

어렵지 않는 코드 입니다.

 

이러한 switch case는 무언가 조건에 따른 경우(case)값이 명확할 때, 명시적일때 자주 사용됩니다.
조건을 판별하는 범위가 다양하거나 복잡한 경우에는 if조건문이 좀더 많이 사용되는 것 같습니다.

마지막으로 삼항 조건 연산자에 대해서 알아보겠습니다.
아주 간단한 비교가 필요한 경우에 if 조건문이나 switch 조건문을 사용하더라도 작성해야되는 규칙이 매우 많습니다.
이를 조금 더 효율적으로 해 주는 것이 바로 삼항 조건 연산자 입니다.
간단한 예를들어 보겠습니다.
변수 number가 10보다크면 good을 10보다 작으면 bad를 출력해보도록 하겠습니다.

var number = 11;
console.log( number > 10 ? 'good':'bad' );

매우 간단하게 출력이 되었습니다.

 

아주 간단한 내용임에도 불구하고 주어진 조건에 맞게 값이 출력되는 것을 볼 수 있습니다.
사용하는방법 또한 매우 간단합니다.

* 논리값(비교연산자) ? 참인경우 : 거짓인경우

 

물음표(?) 왼쪽에 비교연산자를 통해 만들어진 논리값을 위치시키고 물음표(?) 첫번째에는 참인경우 해당하는 값, 그리고 콜른(:)을 입력하고 콜른(:) 뒤에는 거짓에 해당하는 경우의 값을 넣어주면 됩니다.
몇가지 예제를 통해 이해해보도록 하겠습니다.

var number = 11;
var result = number > 10 ? 'good':'bad';
console.log(result);

var name = 'good';
var result2 = name.indexOf('goo') > -1 ? 'goo in name!!' : 'no..';
console.log(result2);

var name2 = 'okok';
var result3 = name2.includes('bad') ? 12345 : 56789;
console.log(result3);

조건에 따라 값이 대입되고 있습니다.

 

위 예문을 실행하여보면 삼항 조건 연산자 첫번째의 비교연산에 따른 결과가 참이면 콜른 좌측, 거짓이면 콜른 우측값이 정해지는 것을 볼 수 있습니다.
삼항조건 연산자는 비교할 조건이 아주 간단한 경우에 자주 사용됩니다.

 

이번시간까지 조건문에 대해서 살펴 보았습니다.
조건문은 3가지 형태로 존재합니다.
1. if 조건문
2. switch 조건문
3. 삼항 조건 연산자

해당 조건문에 대해서는 몇번이고 연습하여 숙달하여야 합니다.
다음시간에는 데이터가 담겨있는 배열과 반복문에 대해서 살펴보겠습니다.
배열과 반복문이 끝나게 되면 함수에 대해서 살펴볼 예정이며,
함수까지 어느정도 숙달이되면 이제 화면에 그리는 방법에 대해서 살펴보도록 하겠습니다. ^^