Javascript &&, || 단락평가 이해하기

노션 정리하면서 옛날에 써놨던거 옮기기... 정리좀해야지...

자바스크립트 &&, || 연산자

자바스크립트의 연산자 중에 &&와 || 연산자가 있다. 어느 프로그래밍 언어에서나 이런 논리연산자가 있지만 자바스크립트는 조금 다르다.

자바스크립트의 &&와 || 연산자는 다른 언어와는 조금 다르다.

나는 자바를 처음부터 배워서 &&(AND) 나 ||(OR) 연산자를 이용해서 개발을 할 때는 먼저 값을 비교할 피연산자들을 설정하고 피연산자들의 값이 boolean 형태의 값이거나 boolean 형태의 값이 나오는 수식이 있어야되고 연산자 자체도 boolean 값을 리턴하게된다.

int money = 2000;
boolean hasCard = true;

if (money>=3000 || hasCard) {
    System.out.println("택시를 타고 가라");
} else {
    System.out.println("걸어가라");
}

//걸어가라!

위의 코드를 보면 money 가 3000보다 크지를 않으니 boolean 형태의 값이 나오는 수식이 false를 반환한 후에 그 전체 결과가 false가 되어서 else문을 타게 된다.

그러나 자바스크립트에서의 &&와 || 연산자는 boolean 값이 아니라 그냥 값 자체를 리턴하게된다.

그리고 자바스크립트에서는 if 문 안에서의 true false 로 구분 하는 것이아니라 0,undefined, null, “”(빈 문자열), NaN를 제외한 나머지는 모두 true 이다. 위의 5개만 false로 인식하게된다. 즉 어떠한 값이 있으면 그건 true 이다.

논리 연산자를 사용할 때는 AND 연산자는 좌측 항이 false 이면 오른쪽 항의 값은 볼 필요도 없이 false 이다.

반대로 OR 연산자는 좌측 항이 true 이면 오른쪽 항의 값은 볼 필요도 없이 true 이다.

• false && (anything)
• true || (anything)

그런데 자바스크립트에서는 true false 가 아닌 값을 리턴하게 된다고 했으므로 아래와 같이 쓸수 있다.

function documentTitle(theTitle)
  theTitle  = theTitle || "Untitled Document";
}
documentTitle("title") // theTitle = "title"
documentTitle()        // theTitle = "Untitled Document";

documentTitle(“title”) 호출 시에는 인자에 “title” 이 존재하므로 변수에 할당된다.

document() 호출 시에는 인자에 아무런 값이 없기에 || 연산자를 통해 오른쪽에 설정해놓은 값으로 할당되게 된다.

논리연산자 AND 예제

a1 = true  && true      // t && t returns true
a2 = true  && false     // t && f returns false
a3 = false && true      // f && t returns false
a4 = false && (3 == 4)  // f && f returns false
a5 = "Cat" && "Dog"     // t && t returns "Dog"
a6 = false && "Cat"     // f && t returns false
a7 = "Cat" && false     // t && f returns false

논리연산자 OR 예제

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = "Cat" || "Dog"      // t || t returns "Cat"
o6 = false || "Cat"      // f || t returns "Cat"
o7 = "Cat" || false      // t || f returns "Cat"

그러나 아래와 같은 경우 생각과는 다른 값이 나올 수 있다.

false && true  || true      // returns true
false && (true || true)     // returns false

위의 두 식은 연산자의 우선순위 때문에 결과 값이 동일하지 않을 수 있다는 것에 주의해야 한다. 자바스크립트의 연산자 우선순위는 ||(OR) 보다 &&(AND)의 우선순위가 더 높다.

결론은 자바스크립트에서의 &&와 || 연산자는

• &&는 왼쪽이 true 이면 오른쪽, false이면 왼쪽을 반환
• ||는 왼쪽이 true 이면 왼쪽, false이면 오른쪽을 반환