[JavaScript] 논리 연산자(&&, ||)를 활용한 간결하고 효율적인 스크립트 작성 TIP

논리 연산자 && 와 ||를 사용한 효율적인 스크립트 작성 TIP

 

예시 1 - ||를 사용한 파라미터의 기본 값 설정

function setName(name) {
    if (!name) {
        name  = "king pork";
    }
    return name;
}

매개변수 name이 false라면 'king pork'라는 문자열로 변경 후 반환하는 함수로

이 함수는 아래와 같이 수정할 수 있습니다.

function setName(name) {
    return name || "king pork";
}

연산자 ||는 먼저 왼쪽의 표현식을 처리하며 매개변수가 truthy라면 오른쪽의 표현식을 처리하지 않고

해당 값을 즉시 반환합니다.

만약 매개변수가 falsy라면 오른쪽의 표현식을 처리합니다.

---

예시 2 - && 활용

function isAnchovy(weight) {
    if (weight && weight < 65) {
        return true;
    } else {
        return false;
    }
}

위의 예시는 조건문의 조건에 따라 true, false를 반환하는 함수로

아래와 같이 수정할 수 있습니다.

function isAnchovy(weight) {
    return weight && weight < 65;
}

&& 연산자는 먼저 왼쪽의 표현식을 처리하며, 값이 truthy라면 오른쪽의 표현식을 처리합니다.

만약 매개변수 weight가 truthy라면 오른쪽 표현식에 따라 weight가 65 미만일 때 true가 반환됩니다.

---

예시 3 - &&와 ||의 조합 활용

if (userId) {
    logIn(userId)
} else {
    signUp();
}

userId가 true라면 userId를 파라미터로 사용하여 logIn함수를 호출하고

userId가 false라면 signUp 함수를 호출하는 로직으로

위의 예시는 다음과 같이 수정할 수 있습니다.

userId && logIn(userId) || signUp();

---

예시 4 - 값 할당 시 활용

const user = {
    name: null
}

user.name = user.name || 'no name';

console.log(user.name); // expected output: no name

 

---

함께 보면 좋은 글

[JavaScript] 참 같은 값과 거짓 같은 값? truthy와 falsy