[JavaScript] 유용한 연산자들

로지컬 연산자

조건문 안에서 모든 것들은 불리언으로 평가되지만, 조건문 밖에서는 단축 평가가 이루어집니다.
이러한 단축 평가를 이용시 더 깔끔하게 로직을 처리할 수 있습니다

단축 평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것.

obj1 = {
  name: "Han",
  emoji: "💩",
};
obj2 = {
  name: "Kim",
  emoji: "👿",
  owner: "Han",
};
// 조건문 안에서 모든 것들은 불리언으로 평가됨
if(obj1 && obj2){
	console.log("둘다 True")
}
// 조건문 밖에서 사용시 단축평가가 이루어짐
let result = obj1 && obj2 
console.log(result) // obj2

사용예시

조건이 Truthy할 때, 뒤에 무언가를 해야 할 때 (&&)

const changeName = (animal) => {
  animal.name = "강아지",
  console.log(animal);
};

obj2.name && changeOwner(obj2) // ob2.name이 존재해야 이름을 수정할 수있습니다.

조건이 falshy할 때, 뒤에 무언가를 해야 할 경우(||)

const makeNewName = (animal) => {
  animal.name = "고양이",
  console.log(animal);
};

obj2.name || makeNewName(obj2) // obj2.name이 존재하지 않으면 새로운 이름을 생성해줬습니다.

Null 또는 Undefined인 경우를 확인할 때

let item = {price : 1};
const price = item && item.price; // item이 있어야만 item.price 속성에 접근할 수 있습니다.
console.log(price); // 1

매개변수의 기본 값 설정

const print = (message) => {
  const text = message || "Hello";
  console.log(text);
};
print();

그런데 우리가 파라미터의 기본 값을 설정하는 defualt parameter라는 개념을 배우셨을 거에요!
둘은 어떤 점이 다를까요?

const print = (message = "Hello") => {
  console.log(message);
}
print(null);

default parameter는 값이 전달되지 않거나 undefined의 경우에만 값을 기본 값으로 할당해줍니다!
null을 매개변수로 넣어주면, 기본 값을 할당해주지 않아요!

단축평가를 이용하면, 매개변수가 falshy한 값인 경우, 우리가 기본 값으로 설정한 값을 할당해줍니다.

다만 0이나 문자열 ""의 경우 falshy한 값으로 받기 때문에 매개변수로 이용하지 못한다는 단점이 있어요!


이를 해결하기 위해 nullish Operator라는 연산자가 나왔습니다!

단축평가의 불편함 해결 : Nullish Operator

const print = (message) => {
  const text = message ?? "Hello";
  console.log(text);
};
print();

이제 message가 null이거나 undefined일 경우에만 "Hello"를 할당해줄거에요.
매개변수의 기본 값을 할당하는 데 가장 좋은 방식이라 할 수 있어요!

단축평가의 불편함 해결 : Optional Chaining

const item = { name: "💩", owner: { name: "Han" } };
function printName(obj) {
  const ownerName = obj && obj.owner && obj.owner.name;
  const ownerName = obj?.owner?.name;
  console.log(ownerName);
}
printName(item);

함수안에서 obj라는 객체를 받고, owner의 name을 출력하는 함수입니다.
객체의 프로퍼티에 접근할 때는 null인 값에 프로퍼티를 접근하면 오류가 발생하기 때문에,
단축평가를 통해 조심스럽게 접근하는 것을 볼 수 있네요!

그러나, 객체의 깊이가 깊어질 수록 접근을 위해 앞의 프로퍼티를 써주는 것이 번거로워 보입니다!
이를 해결할 수 있는게 Optional Chaning이에요.

const item = { name: "💩", owner: { name: "Han" } };
function printName(obj) {
  const ownerName = obj?.owner?.name;
  console.log(ownerName);
}
printName(item);

?.를 통해 단축평가보다 더 간편한 방식으로 null을 체크하고 있습니다.