개발자를 희망하는 초보의 자기개발 이야기

JavaScript 조건문(Condition) 본문

프론트엔드(Front-end)/JavaScript

JavaScript 조건문(Condition)

클라우드아실 2020. 12. 20. 13:15
반응형

JavaScript 조건문(condition)

 : 조건문은 특정한 조건 아래서만 코드가 실행되게 하는 구문. 즉, 표현식의 결과값에 따라 별도의 명령을 수행하도록 하는 실행문입니다. 조건문에는 반드시 비교 연산자가 필요합니다. 비교의 결과는 Boolean형태, 즉 true 또는 false입니다. 

3 > 5; // false
9 < 10; // true

 

 : 1은 숫자고 '1'은 문자열로 자료형이 다릅니다. 연산자에서 기술했듯이 자료형까지 정확히 비교하기 위해서는 ===(일치연산자) 또는 !==(불일치연산자)를 사용해야 합니다.

1 == '1' // ture
1 === '1' // false

 

 : 조건문 중 if문에 대해 공부합니다. if로 시작하고 괄호 안에 조건이 오는데 값이 true라면 중괄호 {} 안의 구문이 실행됩니다. true나 false 자체를 넣어도 반응하지만 비교가 아니라 값을 바로 대입해버리는 것이기 때문에 실질적으로는 그렇게 쓰지 않습니다.

if (조건1) {
  // 조건1 true면 실행
} else if (조건2) {
  // 조건1이 true가 아닐 때
  // 조건2 true면 실행
} else {
  // 모든 조건이 true가 아니면 실행
  }
  
  // 조건에는 boolean으로 결과가 나오는 비교구문이 들어갑니다.

 

 : 1부터 5까지 출력되는 조건문을 아래와 같이 만들면 괄호 안이 true이기 때문에 1~5까지가 출력됩니다.

if (true) {
  console.log(1) // 1
  console.log(2) // 2
  console.log(3) // 3
  console.log(4) // 4
  }   // 조건1 true면 실행

  console.log(5) // 5

 

 : 괄호 안이 false가 되면 5만 출력됩니다. 중괄호 안의 내용은 모두 실행되지 않고 조건문 밖의 내용만 실행되기 때문입니다.

if (false) {
  console.log(1)
  console.log(2)
  console.log(3)
  console.log(4)
  }   // 조건1 false면 미실행

  console.log(5) // 5

 

 : else의 경우 if가 true일 경우는 실행되지 않고 false로 거짓값이면 넘어와서 실행됩니다.

if (true) {
  console.log(1) // 1
  console.log(2) // 2
} else {
  console.log(3)
  console.log(4)
  }   // 조건1 true로 else부분 미실행
if (false) {
  console.log(1)
  console.log(2)
} else {
  console.log(3) // 3
  console.log(4) // 4
  }   // 조건1 false로 else부분 실행

 

 : else if의 경우 여러 조건을 가질 때 사용합니다. if는 처음에만, else는 마지막에만(생략 가능) 사용할 수 있지만 else if는 중첩사용이 가능합니다. 모든 조건에 해당하지 않는 부분을 else로 남겨둡니다.

if(false) {
  console.log(1)
} else if(false){ 
  console.log(2) // 조건1,2 둘 다 false로 미실행
} else if(true){
  console.log(3) // 조건3 true로 실행. 
} else{
  console.log(4) // 4
  }   // 조건3 실행되어 else 부분 미실행

 

 : 간단한 if else문은 ?기호를 이용해서 삼항연산자로 바꿀 수 있습니다. 다만 가독성을 위해 남발하지 않는 것이 좋습니다.

let i = 10, j;

if (i > 10) {
  j = 15;
} else {
  j = 5;
} // j = 15;

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let i = 10, j;

let j = i > 10 ? 15 : 5;
        표현식 ? 반환값1(true일 때) : 반환값2(false일 때)
  // j = 15;

 

 : 조건문은 중첩해서 사용할 수 있습니다. 이때 논리연산자를 사용합니다.

let i = 10, j = 5, k;

if (i > 9 && j > 4) { // (i > 9)는 true이고  (j > 4)도 true이기 때문에 k = 15 로 할당된다.
  k = 15;
} 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let i = 10, j = 5, k;

if (i > 10 && j > 4) { // (i > 10)는 false이고  (j > 4)도 true이기 때문에 할당 안됨. undefined
  k = 15;
} 

 

 : 항상 false로 판별하는 falsy값이 있습니다. 아래의 조건들은 if문에서 false로 변환되므로 if구문이 실행되지 않습니다.

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')

정리

  • 결과값에 따라 명령을 실행
  • 비교연산자 // 결과는 true 또는 false
  • ===와 !== // 자료형까지 비교
  • if와 else는 각각 1쌍
  • else if는 그 사이 조건을 중첩할 때 사용
  • ?기호를 이용해 삼항연산자로 표현 가능
  • falsy값 6가지

참고

생활코딩 조건문

제로초 조건문

TCPSCHOOL.COM 조건문

MDN 거짓같은 값

 

반응형

'프론트엔드(Front-end) > JavaScript' 카테고리의 다른 글

JavaScript 반복문(Loop)  (0) 2020.12.26
JavaScript 문자열(String)  (0) 2020.12.20
JavaScript 연산자(operator)  (0) 2020.12.20
JavaScript 함수(Function)  (0) 2020.12.14
JavaScript 자료형(Data Type)  (0) 2020.12.13