다시 시작하는 자바스크립트 - Operators(연산자들)(심층)자바스크립트2023. 4. 23. 21:52
Table of Contents
728x90
반응형
헷갈리는 것들만 따로 정리할 예정.
deep dive 책을 함께 공부함.
15. Operators
15-1. 논리연산자(Logical Operator)
- && 그리고
- || 또는
- 단축평가 : short-circuit evaluation
- 단축평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것.
const obj1 = { name: "🐶" };
const obj2 = { name: "🐱", owner: "Seungmin" };
if문 안에서 논리연산자를 사용하면 각각의 조건들이 값으로 평가가 되는데, boolean으로 변환되어 평가되게 됨.
if(obj1 && obj2) {
console.log("둘 다 true!");
}
둘 다 존재하므로 둘 다 true!를 출력함.
let result = obj1 && obj2;
console.log(result);
// { name: '🐱', owner: 'Seungmin' }
// obj1이 true이기 때문에 나머지 obj2는 굳이 true나 false로 평가하지 않아도 됨. 그래서 평가가 단축됨.
// 평가하는 대신에 나머지 값을 할당할 거임.
=> if문에서 쓸 때 :
true인지 false인지 평가를 해야 하기 때문에 모든 값들이 boolean으로 평가가 되어서 true인지 false인지 확인.
=> 조건문 밖에서 쓸 때 :
if문 안이나 boolean 타입으로 평가해야 하는 경우가 아니라, 단순히 변수에 값을 할당하는 경우는 평가가 생략됨.
그래서 평가하는 대신에 나머지 값을 할당할 거임.
result = obj1 || obj2;
console.log(result);
// { name: '🐶' }
// obj1이 true니까 뒤에껀 확인해볼 필요 없이 앞에 obj1을 할당해주는 것.
// 만약 obj1이 false면 뒤에 있는 obj2를 할당해주는 것.
- 활용 예 :
조건이 truthy일 때, && 무언가를 해야 할 경우.
조건이 falshy일 때, || 무언가를 해야 할 경우.
function changeOwner(animal){
if(!animal.owner){
throw new Error("주인이 없어요!");
}
animal.owner = "바뀐 주인!";
}
function makeNewOwner(animal){
if(animal.owner){
throw new Error("주인이 있어요!");
}
animal.owner = "새로운 주인!";
}
obj1.owner && changeOwner(obj1);
obj2.owner && changeOwner(obj2);
console.log(obj1);
// { name: '🐶' }
// obj.owner가 falshy이기 때문에 changeOwner(obj1)가 실행되지 않음.
console.log(obj2);
// { name: '🐱', owner: '바뀐 주인!' }
// obj2.owner가 truthy이기 때문에 changeOwner(obj2)가 실행됨.
--------------------------------------------------------------------------------------------------
obj1.owner || makeNewOwner(obj1);
obj2.owner || makeNewOwner(obj2);
console.log(obj1);
// { name: '🐶', owner: '새로운 주인!' }
// obj.owner가 falshy이기 때문에 뒤에 있는 changeOwner(obj1)를 실행해서 새로운 주인을 만들어줬음.
console.log(obj2);
// { name: '🐱', owner: '바뀐 주인!' }
// obj2.owner가 truthy이기 때문에 뒤에 있는 changeOwner(obj2)가 실행되지 않고 앞에 obj2.owner를 출력함.
우리가 이런 단축평가를 사용하지 않으면 조금 더 코드를 길게 작성해야 함.
if(obj1.owner){
changeOwner(obj1);
}
- null 또는 undefined인 경우를 확인할 때 :
let item;
const price = item.price;
// item은 undefined인데 item의 price에 접근했기 때문에 앱이 종료됨.
const price = item && item.price;
// undefined
// 현재 item이 false이므로 undefined가 할당되어서 나오게 됨.
// 만약 item이 있다면, true이므로 item.price가 할당되어서 나오게 됨.
- 기본값을 설정
function print(message){
// 아무 것도 주어지지 않았을 때 기본값 설정해주기.
// || 값이 falshy한 경우 모두 설정(할당)됨. => 0, -0, null, undefined, ""
const text = message || "Hello";
console.log(text);
}
print();
// Hello
// 기존 : 아무 것도 값을 전달하지 않으면 결과값으로 undefined가 나옴.
// 하지만 이렇게 기본값을 설정해주면 undefined로 인식해서 Hello가 나옴.
print(undefined);
print(null);
print(0);
// undefined, null, 0 어떤 값을 넣어줘도 Hello가 나오게 됨.
// default parameter => 값을 전달하지 않거나, undefined인 경우에만 설정이 가능함.
function print2(message = "Hi"){
// 아무 것도 주어지지 않았을 때 기본값 설정해주기.
console.log(message);
}
print();
// Hi
// 기존 : 아무 것도 값을 전달하지 않으면 결과값으로 undefined가 나옴.
// 하지만 default parameter를 설정해줌으로써 아무 값도 전달하지 않을시 Hi가 출력됨.
print(undefined);
// undefined를 넣어줘도 아무 값도 넣지 않은 것과 동일하게 Hi가 출력됨.
print(null);
// null
print(0);
// 0
15-2. 옵셔널 체이닝 연산자(Optional Chaining Operator)
- ES11 (ECMAScript 2020)
- ?.
- null 또는 undefined인 경우를 확인할 때
let item = { price : 1 };
// const price = item && item.price;
// 이렇게 사용하면 item이 반복되는데, 이걸 옵셔널 체이닝 연산자를 이용해서 한 번으로 줄여줌.
const price = item?.price;
console.log(price);
// item이 있으면 price에 접근하고 없으면 접근하지 말라는(undefined) 의미.
// 1
let obj = { name : "🐶", owner : { name : "승민" } };
function printName(obj){
// const ownerName = obj.owner.name;
// 있는지 확인하지 않고 obj.owner.name을 바로 할당하면 없는 걸 할당하므로 바로 앱이 종료됨.
// 그렇기 때문에 이렇게 논리연산자를 사용해서 나타내야 하는데,
// 이렇게 길게 사용하면 불편하기 때문에 옵셔널 체이닝 연산자를 이용하여 표현하는 게 좋음.
// const ownerName = obj && obj.owner && obj.owner.name;
const ownerName = obj?.owner?.name;
console.log(ownerName);
}
printName();
// undefined
// 아무 것도 값을 넣지 않았으므로 undefined를 출력.
15-3. Nullish Coalescing Operator
- ES11 (ECMAScript 2020)
- ??
- null, undefined일 때만 뒤에껄 표현하고 싶을 때 사용.
||는 falshy한 경우 설정 (할당) => null, undefined, 0, -0, ""
그러므로 ||와 Nillish Coalescing Operator는 엄연히 다름.
let num = 0;
console.log(num || "-1");
// -1
// num이 없을 때만 -1을 출력하고 싶음.
// num에는 현재 유효한 0이 있기 때문에 0을 출력해야 하는데
// 0은 falshy 값이므로 ||를 사용할 경우 -1을 출력함.
console.log(num ?? "-1");
// 0
// nullish를 사용하여 num이 없을 때만 -1을 출력함.
// 0은 유효값이기 때문에 0을 출력하게 됨.
728x90
반응형
'(심층)자바스크립트' 카테고리의 다른 글
다시 시작하는 자바스크립트 - 비동기 (0) | 2023.04.25 |
---|---|
다시 시작하는 자바스크립트 - 주석, 에러처리, 모듈 (0) | 2023.04.24 |
다시 시작하는 자바스크립트 - Symbol (0) | 2023.04.22 |
다시 시작하는 자바스크립트 - Set를 이용한 Quiz (0) | 2023.04.22 |
다시 시작하는 자바스크립트 - Set과 Map (2) | 2023.04.21 |
@min' :: 개발을 하자
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!