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) | 최댓값 반환 |
Frontend Developer