초등학생도 이해하기 쉬운 자바스크립트 '단축평가'

본격, 자바스크립트 쉽게 설명하며 스스로 이해하기 📝

 

 

👩🏻‍🏫 단축 평가란 무엇일까요?

한 마디로 말하자면, 단축 평가는 두 가지 조건 중 하나만 충족되면 결과를 바로 내놓는 것이랍니다. 아직 이 개념이 잘 와닿지 않을 테니 예시를 통해 설명해 볼게요.

 

 

&& : 초콜릿 먹기 🍫

여러분이 초콜릿이 먹고싶어서 자바스크립트 가게에 방문했어요. 가게에는 '킷캣', '킨더', '하리보' 세 가지 상품이 보여요. 첫 번째로 하리보를 집었는데 바구니가 이렇게 말해요.

 

🛍️: "삐빅, false 입니다! 다시 담아주세요."

 

let 하리보 = false;
let 킨더 = true;

하리보 && 킨더 // false

 

 

왜일까요?

바로 하리보는 초콜릿(true)이 아닌 젤리(false)기 때문이에요. 바구니는 처음부터 false인 하리보가 담겼기 때문에 두 번째로 담은 킨더를 볼 필요도 없이 다시 돌려보낸 것이죠.

 

이번엔 하리보가 아닌 킷캣을 먼저 담아보아요. 초콜릿인 킷캣을 담았으니, 이제는 통과가 되겠죠?

 

let 킷캣 = true;
let 킨더 = true;

킷캣 && 킨더 // true

 

🛍️: "딩동댕! true 입니다. 잘 담으셨어요."

 

오, 통과 되었어요 🎉

여러분도 잘 알다시피 킷캣은 초콜릿(true)이고, 킨더 또한 초콜릿(true)이기 때문에 바구니가 true라고 이야기한 것이죠. 

 

그러자, 호기심이 생긴 여러분은 이번엔 하리보를 두 번째로 담아보기로 해요.

 

let 킨더 = true;
let 하리보 = false;

킨더 && 하리보 // false

 

🛍️: "삐빅, false 입니다! 다시 담아주세요."

 

아앗, 역시나 이번에도 false예요. 당연하죠?

첫 번째에 초콜릿(true)인 킨더를 담았어도, 두 번째에 젤리(false)인 하리보를 담았으니 바구니는 당연히 false라고 한 것이죠.

 

정리하자면, 논리곱 연산자 && 는 첫 번째와 두 번째 모두 true여야 true를 반환해요. 첫 번째 피연산자(연산을 당하는 것)가 true여도, 표현식 전체를 평가할 수 없으니 두 번째 피연산자까지 평가해 보아야 표현식을 평가할 수 있어요.

즉, 두 번째 피연산자가 논리곱 연산자 && 표현식의 평가 결과를 결정하는 것이죠.

 

이렇게, 단축 평가는 필요한 만큼만 조건을 검사하고 빨리 결과를 내는 것이랍니다.

 

 

|| : 두부와 콩나물 심부름 🛒

엄마가 여러분에게 두부와 콩나물 심부름을 시키셨는데, 이때 두부와 콩나물 둘 다 사거나, 아니면 둘 중 하나는 꼭 사 와야 한다고 요청하셨어요. 둘 다 없으면 여러분은 저녁을 굶어야 해요..

 

자, 이번에도 자바스크립트 가게에 갑니다.

 

오, 다행히 두부(true)와 콩나물(true)이 보여요! 그러니 둘 다 샀어요.

오늘은 저녁을 먹을 수 있어요! → true 😋

 

let 두부 = true;
let 콩나물 = true;

두부 || 콩나물 // true

 

다음날, 또 가게에 갔어요. 음 그런데 콩나물(false)은 없네요?

하지만 엄마가 둘 중 하나만 사와도 된다고 하셨으니 두부(true)만 담아요.

오늘은 저녁을 먹을 수 있어요! → true 😋

 

let 두부 = true;
let 콩나물 = false;

두부 || 콩나물 // true

 

다다음날, 또 가게에 갔어요. 음 그런데 이번엔 두부(false)가 없네요?

하지만 엄마가 둘 중 하나만 사와도 된다고 하셨으니 콩나물(true)만 담아요.

오늘은 저녁을 먹을 수 있어요! → true 😋

 

let 두부 = false;
let 콩나물 = true;

두부 || 콩나물 // true

 

다다다음날, 또 가게에 갔어요. 세상에, 오늘은 두부(false)와 콩나물(false) 모두 다 팔렸어요.

하지만 엄마가 둘 중 하나는 꼭 사 와야 한다고 하셨으니 빈 바구니를 들고 집에 가요.

오늘은 저녁을 먹을 수 없어요..... → false 😞

 

let 두부 = false;
let 콩나물 = false;

두부 || 콩나물 // false

 

정리하자면, 논리합 연산자 || 는 첫 번째와 두 번째 둘 중 하나만 true여도 true를 반환해요. 첫 번째 피연산자(연산을 당하는 것)가 true면, 두 번째 피연산자까지 굳이 평가해 보지 않아도 표현식을 평가해 볼 수 있어요.

즉, 논리 연산의 결과를 결정한 첫 번째 피연산자가 논리합 연산자 || 표현식의 평가 결과를 결정하는 것이죠.

 

어? 😮

그런데 첫 번째 피연산자 두부가 false고, 두 번째 피연산자 콩나물이 true인데 왜 false가 아닌 true가 나오는 걸까요?

 

let 두부 = false;
let 콩나물 = true;

두부 || 콩나물 // true

 

위에 밑줄 친 부분처럼 논리합 연산자 || 에서는 '논리 연산의 결과를 결정한' 첫 번째 피연산자가 표현식의 평가 결과를 결정하기 때문이에요. 단지 그냥 첫 번째 피연산자가 아니라 '논리 연산의 결과를 결정한' 피연산자요. 이 말을 풀어서 이야기해볼게요.

 

아까 엄마가 두부와 콩나물 '둘 중 하나'만 사 오라고 하셨죠? 그렇다면 둘 중 '하나라도 있다'는 평가 결과가 있어야 하잖아요. 그런데 첫 번째 두부가 없다고(false) 바로 오늘 저녁은 먹지 못한다는(false) 결과를 바로 낼 수 있는 것일까요?

 

아니죠. 🙅🏻‍♀️

두부는 없지만(false), 콩나물이라도 있으면(true) 오늘 저녁은 먹을 수 있는 거죠(true)

 

마지막으로, 아래의 예시를 보면 더 이해가 잘 될 거예요.

 

let 두부 = false;
let 콩나물 = true;

false || false || 콩나물 || false // true

 

계속 없는 두부만 보다가 (false, false..) 콩나물을 찾았어요(true) 그렇다고 오늘 저녁을 못 먹는 건 아니죠?

 

네, true입니다. 🙆🏻‍♀️

계속 두부를 찾지 못해도(false) 어쨌든 콩나물을 찾았으니(true), 오늘 저녁을 먹을 수 있어요(true) 😋

 

 

📚 오늘 배운 내용을 정리해 볼까요?

논리곱 연산자(&&)와, 논리합 연산자(||)는 논리 연산의 결과를 결정하는 피연산자를 다른 것으로 바꾸지 않고 그대로 반환하는데, 이것을 단축 평가라고 해요.

 

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우, 나머지 평가 과정을 생략하는 것을 말한답니다. 대부분의 프로그래밍 언어는 이처럼 단축 평가를 통해 논리 연산을 수행하고는 해요.

 

오늘 수업 어땠나요? 재밌었다고요?

그럼 다음 시간에는 더 재밌고 쉬운 자바스크립트 개념을 가지고 올게요.

모두 안녕 ~ 👋

 

 

📎 References

- 책 <모던 자바스크립트 Deep Dive>