[JavaScript] 10. 조건문

Eden·2022년 9월 11일
0

Javascript

목록 보기
28/33
post-thumbnail

10. 조건문

if문

조건문은 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문이다.

//조건문의 기본형식
if (조건식)
	 동작문;

조건문은 조건식과 동작문으로 구분된다. 조건식이 참이면 내부의 동작문이 실행되고, 거짓이면 실행되지 않는다.

동작문이 하나 이상이면 동작문들을 {}중괄호로 감싼다.

if (조건식) {
 동작문1; 
 동작문2;
 동작문3;
}
//조건이 참이면 실행된다.
if(true) {
	console.log('Hello, if!')
}
>"Hello, if!"

true라는 값을 직접 넣어줄 필요없이 true로 형 변환되는 값이나 그것을 담고 있는 변수를 넣어도 된다.

let condition = true;

if (condition) {
 console.log('Hello, if')
}

조건에는 모든 값을 넣을 수 있다.

let value = '사과';
let condition = true;

if (condition){
	value = '바나나';
}
console.log(value)
>"바나나"

else

조건식이 거짓일 때 value를 포도로 만들어보겠다.

let value = '사과';
let condition = false;

if (condition) {
	value = '바나나';
} else {
	value = '포도';
}

console.log(value);
>"포도"

else if

조건이 여러 개 일때.

if (조건식) {
	동작문;
} else if (조건식) {
	동작문;
} else {
	동작문;
}

else if 문은 (여러 개 가능) else문 없이 사용할 수도 있다.

if (조건식) {
	동작문;
} else if (조건식) {
	동작문;
} else if (조건식) {
	동작문;
}

조건문도 문이기 때문에 중괄호 안에 다시 넣을 수 있다.

let first = true;
let second = false;

if (first) {
	console.log('첫 번째 조건 충족!');
	if (second) {
		console.log('두 번째 조건 충족!'); 
	} else {
		console.log('두 번째 조건은 불충족!');
	}
} else {
	console.log('첫 번째 조건은 불충족!');
}

중괄호를 쓸 때마다 들여쓰기를 해야하기 때문에 중첩문은 추천하지 않는다.

switch문

조건문에는 if문외에도 switch문이 있다. if문과 switch문은 조건을 충족할 때 실행된다는 공통점도 있지만, 차이점도 있다.

switch (조건식) {
	case 비교조건식:
		동작문;
}

switch문에는 조건식 두 개가 사용된다. switch는 소괄호 조건식의 값이 case의 비교 조건식 값과 일치(===)하면 해당 동작문이 실행된다. 보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다.

let value = 'A';
	switch (value) {
		case 'A':
			console.log('A');
}

if문의 else if처럼 여러 방향으로 분가할 수 있다.

let value = 'A';
	switch (value) {
		case 'A':
			console.log('A');
		case 'B':
			console.log('B');
		case 'C':
			console.log('C');
}

조건이 실행되고 멈추게 하려면, break를 걸어주면 된다.

let value = 'A';
	switch (value) {
		case 'A':
			console.log('A');
			break;
		case 'B':
			console.log('B');
			break;
		case 'C':
			console.log('C');
			break;
}

if문과 switch문을 비교해보자.

let fruit = '사과';

if (fruit === '사과') {
	console.log('사과입니다!');
} else if (fruit === '배') {
	console.log('배입니다!');
} else if (fruit === '포도') {
	console.log('포도입니다!'); 
} else {
	console.log('뭔지 모르겠습니다!');
}

---------------------------------
switch (fruit) {
	default :
		console.log('뭔지 모르겠습니다!');
			break;
	case '사과':
		console.log('사과입니다!');
			break;
	case '배':
		console.log('배입니다!');
			break;
	case '포도':
		console.log('포도입니다!');
			break;
}

조건부 연산자 사용하기(삼항 연산자)

if문과 switch문 외에도 분기 처리에 사용하는 식이 있다 이는 조건부 연산자 또는 삼항 연산자라고 표현한다!

//조건부 연산자의 기본 형식
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

조건부 연산자는 문이 아니라 식이기 때문에 결과 값이 나온다!

다음 코드를 확인해보자!

5 > 0 ? '참입니다' : '거짓입니다';
>"참입니다"

연산자의 우선순위가 조건부 연산자의 우선순위보다 높기 때문에 5 > 0 이 먼저 실행되고 이것이 조건식이 된다. 5 > 0은 true 이므로 ‘참입니다’ 가 결과 값으로 실행된다.

조건부 연산은 보통 조건에 따라 달라지는 값을 변수에 대입하기 위해 사용한다.

let value = 5 < 0 ? '참입니다' : '거짓입니다';
>undefined
value;
>'거짓입니다'

조건부 연산도 if문으로 변경 가능하다

let condition = true;

let value = condition ? '참' : '거짓';
console.log(value);

---------------------
let condition = true;

if (condition) {
	value = '참';
} else {
	value = '거짓';
} 
console.log(value);

코드를 6줄 쓸 것을 한줄로 압축할 수 있기에 조건부 연산자는 수요가 많다.

조건부 연산도 중첩해서 사용할 수 있다. 헷갈릴 수도 있으니 소괄호를 적극적으로 사용하자!

let condition1 = true;
let condition2 = false;

let value = 
condition1 ? (condition2 ? '둘 다 참' : 'condition1만 참') : 'condition1이 거짓';

console.log(value);
>"condition1만 참"

들여쓰기로 구분해도 된다.

let condition1 = true;
let condition2 = false;

let value = condition1 
	? condition2 
	? '둘 다 참' 
	: 'condition1만 참' 
	: 'condition1이 거짓';

첫 번째 조건이 참인경우에 중첩된 조건부 연산에 들어갔지만, 거짓인 경우에 들어갈 수도 있다.

let condition1 = false;
let condition2 = true;

let value = condition1 
	? 'condition1만 참'
	: condition2 
	? 'condition2가 참'
	: '둘 다 거짓';
	
	console.log(value);

*1분 퀴즈

다음 if문을 switch문과 조건부 연산자로 바꿔보자!

let cond = true;
let value = '';

if (cond) {
	value = '참';
} else {
	value = '거짓';
}
-----------------------
//switch문
let cond = true;
let value = '';

switch (cond) {
	case true : 
		console.log('참')
		break;
	case false : 
		console.log('거짓')
		break;
}
------------------------
//삼항연산자
let value = cond ? '참' : '거짓'; 
profile
one part.

0개의 댓글