티스토리 뷰

코딩/코드스테이츠

[JavaScript] 조건문

김기지 2022. 12. 19. 14:38
컴퓨터는 작성된 코드를 위에서 아래 순서로 순차적으로 실행한다.
그런데 어떤 경우에 따라 다른 코드가 실행되게 하고 싶다면??

조건문을 활용하자

 

 

◎ if문

  • 가장 대표적인 조건문
  • 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됨 → boolean타입이 되도록 작성해야한다.
if ( 조건식 ) { 내부 코드 }

조건식이 참(true)으로 평가되면 코드블록 내부의 코드가 실행된다.

 

 

 


조건식을 상황에 맞게 작성하면 특정 상황에만 코드가 실행되도록 할 수 있다.
boolean타입에서 사용한 연산자를 이용하여 조건식을 만들어보자!

 

● 동치 연산자(===)

- 두 피연산자가 동일하면 true, 아니면 false로 반환됨

- !==는 반대로 반환

let nickname = 'kiji';
if (nickname === 'kiji'){
    console.log('이미 등록된 닉네임입니다.') // 이미 등록된 닉네임입니다.
}

let nickname = 'kimkiji';
if (nickname !== 'kiji'){
    console.log('사용 가능한 닉네임입니다.') //사용 가능한 닉네임입니다.
}

 

● 비교 연산자 ( < , > , <= , >= )

- 두 피연산자의 값의 크기를 비교

let num = 20;
if(num-5 > 10){
    num=num+1;
}
console.log(num); //21

 

● 논리 연산자 ( || , && )

- 논리합(||), 논리곱(&&)을 사용하면 복수의 조건문을 작성할 수 있음

let score = 47;
if (score > 20 && score < 70){
    console.log('재시험 대상입니다.') // 재시험 대상입니다.
}

 

● 부정 연산자 (!)

- 조건을 부정 

- 조건이 true면 false, 조건이 false면 true로 반환

let age = 16;
if(!(age > 20)){
    console.log('성인이 아닙니다.') // 성인이 아닙니다.
}

 


if문으로 조건식을 세우면 true일때만 코드가 실행된다.
조건이 true와 false일 때를 나누어 각각 다른 코드가 실행되도록 하고 싶다면?

else문을 사용하자

◎ else 문

  • else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 함
  • 조건을 더 추가하고 싶다면 else if문을 사용하자
  • if문과 else문은 두 번 이상 사용할 수 없지만 else if문은 여러번 사용 가능
if (age>19){
    console.log('성인입니다.');
} else if(age<=19 && age >13){
    console.log('학생입니다.');
} else if(age<=13 && age >7) {
    console.log('어린이입니다.');
}

대중교통 기준 요금 적용 연령을 나누어보았다.

여기에 나이를 입력하면 만족하는 조건에 걸린 코드가 실행된다.

 

 


○ 삼항 조건 연산자

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있다.
삼항 조건 연산자는 조건식을 먼저 작성한 후 ?를 입력한 뒤 참/거짓일 때 실행할 코드를 각각 입력
참/거짓일 때 실행할 코드는 : 로 구분한다.
num%2===0? console.log('짝수'):console.log('홀수')

짝수와 홀수를 구분하는 코드이다.

이를 if문으로 바꿔보면

if(num%2===0){
    console.log('짝수');
} else {
    console.log('홀수');
}

조건에 따라 실행할 코드가 간단한 경우 삼항 조건 연산자를 활용하는게 가독성이 좋다.

하지만 실행할 코드가 복잡하다면 if else문을 사용하자.

728x90

'코딩 > 코드스테이츠' 카테고리의 다른 글

[HTML] 기초  (0) 2022.12.25
[JavaScript] 반복문  (0) 2022.12.20
[JavaScript] 변수  (0) 2022.12.18
[JavaScript] Type  (0) 2022.12.18
프론트엔드 부트캠프를 들어가며..-  (0) 2022.12.15