728x90
반응형
SMALL
데이터가 존재하지 않는 경우에 ?. 을 사용하여 뒤쪽 내용을 실행시키지 않고 undefined를 반환시키는 것
// 선택적 체이닝(Optional Chaining)
const user = {}
console.log(user?.name) // user 객체 데이터 내부 name 검색
=> 출력 : undefined
// 선택적 체이닝
const userA ={
name: Yonghak,
age: 23,
address: {
country: 'Korea',
city : 'Seoul',
}
}
const userB = {
name: 'John',
age: 24
}
function getCity(user) {
return user.address.city ( undefined - falsy 데이터) || '주소 없음' (truthy 데이터)
}
console.log(getCity(userA))
console.log(getCity(userB))
여기서, TypeError가 나타나는 표기법인 return user.address.city에서 return user.address?.로 작성하여 뒤쪽 city를 실행하지 않고 undefined를 결과로 반환하도록 함
{콘솔 창}
Seoul
주소 없음
IF 조건문 - 총 3가지 패턴으로 구성
// IF 조건문
if(조건) {
//
}
if(조건) {
//
} else {
//
}
if(조건1) {
//
} else if (조건2) {
//
} else if (조건3) {
//
} else {
//
}
1. 단순 if문
// IF 조건문
function isPositive() {
if (number > 0) {
return "양수";
}
return undefined
}
console.log(isPositive(1));
console.log(isPositive(10));
console.log(isPositive(-2));
// IF 조건문
function isPositive() {
if (number > 0) {
return "양수";
}
}
console.log(isPositive(1));
console.log(isPositive(10));
console.log(isPositive(-2));
위 2가지 형식 모두 동일 return 값이 없으면 undefined를 반환합니다.
2. if , else if , else 문 - 3가지 경우에 따라서 출력하는 형태가 달라짐
// IF 조건문
function isPositive() {
if (number > 0) {
return "양수";
} else if (number <0) {
return '음수'
} else {
return '0'
}
}
console.log(isPositive(1));
console.log(isPositive(10));
console.log(isPositive(-2));
console.log(isPositive(0));
3. Swtich 조건문
// Switch 조건문
switch (조건) {
case 값1:
// 조건이 '값1'일 때 실행
break
case 값2:
// 조건이 '값2'일 때 실행
break
default:
// 조건이 '값1'도 '값2'도 아닐 때 실행
}
`
// Switch 조건문
function price(fruit) {
let p;
switch (fruit) {
case "Apple":
p = 1000;
break;
case "Banana":
p = 1500;
break;
case "Cherry":
p = 2000;
break;
default:
p = 0;
}
return p;
}
console.log(price("Apple"));
console.log(price("Banana"));
console.log(price("Cherry"));
console.log(price("Hello"));
[콘솔 창]
1000
1500
2000
0
return 키워드를 바로 사용하면 굳이 break를 사용하지 않아도 됩니다. return 키워드를 사용하면 함수 밖으로 반환하고 함수를 즉시 종료하기에 나머지 케이스가 실행되지 않고 종료되기 때문입니다.
// Switch 조건문
function price(fruit) {
switch (fruit) {
case "Apple":
return 1000
// break; return 키워드가 바로 값을 반환하기에 필요 없음
case "Banana":
return 1500
case "Cherry":
return 2000
default:
return 0
}
return p;
}
console.log(price("Apple"));
console.log(price("Banana"));
console.log(price("Cherry"));
console.log(price("Hello"));
Switch 조건문을 if 조건문으로 변환한 것
// Switch 조건문
function price(fruit) {
// switch (fruit) {
// case "Apple":
// return 1000
// // break; return 키워드가 바로 값을 반환하기에 필요 없음
// case "Banana":
// return 1500
// case "Cherry":
// return 2000
// default:
// return 0
// }
// }
}
if(fruit === 'Apple') {
return 1000
} else if (fruit === 'Banana') {
return 1500
} else if (fruit === 'Cherry') {
return 2000
} else {
return 0
}
console.log(price("Apple"));
console.log(price("Banana"));
console.log(price("Cherry"));
console.log(price("Hello"));
=> if 조건문 보다는 Switch 조건문이 조금 더 편리합니다.
이때, switch 조건문은 언제나 if 조건문으로 대체가 가능하지만, if 조건문은 switch 조건문으로 상황에 따라서 대체가 불가능할 수 있습니다.
728x90
반응형
LIST
'JavaScript' 카테고리의 다른 글
| JavaScript - While, Do While 반복문 (0) | 2024.07.08 |
|---|---|
| JavaScript - For , For of , For in 반복문 (0) | 2024.07.07 |
| JavaScript - 구조 분해 할당 (0) | 2024.07.07 |
| Javascript - 연산자 종류 및 특징 (1) | 2024.07.03 |
| Javascript - 변수 및 함수의 기초, 배열 (0) | 2024.07.03 |