조건문(if)

체크포인트

• 조건문에서 truthy 와 falsy 의 작동방식 이해
• 엄격한 비교에 대한 이해( === , !==)
• if, else if, else 를 활용하기
• 논리연산자를 통한 복잡한 조건 작성하기

조건문

• 조건문은 참과 거짓을 출력하기 위해 어떤 값이 참인지를 비교하기 위한 기준점이다.
• 불리언 값이 생성되려면 반드시 비교연산자가 필요하다.
• 조건문의 비교결과는 반드시 boolean 값이며, true / false 를 반환한다.

비교연산자

• 두 항을 비교하는 연산자이며 초과와 미만, 이상과 이하, 같거나 다름을 비교한다.

<   // 초과
>   // 미만

<=  // 이상
>=  // 이하

=== // 같음(엄격)
!== // 다름(엄격)

• 위의 비교연산자들은 각 항을 비교하여 참과 거짓을 결정한다.
• 다만, 같음 === 을 나타낼 때는 조금 다른데, 이는 일치연산자로 불리며 비교대상으로 각 항이 가진 데이터 타입까지 비교하게된다.

=== 와 == 의 차이

• 일치연산자는 위에서 작성한 것과 같이 데이터의 타입까지 비교하는 것에 비해, == 즉, 동등연산자 는 데이터타입을 비교하지 않고 boolean 값을 반환한다.
• 여기서 생기는 문제점은 1 == '1' 로 비교하는 경우, 일치연산자는 false 를, 동등연산자는 true 로 서로 다른 값을 반환한다.
• 이 뿐만 아니라, null == undefined 가 true 로 취급이 되는 등 예외케이스 들이 너모 많다링.
• 그러므로 같음을 비교하여 boolean 을 얻으려는 경우 일치연산자를 사용하는 것이 훨씬 권장된다.
• 위의 내용은 불일치연산자 !== 와 부등연산자 != 에도 비슷하게 적용된다.
  (서로 달라야 true!)

조건문

• 조건을 만족하는 경우 원하는 내용을 출력하기 위해 사용하며, if, else if, else 세가지의 키워드로 사용한다.
• if 는 가장 기본이 되는 조건이며, if (조건식) {내용} 으로 작성한다.
• else if 는 if 의 작성과 같이 else if (조건식) {내용} 으로 작성한다.
  → if 와 else if 의 뒤에는 boolean 값을 비교하기 위한 조건식이 들어간다.
• if 뒤에 작성한 조건식이 true인 경우 if 안의 내용을 출력하고, false 인 경우에는 else if 의 조건식과 비교하여 else if 의 내용을 출력하거나, 일치하는 조건이 존재하는 조건문 안에 없는 경우 else 의 내용을 출력한다.

const a = 'd'

if (a === 'a') {               // false
	console.log('this is a')
} else if ( a === 'd'){        // true
	console.log('this is d')
} else {
	console.log('this is not a and d')
}

// else if의 조건식이 true 가 되므로 콘솔에 'this is d' 가 출력된다.

• if → 만약 이거면 이거 해줘
• else if → 그거 말고 이거면 이거 해줘
• else → 다 아니면 이거 해줘

논리연산자

&& (AND 연산자)

• 각 항의 내용이 전부 true 일 경우 true 를 출력하며, 이 때 하나라도 false 가 존재 한다면 그 결과는 false가 된다.
• 비교하고자 하는 항의 수는 원하는 만큼 사용 가능하다.

a = 1 === 1
b = 'a' === 'a'
c = true
d = false

a && b && c // true
a && b && d // false

• 모든 항의 boolean 값이 true 일 때 true 를 출력하고, 비교되는 항의 값 중 false 가 포함된 경우 true 가 몇개 존재하던 false 를 출력한다.

|| (OR 연산자)

• 각 항의 내용 중 true 값이 하나 이상 포함된 경우 true 를 출력한다.
• 해당 연산자가 false 를 출력하기 위해서는 모든 항이 false 값을 가져야한다.

a = true
b = false
c = false
d = false 

a || b || c // true -> a의 값이 true 이므로
b || c || d // false 

• AND 연산자와의 비교
• AND 연산자 → 각 항에 하나라도 false 가 들어있다면 false, 모두 true 일 경우 true 반환
• OR 연산자 → 각 항에 하나라도 true 가 들어있다면 true, 모두 false 일 경우 false 반환

! (NOT 연산자)

• !변수이름 으로 사용하며 해당 변수가 true 인 경우 false 를 반환하고, false 인 경우 true 를 반환한다.

a = true
b = false

!a // false
!b // true

• 해당 변수가 가진 boolean 값의 반댓값을 반환한다.

truthy 와 falsy

• boolean 데이터가 아닌 데이터가 조건문에 조건으로 들어가는 경우 true와 false 로 변환이 되는데, 이때 true 로 취급되는 값을 truthy 한 값, false 로 취급되는 값을 falsy 한 값이라고 이야기한다.

// Falsy
false
undefined
null
NaN // Not a Number, 숫자가 아닌 값을 나타낸다.
0
' ' // 공백문자열

• 두 값을 전부 외울 필요는 없고, falsy 한 값이 압도적으로 적으니 falsy 한 값이 무엇인지 숙지하면 된다.
• 위 값을 제외한 다른 데이터들은 truthy 한 값이라고 생각하면 된다.