TIL 04 에서는 조건문에 대해 집중적으로 배우고 정리한다.
boolean 데이터인 비교연산자과 논리연산자를 이용하여 다양한 코드를 만들어보고자 한다. 요즘 날씨가 따뜻해지니 졸립다..🥱 오늘은 커피한잔 땡겨서 집중력 만땅으로 채워서 다시 시작해보자!! ☕️

✏️ 자바스크립트 / TIL 04

• 조건문

1. 조건문이란
2. 비교연산자
3. 논리연산자

📒 조건문

📌01. 조건문이란

조건문 이란?
주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. 여기에서 조건이란, Boolean 데이터를 반환하거나 Boolean 데이터로 해석할 수 있는 표현식을 의미한다.

if 문
키워드 if를 이용해 만드는 구문 'if문'은 가장 일반적인 형태의 조건문이다.
if문의 기본 형태는 다음과 같다.

if(조건){
  //조건이 true일 때 실행할 코드
}

if문 사용 예시

let number = 3
if(number === 3){
  console.log("It is true!")
}
//변수 number의 값이 3과 같다면 콘솔에 "It is true!"를 출력해라 (3과 같지 않을 경우 아무일도 일어나지 않음)

if 문에 else를 추가
if는 조건이 참일 때 할 일을 정의하는 구문을 만든다. 원한다면 사용자는 else를 추가하여 조건이 거짓일 때 의 할일을 추가 정의할 수 있다.

if(조건){
  //조건이 true일 때 실행할 코드
}else{
  //조건이 false일 때 실행할 코드
}
//👉 else를 추가한 if문을 if-else문이라 부르기도 한다!

if-else문 사용 예시

let number = 5
if(number === 3){
  console.log("It is true!")
}else{
  console.log("It is false!")
}
//변수 number의 값이 3과 같다면 콘솔에 "It is true!"를 출력해라.
//그렇지 않을 경우에는 콘솔에 "It is false!"를 출력해라.

if 문에 else if 추가, else 추가
if에서 조건을 물어보고 아니라면 else if로 다른 조건을 제시할수있다.
그 다음 else는 모든 조건이 불일치면 최종적으로 실행되는 문장이다.

if(조건1){
  //조건1 이 만족 시 실행할 코드
}else if(조건2){
  //조건2 이 만족 시 실행할 코드
}else if(조건3){
  //조건3 이 만족 시 실행할 코드
}else{
  //모두 불만족 시 실행할 코드
}
//✧ else if (조건n)은 얼마든지 추가 삽입이 가능하다.

if-else if-else문 사용 예시

let name = Sophie
if(name === 'Sophie'){
  console.log("저는 쏘피 입니다.")
}else if(name === 'Ted'){
  console.log("저는 테드 입니다.")
}else if(name === 'Jessi'){
  console.log("저는 제시 입니다.")
}else{
  console.log("저는 누구일까요?")
}
//변수 name의 값이 'Sophie'과 같다면 콘솔에 "저는 쏘피 입니다."를 출력해라.
//변수 name의 값이 'Ted'과 같다면 콘솔에 "저는 테드 입니다."를 출력해라.
//변수 name의 값이 'Jessi'과 같다면 콘솔에 "저는 제시 입니다."를 출력해라.
//그렇지 않을 경우에는 콘솔에 "저는 누구일까요?"를 출력해라.

📌02. 비교연산자

비교 연산자를 이용하면 대소 및 등가 비교를 수행할 수 있다.
비교 연산식은 언제나 boolean 데이터를 반환한다.
이퀄(=) 하나는 대입 연산자를, 두 개부터는 비교 연산자 역할을 담당한다.
등가 비교에는 추상적 비교==와 엄격한 비교가=== 각각 존재한다.

자세한 내용은 TIL 03 | JavaScript 📌04. 비교연산자 참고하기! _ 비교연산자의 더 자세한 내용 보러가기

📌03. 논리연산자

논리연산자에는 || (OR) , && (AND) , ! (NOT) 이 있다.

• || (OR) : 여러개 중 하나라도 true 면 true이다. 즉, 모든 값이 false 일때만 false를 반환
• && (AND) : 모든 값이 true 면 true이다. 즉, 하나라도 false 면 false를 반환
• ! (NOT) : true 와 false 값을 반대로 바꿔준다. 즉, true 면 false, false 면 true

예시

스티브 잡스는 한국인 이거나 OR, 남자이다 👉 true
스티브 잡스는 한국인 이거나 AND, 남자이다 👉 false

|| (OR) : a || b : A 나 B 중 true 가 있으면 true

let name = "Mike"
let age = 30
if(name === 'Tom' || age > 19){
  console.log('통과')
}
//이름이 Tom이거나, 성인이면 통과
//👉 "통과"

&& (AND) : a && b : A 와 B 둘 다 true 이면 true

let name = "Mike"
let age = 10
if(name === 'Tom' || age > 19){
  console.log('통과')
}else{
  console.log('탈락')
}
//이름이 Mike이고, 성인이면 통과
//👉 "통과"

! (NOT) : !a : A 가 false 이면 true

let age = prompt('나이를 입력해주세요.')
let isAge = age > 19
if(!isAge){
  console.log('탈락')
}
//나이를 입력받아 성인이 아니면 탈락.
//19이하로 입력했을 경우 👉 "탈락"

📌04. Truthy & Falsy

Truthy
자바스크립트에서, truthy인 값(참 같은 값) Boolean(불리언) 문맥에서 true로 평가되는 값이다. falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다.
자바스크립트는 불리언 문맥에서 타입 변환(형 변환)을 사용한다.
다음은 truthy값에 대한 예시이다. 자바스크립트는 Boolean(불리언) 문맥에서 truthy값을 true로 변환하기 때문에 아래의 모든 if 블록을 실행하게 된다.

if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

Falsy
falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다. 다음은 자바스크립트에서의 falsy값 종류를 나타낸 표이다.

✏️ 스터디 정리

boolean 타입과 함께 조건문을 사용하여 코드를 만들어보는 하루였다.
내일은 오늘 TIL까지 얻은 정보를 한번 더 복습하고, 더 많은 함수코드를 직접 만들어보면서 더 익숙해지도록 하는 과정이 필요할 것 같다.