나의개발일지

Java Script) 조건문 본문

Front-End

Java Script) 조건문

아. 이렇게 하면 될거 같은데.. 2023. 12. 15. 17:59
728x90


제어문

제어문은 프로그램의 실행 과정을 제어하기 위해 사용하는 구문으로, 반목 처리 및  선택 처리를 할 떄 사용 한다.

조건문, 반복문, 보조 제어문으로 나눌 수 있다.


<자바 스크립트 제어문>

유형 설명 구조
조건문 조건에 따라 다음 문장을 선택적으로 실행한다 - if 문
- if~else문
- 다중 if~else문
- switch~case문
반복문 동일한 명령을 여러 번 처리하거나 특정 연산을 반복적으로 처리한다. - for 문
- while 문
- do ~ while 문
보조 제어문 조건문을 만나면 건너뛰거나 반복 수행을 종료한다. 반복문 내에서 사용한다. - continue문
- break문

 


1. if 문

if문은 조건식이 참(true)이면 블록 내의 문장을 처리하고, 거짓이면 블록을 빠져 나간다. 조건식에 true 값을 직접 대입하면 무조건 처리하도록 제어할 수도 있다. 또한 if문안에 if문을 넣어 중첩 가능하다.

 

<if 문 예시>

var age = 21;
var result = "";

if(age > 19) {
	result = "성인입니다";
}

console.log(result);

 

<예시 출력>

성인 입니다

2. if~else문

조건식이 참(true)인 경우와 거짓(false)인 경우 처리한 문자이 각각 따로 있을때 사용하는 제어문이다

 

<if~else문의 예시>

var gender = "M";
var age = 21;

if(gender == "M") {
	if(age >= 19) {
    	result = "남자 성인 입니다";
    }
    else {
    	result = "남자 미성년 입니다";
    }
}

else {
	if(age >= 19) {
    	result = "여자 성인 입니다";
    }
    else {
    	result = "여자 미성년 입니다";
    }
}

console.log("당신은" + result);

 

<예시 출력>

당신은 남자 성인 입니다

3. 다중 if~else 문

다중 if ~ else문은 여러 조건을 체크해야 할 때 사용한다.

 

<사용방법>

if(조건식 1) {
    조건식 1 의 결과가 참일 때 실행할 문장;
}
else if(조건식 2) {
    조건식 2 의 결과가 참일 때 실행할 문장;
}
else {
    조건식 1, 조건식 2 모두 거짓일 때 실행할 문장;
}

 

<다중 if~else 문 예시>

var point = 93;
var grade = "";

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

console.log(grade);

 

<예시 출력>

A

 


4. switch~case 문

다중 if~else문은 모든 조건식을 체크하고 간다. 이 문제점을 최적화 하기 위해 사용하는게 다중 선택문 이다.

switch~case문은 조건문을 체크하여 다음에 처리하 문장의 위치를 파악한 후 해당 문자으로 가서 바로 처리한다.

 

<사용 방법>

switch(상수값) {
    case n:
        실행 문장;
        break;
    case n:
        실행 문장;
        break;
    default:
        기본 실행 문장;
}

 

  • switch(상수값) : 상수값으로 수치 또는 문자를 사용한다. 다음에 처리할 문장이 몇 번째 case문에 해당하는지 표시한다.
  • case n ~ default : case 다음에는 수치나 문자가오고 그 다음에는 콜론(:)을 붙인다. case가 없으면 default를 실행한다. (default는 없어도 된다.)
  • break : 해당 case문의 문장을 처리하고 블록을 빠져나오도록 한다. break문이 없으면 다음 case문을 처리한다.

 

<switch~case 문 예시>

var day;
var week = new Date().getDay(); //0(일요일) ~ 6(토요일)

switch(week) {
	case 0:
    	day = "일요일";
	case 1:
    	day = "월요일"
	case 2:
    	day = "화요일";
	case 3:
    	day = "수요일";
	case 4:
    	day = "목요일";
	case 5:
    	day = "금요일";
	case 6:
    	day = "토요일";
    default:
        day = "없는 요일";
}

console.log("오늘은 " + day + " 입니다");

 

<예시 출력>

오늘은 금요일 입니다
728x90
반응형

'Front-End' 카테고리의 다른 글

Vue.js) 주요 DIrective  (0) 2024.07.03
JavaScript) ES6  (0) 2024.04.30
VS-CODE 단축어  (5) 2024.03.14
Java Script) 연산자  (1) 2023.11.27
Java Script) 데이터 타입과 변수  (0) 2023.11.21