[자바스크립트 기초] " || && 는 어떤 기능을 할까 ?" (short Circuiting)

자바스크립트를 공부하다보면 종종 아래와 같은 녀석을 만나게 됩니다. 

 

위에 조건문과, &&를 이용해 길게 늘어놓은 거랑 같다고 하는데 잘 이해가 가질않습니다.

이를 이해하기 위해선 short circuiting , 한국어로는 단축 평가라는 문법을 이해하셔야 합니다. 

 

 

&& (AND 연산자)

&&는 and 연산자를  의미합니다. 

 

general한 개념 설명보다는 먼저 코드를 통해 결과를 확인 해보겠습니다.

 

이 두개 코드의 출력 값은 무엇일까요?

output : 

 

왜 이런 결과가 나오는 것일까요...?

 

 

 

먼저 첫번째 코드부터 볼게요.

 

좌측부터 우측으로 하나씩 진행 됩니다.

 

먼저 0을 만납니다. 0은 falsy한 값이죠? 바로 0을 return 합니다. 왜falsy하다고 그냥 리턴을 해버릴까요?

and 연산자는 단 하나만 falsy한 값이 있으면 나머지가 다 truthy 해도 false하다라고 말하는 완벽주의자 같은 녀석이죠..

 

즉 첫번째 0, 즉 falsy한 값을 만났으니 뒤는 볼 필요도 없어! 라는 의미로 해당 값을 리턴해버리는것이지요.

 

 

 

아직까지는 잘 와닿지 않으실테니 그다음 코드를 보죠!

먼저 7을 만납니다. 7은 truthy 하죠. 앞서 and 연산자의 특징이 뭐라고했죠? 모든 값이 truthy 해야 합니다. 즉 and연산자는 혹시나 모를 falsy 한 녀석이 있는지 찾으러 다음칸으로 갑니다..

 

다음 친구는 'Jonas'입니다. 이번에도 truthy 합니다. 뒤에 falsy한 값이 있나 찾고 싶어도 이 값이 마지막이기 때문에 'Jonas'를 리턴합니다. 

 

 

 

이해를 돕기 위해  예시 하나를 더보겠습니다.

output : 

 

먼저 'Hello'를 만납니다. truthy한 녀석이죠, and 연산자는 falsy한 녀석을 찾기위해 다음칸으로 이동합니다.

두번째는 23 입니다. 이 친구 역시 truthy 하죠, and 연산자는 falsy한 녀석이 혹시라도 있는지 확인하기 위해 다음 칸으로 이동합니다.

세번째는 null 입니다. 드디어 falsy한 값을 찾았고 해당 null 값을 리턴합니다. 

 

 

이제 처음 제가 보여준 if문이 이해가 가시나요?

restaurant.length 가 참이면 console.log()를 찍는 조건문인데요.

 

앞서 우리가 &&연산자는 참이나오면 다음칸으로 가능 특징이 있었죠?(혹시라도 있을 falsy 녀석을 잡기위해서요!)

즉, restaurant.length 갯수가 1개 이상이면 true 일것이고, 당연히 다음 코드가 실행이 되겠죠:)

 

 

  || (OR 연산자)

앞서 AND 연산자를 이해하셨다면 OR은 정반대이기 때문에 이해 하기 쉬우실겁니다. 

 

AND 연산자가 falsy한 값을 찾기 위해 노력하는 친구였다면 OR 연산자는 truthy한 값을 찾기 위해 노력하는 친구입니다.

왜냐하면 OR 은 다 falsy여도 하나의 값만 truthy하면 true를 리턴하는 특징이 있기 때문이죠...

 

예시를 코드와 output통해 작동방식을 유추해보겠습니다.

output : 

 

 

첫번째 예시부터 보죠.

3을 만납니다. truthy한 값이죠? or 연산자는 truthy한 값을 만나면 뒤에건 볼것도 없이 해당 값을 반환해버립니다.

(or 연산자의 특징은 하나만 truthy한 값을 만나면 true 이기 때문에, 뒤에것을 볼필요가 없기 때문입니다.)

 

두번째 예시입니다. 

먼저 '' 빈 값을 만납니다. 이값을 falsy하죠, or 연산자는 혹시나 있을 truthy 값을 찾기 위해 여행을 나섭니다.

두번째 'Jonas'를 만납니다. truthy한 값이죠? , or 연산자는 이 값을 return 합니다. 

 

 

세번째 예시입니다. 

먼저 true 값을 만납니다. truthy 한 값이죠? 볼 필요도 없이 해당 값을 반환하고 연산을 멈춥니다. 

 

 

네번째 예시입니다. 

먼저 undefined 를 만납니다. falsy한 값입니다. 혹시나 있을 truthy한 값을 찾기 위해 여행을 나섭니다. 

두번째 null도 falsy한 값입니다. 혹시나 있을 truthy한 값을 찾고 싶지만 이게 마지막 값이네요. 결국 해당 값을 return 합니다. 

 

 

마지막 예시입니다.  해당 코드의 output은 뭐가 나올까요?

먼저 'Hello'를 만납니다. 엇? 바로 truthy 한 값을 만났네요 'Hello'를 리턴합니다. 

 

 정리

AND 연산자는 하나라도 falsy한 녀석이 있으면 true라는 영광을 얻을 수 없으니 falsy한 값을 잡아내기 위해 혈안이 되어있는 녀석이고,

 

OR 연산자는 하나라도 Truthy 한 녀석만!있으면 true라는 영광을 얻을 수 있으니 truthy 한 값을 잡아내기 위해 혈안이 되어 있는 녀석이라 정리하면 암기 하기 쉬우실겁니다.