Part 1. JavaScript 기초 Ch 3-1. 기초 제어문(조건문) 입니다.
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
truthy와falsy가 조건문에서 작동하는 방식을 이해할 수 있다.- 비교 연산자를 통한 엄격한 비교(
===,!==)에 대해 이해할 수 있다. if와else if,else를 이해하고 무리 없이 활용할 수 있다.- 논리 연산자를(
&&,||,!...)통해 복잡한 조건을 간결하게 작성할 수 있다. - 복잡한 조건문을 활용하여, 실생활에서 쉽게 마주하는 문제를 개려하기 위한 알고리즘을 구현할 수 있다.
1. 조건문 기초
- 조건문을 배우기 위해서는 Boolean 타입에 대한 이해가 필요합니다.
let isTeacher = true; // 또는 false
let isStudent = false; // 또는 true- 조건문은 어떠한 조건을 판별하는 기준을 만드는 것입니다.
- 조건문에는 반드시 비교 연산자(comparison operator)가 필요합니다.
2. 비교 연산자
- 비교의 결과는 늘 Boolean, 즉 true 혹은 false입니다.
- 자바스크립트의 비교 연산자는 이항 연산자(binary operator)입니다.
- 이항 연산자는 2개의 대상에 대해서만 연산을 수행합니다.
70 < score < 80와 같은 표현은 작동하지 않습니다.- 연산자 우선순위(operator precedence)를 암기해서 사용하기 보다는 괄호를 적절하게 사용하는 것이 더 중요합니다.
| 비교 연산자 | 의미 |
|---|---|
| > | 초과 |
| < | 미만 |
| >= | 이상 |
| <= | 이하 |
| === | 같다 |
| !== | 다르다 |
이때, ==연산자와 !=연산자들은 사용하면 안됩니다.
타입을 엄격하게 비교하지 않기 때문입니다.
1 === 1 // true
1 === '1' // false
1 === true //false
null === undefined //false
1 == '1' // true
1 == true // true
null == undefined //true=== 일치 연산자와 !== 불일치 연산자는 변수의 값뿐만 아니라 변수의 타입까지 비교하지만 == 동등 연산자와!= 부등 연산자는 변수의 값만 비교합니다.
추가적인 내용은 ===과== 비교 사이트를 살펴보시길 권장드립니다.
3. 조건문 사용
조건문에는 Boolean으로 결과가 나오는 표현식이 들어가고 표현식으로는 비교구문이 들어갑니다.
if(조건1){
// 조건1이 통과할 경우
} else if (조건2){
// 조건1이 통과하지 않고
// 조건2가 통과할 경우
} else {
// 모든 조건이 통과하지 않을 경우
}그렇다면 비교구문 작성 시 두 가지 조건이 한번에 적용되는 경우는 어떻게 해야할까요? 바로 논리 연산자(Logical Operator)를 사용합니다.
// AND 연산자
isTeacher && ismale // 선생님이면서 남성일때 통과
// OR 연산자
isTeacher || ismale // 선생님이거나 남성일때 통과
// NOT 연산자
!isTeacher && ismale // 선생님이 아니면서, 남성일때 통과
// truthy, falsy 여부를 반전시킴- 논리 연산자 OR(
||)
OR연산자(||)를 사용했을 경우 두 조건 중 하나라도 truthy한 값일 경우true, 그렇지 않으면false가 출력됩니다.
true || true // true
true || false // true
false || false // false- 논리 연산자 AND(
&&)
AND연산자(&&)를 사용했을 경우 두 조건이 모두 truthy 해야만true, 그렇지 않으면false가 출력됩니다.
true && true // true
true && false // false
false && false // false- 논리 연산자 NOT
NOT연산자는 결과가 true이면false를, false이면true를 반환합니다. 2개 이상을 중첩하는 것도 가능합니다.
!false // true
!!false // false
!(3>2) // false
!undefined // true
//undefined를 false로 취급(falsy)
!'Hello' // false
//'Hello'를 true로 취급(truthy)- 기억해야 할 6가지 falsy 값
- 다음은 if문에서 false로 변환되므로, if구문이 실행되지 않습니다.
if(false)
if(null)
if(undefined)
if(0)
if(NaN)
if('') - 조건문에서 많이 사용하는 개념들
- 짝수(Even number)와 홀수(Odd number)
짝수는 숫자 2로 정확히 나눠지고 그렇지 않은 수는 홀수입니다.
The remainder operator%는 숫자와 함께 사용할때 나머지 숫자를 알려줍니다.
