[Front-End] JavaScript 조건문

조건문

조건문은 특정 조건을 확인하고 조건에 따라 작업을 수행한다.

 

If 문

형태 : 「  if ( 조건 ) { 조건이 맞을 때 실행할 코드; }  」

if를 쓰고 ()소괄호 안에 조건을 작성하고 조건이 충족되면 {}중괄호 안에 코드가 실행된다. 

if (true) {
  console.log('This message will print!');
}
// Prints: This message will print!

 

If... Else 문

형태 : 「 if ( 조건 ) { 조건이 맞을 때 실행할 코드; }

                          else { 조건이 틀릴 때 실행할 코드; } 」

if 문에 else와 {}중괄호를 추가로 사용하면 조건이 충족되었을 때는 if 뒤에 중괄호 속 코드가 실행되고, 조건이 충족되지 않았을 때는 else 뒤에 중괄호 속 코드가 실행된다. 

if (false) {
  console.log('The code in this block will not run.');
} else {
  console.log('But the code in this block will!');
}

// Prints: But the code in this block will!

 

 

비교 연산자

조건문을 작성할 때 값을 비교하기 위해 비교 연산자를 사용할 수 있다.

비교 연산자는 왼쪽의 값을 오른쪽의 값과 비교한다.

① 보다 작음 : <

② 보다 큰: >

③ 보다 작거나 같음 : <=

④ 보다 크거나 같음 : >=

⑤ 같음 : ===

⑥ 같지 않음 : !==

10 < 12 // Evaluates to true

'apples' === 'oranges' // false

 

논리 연산자

조건문에 정교한 논리를 추가하기 위해 true와 false를 값, 즉 boolean 값을 사용하는 논리 연산자를 사용할 수 있다.

① and 연산자 : && 

② or 연산자 : || 

③ not 연산자 : ! 

 

&&를 사용하였으므로 두 가지 조건이 모두 true로 판단되어야 중괄호 속 코드가 실행된다.

if (stopLight === 'green' && pedestrians === 0) {
  console.log('Go!');
} else {
  console.log('Stop');
}

 

||를 사용하였으므로 두 가지 조건 중에서 하나만 true로 판단되어도 중괄호 속 코드가 실행된다.

if (day === 'Saturday' || day === 'Sunday') {
  console.log('Enjoy the weekend!');
} else {
  console.log('Do some work.');
}

 

!=을 사용하였으므로 true이면 flase가, flase이면 true가 된다.

let excited = true;
console.log(!excited); // Prints false

let sleepy = false;
console.log(!sleepy); // Prints true

 

 

 True와 False 판단

조건 내에서 검사할 때 문자열이나 숫자와 같은 boolean이 아닌 데이터 유형이 평가되는 방식을 고려해야 한다.

 

▶ true로 판단되는 경우

• 특정 값과 같을 때

• 변수에 값이 할당되었을 때

 

ex) myVariable이 값을 가지므로 true로 판단되어 if 뒤의 중괄호 속 코드가 실행된다.

let myVariable = 'I Exist!';

if (myVariable) {
   console.log(myVariable)
} else {
   console.log('The variable does not exist.')
}

 

▶ false로 판단되는 경우

• 0

• " " 또는 ' ' 같은 빈 문자열

• null (가치가 전혀 없을 때를 나타냄)

• undefined (선언된 변수에 값이 없는 경우를 나타냄)

• NaN 또는 숫자 아님

 

ex) numberOfApples가 0이므로 false로 판단되어져 else 뒤의 중괄호 속 코드가 실행된다.

let numberOfApples = 0;

if (numberOfApples){
   console.log('Let us eat apples!');
} else {
   console.log('No apples left!');
}

// Prints 'No apples left!'

 

축약해서 쓰기

아래 코드에서 username이 정의되어 있는지 확인하고 그렇지 않은 경우 기본 문자열을 할당한다.

let defaultName;
if (username) {
  defaultName = username;
} else {
  defaultName = 'Stranger';
}

논리 연산자를 사용해서 위의 코드를 축약하여 쓸 수 있다. 

boolean 조건에서 JavaScript는 ||연산자를 사용하는 경우 변수에 진실 값을 할당한다.

let defaultName = username || 'Stranger';

||연산자의 좌측 상태를 확인하고 진실일 경우 변수 defaultName의 실제 값이 할당되며, 거짓일 경우에는 'Stranger'가 할당된다.

→ 이 개념은 short-circuit evaluation 이라고도 불림.

 

 

삼항 연산자

삼항 연산자를 사용하여 if... else명령문을 단순화할 수 있다.

let isNightTime = true;

if (isNightTime) {
  console.log('Turn on the lights!');
} else {
  console.log('Turn off the lights!');
}

삼항 연산자를 사용하여 위의 코드와 동일한 기능을 수행하면서도 짧은 코드를 작성할 수 있다.

isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!')

 

 

Else If 문

else if를 사용하여 더 복잡한 조건문을 만들 수 있다.

else if문은 항상 if 문장 뒤, else 문장 앞에 위치하며 조건을 가진다.

let stopLight = 'yellow';

if (stopLight === 'red') {
  console.log('Stop!');
} else if (stopLight === 'yellow') {
  console.log('Slow down.');
} else if (stopLight === 'green') {
  console.log('Go!');
} else {
  console.log('Caution, unknown!');
}

 

Switch 문

else if 문을 사용하여 여러 조건을 나열하는 경우에 switch(스위치)문을 사용하여 더 간단하게 코드를 작성할 수 있다.

let groceryItem = 'papaya';

switch (groceryItem) {
  case 'tomato':
    console.log('Tomatoes are $0.49');
    break;
  case 'lime':
    console.log('Limes are $1.49');
    break;
  case 'papaya':
    console.log('Papayas are $1.29');
    break;
  default:
    console.log('Invalid item');
    break;
}

// Prints 'Papayas are $1.29'

break키워드는 블록을 나가고 더 이상 코드를 실행하거나 코드 블록 내부의 다른 경우를 확인하기 위해 컴퓨터에게 알려준다. switch문의 끝에는 default문이 있고, 이는 cases 중 어느 것도 참이 아니면 default 실행된다.

+) break키워드가 없으면 일치하는 첫 번째 케이스가 실행되지만 defalut문을 포함하여 일치 여부에 관계없이 모든 후속 케이스들도 실행된다. 이러한 점은 하나의 코드 블록만 실행하는 if / else조건문과 다르다.