멋쟁이 사자처럼 FE 2기 - 27

임홍렬·2022년 5월 9일
0
post-thumbnail

220509


JavaScript 조건문과 반복문


조건문

주어진 조건에 따라 코드들의 실행이 결정되는 문(statement)이다.

if문

조건식이 참이라고 평가가 되면 중괄호 안의 코드들이 실행한다.
if (조건식) {
		// 조건식이 참일 경우 실행될 코드
}

if ... else문

하나의 조건이 아닌 여러개의 조건을 평가해야 하는 상황에서 활용한다.
앞서 나온 조건들이 모두 거짓일 경우 무조건 실행될 코드이다.
if (조건식1) {
		// 조건식1이 참(true)일 경우 실행될 코드
} else if (조건식2) {
		// 조건식1이 거짓(false)이고 조건식2가 참(true)일 경우 실행될 코드
} else {
		// 조건식1, 2 모두 거짓일 경우 실행될 코드
}

상황에따라 조건식을 추가하고 싶을때 여러번 작성해도 된다.

if (조건식1) {
		// 조건식1이 참(true)일 경우 실행될 코드
} else if (조건식2) {
		// 조건식1이 거짓(false)이고 조건식2가 참(true)일 경우 실행될 코드
} else {
		// 조건식1, 2 모두 거짓일 경우 실행될 코드
}
if문은 참(true)인 조건식을 만나게 되면 코드블록을 실행하고 해당 조건문을 빠져나오게 된다.
if문의 특징은 참(true)인 조건식이나 else문을 만나기 전까지는 조건문을 빠져나오지 않는다는 것이다.
if (true) {
		console.log('조건문을 빠져나갈거에요!');
} else if (조건식) {
		/*
		...10,000줄의 코드...
		*/
} else {
		// 위의 조건식들이 모두 거짓일 경우 실행될 코드
}

if문 중첩

 동시에 만족해야할 조건이 여러개라면 우리는 if문을 중첩해서 쓸 수 있다.

function coffePrice(price) {
		if (typeof price === 'number') { // 타입이 숫자형이면서,
				if (price > 6000) { // 그 값의 크기가 작성한 조건을 만족해야 한다.
						console.log('커피가 너무 비싸요!');
				} else if (price < 3000) {
						console.log('맨날 먹어도 되겠네요!');
				} else {
						console.log('적당한 가격대입니다.');
				}
		} else { // 입력값이 숫자가 아닌 모든 경우에는 숫자로 입력하라는 문구를 출력한다.
				console.log('가격을 숫자로 입력해주세요!');
		}
}

switch문

 표현식의 값에 따라 일치하는 경우를 찾아가서 코드를 실행시키는 조건문이다.
 switch문은 참이냐 거짓이냐를 판별하는 상황보다는 다양한 값을 받아오는 상황에서 코드 실행을 결정할 때 사용한다.
 - switch 뒤에 오는 표현식들의 값에 따라 실행시킬 코드가 있는 곳으로 실행을 옮겨간다.
- 코드실행을 한 뒤, break에 의해서 조건문을 빠져나오게 된다.
- 표현식이 case와 일치하는 경우가 없다면 default 문으로 이동하게 된다.
- default 문은 선택사항이다.
switch (값) {
		case 값1 : 
				// 실행시킬 코드
				break;
		case 값2 : 
				// 실행시킬 코드
				break;
		case 값3 : 
				// 실행시킬 코드
				break;
		case 값4 : 
				// 실행시킬 코드
				break;
		default :
				// 일치하는 경우가 없을 때 실행시킬 코드
				break;
};
let price = 0;
let menu = '카페라떼'; // 메뉴를 바꿔가면서 콘솔창에 입력해보자.

switch (menu) {
		case '아메리카노':
				price = 4000;
		    break;
	  case '카페라떼':
				price = 5000;
				break;
		case '바닐라라떼':
				price = 6000;
		    break;
	  case '콜드브루':
				price = 5500;
				break;
		case '딸기라떼':
				price = 7000;
		    break;
	  case '레몬에이드':
				price = 6500;
				break;
		case '에스프레소':
				price = 3500;
		    break;
	  case '루이보스':
				price = 4500;
				break;
		default:
				console.log('메뉴를 정확히 입력하세요.');
}

break

break가 없다면 switch문을 탈출하지 않고 모든 코드들을 실행시킨다
// true를 찾아가긴 하지만, 이와 같은 경우엔 if문을 활용하는 것이 좋다.
switch (true) {
		case true: 
				console.log('swithch true!');
				break;
		case false: 
				console.log('swithch false!');
				break;
};

논리연산자

논리 연산자의 사용은 반복된 if문 작성이나 if문의 중첩을 줄일 수 있다.
  • and (&&)

    1부터 평가를 시작해서(왼쪽부터) 첫 번째 falsy 값을 찾아간다.

console.log(1 && 2 && 3); // 3
let price = 7000;

if (typeof price === 'number' && price>6000) { // true && true == 두번째 true
		console.log('커피가 너무 비싸요!');
}

and 연산자를 이용해 if문의 중첩을 한번 줄여서 작성할 수 있다.

  • or(||)

    1부터 평가를 시작해서(왼쪽부터) 첫 번째 truthy 값을 찾아간다.

console.log(1 || 2 || 3); // 1
// 성적이 90이상이거나 수상경력이 있다면 합격문구를 출력하는 조건문을 작성해보자
const user = {
		score : 70,
		award : 'weniv FE스쿨 우수'
}

if (user.score > 90) { console.log('합격입니다!'); };
if (user.award) { console.log('합격입니다!'); };

// 위와 아래코드는 동일하다. 

if (user.score >90 || user.award) { 
		// false || 'weniv FE스쿨 우수' == 'weniv FE스쿨 우수'
		console.log('합격입니다!'); 
};

or 연산자를 이용해 if문의 반복을 한번 줄여서 작성할 수 있다.

  • not(!)

    		부정 연산자는 불리언(boolean) 값을 반환한다. 
console.log(!'string'); //false
console.log(!1); //false
console.log(!true); //false

console.log(!0); //true
console.log(!''); //true
console.log(!undefined); //true
console.log(!null); //true
console.log(!NaN); //true
console.log(!false); //true

  • 💡 1. and(&&), or(||) 연산자의 결과값은 boolean이 아니다.

    1. 부정 연산자(!)의 결과값은 boolean이다.
    1. and(&&) ⇒ if문의 중첩을 줄일 수 있다.
    1. or(||) ⇒ if문의 반복을 줄일 수 있다.
profile
뜨내기 FE 개발자

0개의 댓글