TIL - 2022.10.24

TIL - 학습내용

• 비교 연산자와 논리연산자를 활용하여 if ... else문과 switch ... case 조건문 학습
• javascript에서 falsy로 처리는되는 값들은?
• 문자열 및 문자열 함수 학습
• Math 함수 학습

조건(condition)문

---

비교 연산자

연산자	설명
===	같은 경우 참을 반환
!==	같지 않은 경우 참을 반환
>	왼쪽 값이 오른쪽 값보다 큰경우 참을 반환
>=	왼쪽 값이 오른쪽 값보다 크거나 같은경우 참을 반환
<	왼쪽 값이 오른쪽 값보다 작은 경우 참을 반환
<=	왼쪽 값이 오른쪽 값보다 작거나 같은경우 참을 반환

참고

• undefined의 경우 다른 어떠한 값이랑 비교해도 false를 반환합니다.
• 동등 연산자( == ) 는 피연산자가 undefined나 null일 때 형 변환을 하지 않습니다.
• 동등 연산자( == )은 암묵적 형 변환을 허용하여 혼란을 야기할 수 있기 때문에 일치 연산자( === )을 사용하는 것을 권장합니다

---

삼항 연산자 ‘?’

// 조건문 ? 참일경우 : 겨짓일 경우;
let result = (age > 19) ? "성인" : "미성년자"

코드가 간결해지는 장점도 있지만, 가독성이 떨어지는 결과를 낳을 수도 있으므로 적절한 판단이 필요합니다.

---

논리연산자

연산자	설명
&&	두 조건이 참인 경우 참을 반환
||	두 조건 중 하나만 참이여도 참을 반환
!	조건이 거짓인 경우 참을 반환

---

nullish 병합 연산자 '??'

c = a ?? b

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우 b

참고링크 : https://ko.javascript.info/nullish-coalescing-operator

• 괄호 없이 ??를 ||나 &&와 함께 사용할 수 없습니다.

let errorCase = null || 1 ?? 2  //Uncaught SyntaxError: Unexpected token '??'
let successCase = (null || 1) ?? 2

---

if ... else 문

if (조건1) {
  조건1이 참일 경우 실행될 코드
} else if (조건2) {
  조건2가 참일 경우 실행될 코드
} else {
  모든 조건이 거짓일 경우에 실행될 코드
}

---

switch ... case 문

if 문은 switch 문과 서로 대체가 가능하게 코드를 작성할 수 있습니다.

switch (expression) {
  case value1:
    expression이 value1 일때 실행될 코드 
    [break;]
  case value2:
  case value3:
    value2또는 value3이 경우 실행될 코드
    [break;]
  default:
    모든 조건에 만족하지 않을 때 실핼될 코드
    *default는 생략 가능
}

예제

//example1 여러 조건을 배열로 묶어서 처리
switch (true) {
  case [1, 2, 3].include():
    console.log("3이하입니다.");
    break;
  case [4,5,6].include():
    console.log("4이상 6이하입니다.");
}

//example2
function convertScoreToGrade(score) {
  let result = "";

  switch (true) {
    case score >= 90:
      result = "A";
      break;
    case score >= 80:
      result = "B";
      break;
    case score >= 70:
      result = "C";
      break;
    case score >= 60:
      result = "D";
      break;
    case score >=0:
      result = "F";
      break;
  }
  return result;
}

---

javascript에서 falsy로 처리되는 값들

Boolean( false )
Boolean( null )
Boolean( undefined )
Boolean( 0 )
Boolean( -0 )
Boolean( 0n ) // Bigint
Boolean( NaN ) // Not a Number
Boolean( '' )

https://developer.mozilla.org/en-US/docs/Glossary/Falsy

---

문자열(String)

문자열은 배열과 같이 index로도 접근이 가능하지만 read-only이기 때문에 값을 바꾸는 것은 불가능하다.

let str = "정정수";
console.log(str[0]); // '정'

str[0] = "김";
console.log(str[0]); // '정'
//오류 발생은 없지만, 값이 변경되지 않음

---

문자열 보간법

let lastName = "jung";
let firstName = "jungsu";

console.log(`성은 ${lastName}이고 이름은 ${firstName}입니다`);

---

문자열 병합

문자열과 '+' 연산자를 사용하여 병합 가능하며, 다른 타입과 병합시 string 타입으로 암묵적 형변환이 일어납니다.

let lastName = "jung";
let firstName = "jungsu";
console.log(lastName + firstName); // 'jungjungsu'

console.log(firstName + 1) // 'jungsu1'

---

문자열 함수

문자열 함수들은 호출 후 원본에 영향이 없습니다. (IMMUTABLE)

함수	설명
length	문자열 길이 반환
indexOf(searchValue)	searchValue를 찾아 index를 반환. 없는 경우 -1을 반환
lastIndexOf(searchValue)	searchValue를 문자열 끝에서 부터 찾아 index 반환. 없는 경우 -1을 반환
includes(searchValue)	searchValue를 존재 여부를 true/false 값으로 반환
split(seperator)	seperator 값으로 문자열을 잘라 Array로 반환
slice(startIndex, endIndex)	startIndex부터 endIndex 전 Index까지 잘라 문자열을 반환.
substring(startIndex, endIndex)	startIndex부터 endIndex 전 Index까지 잘라 문자열을 반환. 두 파라미터 중 작은 값이 startIndex로 변환 시켜줌
match(searchValue)	searchValue의 Array를 반환. 없는 경우 null 반환. (정규표현식 사용가능)
replace(regexp | substr, newSubstr | function)	substr을 찾아 newSubstr 대체하여 반환. 정규표현식도 사용가능

---

Math 함수

함수	설명
ceil(number)	소수점 이하 올림
round(number)	소수점 이하 반올림
floor(number)	소수점 이하 내림
min(Array)	최솟값 반환
max(Array)	최댓값 반환