[JS] 삼항연산자 & 단락회로평가

Minyoung's Conference·2022년 6월 13일
0

JavaScript

목록 보기
11/28
post-thumbnail
  1. 삼항연산자

아래 코드를 한 번 보자.

if문을 이용해 true 값을 출력하고 있다.

너무 길다...!

삼항연산자를 이용해서 짧게 써보자 :)

조건문을 파격적으로 줄여주었다.

조건식 ? true일 때 출력값 : false일 때 출력값

배열을 이용해 조건문을 다시 한 번 만들어보자.
삼항연산자 없이 길 게 쓴다면 아래와 같다.

이번엔 삼항연산자로 짧게 써보자.

이번엔 값을 참일 때와 거짓일 때를 나눠서 출력해보자.

Console처럼 출력하는 게 아니라 값을 넣는 경우, 그 값을 대입연산자와 연결시켜 저장해주어야 한다.

삼항연산자도 조건식을 쓰기 때문에 truthy 와 falsy를 이용해 스마트하게 만들어 낼 수 있다.

a가 undefined이기 때문에 자연스럽게 false값이 나온다.


a가 빈 배열이기에 true의 값이 다시 나온다.

이제 학습을 했으니, 실습을 해보자.
// Todo : 학점 계산 프로그램 // 90점 이상 A+ // 50점 이상 B+ // 둘다 아니면 F
위 조건을 만족하는 학점 계산 프로그램을 만들어보자.

bPlus라는 삼항연산자를 aPlus 삼항연산자에 바로 대입해보자.

문제없이 정상 동작하는 것을 알 수 있다.
하지만, 삼항연산자가 중첩되는 경우 가독성이 떨어진다.
그런 경우는 가독성이 좋은 if조건문을 사용하는 것이 더 낫다.

  1. 단락회로평가

연산자의 연산 순서를 이용하는 문법이다.
피연산자들 중에 뒤에 위치한 피연산자를 확인할 필요없이 연산을 끝내버리는 것, 식의 결과가 결정되는 것을 단락회로평가라고 한다.

예시로 확인해보자.

// console.log(false && true);
false와 true 중 하나만 false라도 값은 false이다.
&&연산자는 단락회로평가이다.
console.log(true || false)
앞의 값이 true이면 뒤에 어떤 게 와도 true이다.
||연산자도 단락회로평가이다.

그렇다고, 단락회로평가는 그저 빨리 결과를 추출하는 역할만 하는 게 아니다.
truthy와 falsy에서도 사용하게 된다.

함수를 이용해서 단락회로평가를 써보자.

위 코드는 if문을 사용해 나타냈다. 여기에 단락회로평가를 쓰면 더 짧아질 수 있다.

person과 person.name을 받고 있다. 여기서 person은 이미 undefined이기 때문에 false이다. 그러면 false와 &&의 조합이므로 단락회로평가로 인해 뒤의 값을 고려하지 않아도 되며, 현재 person의 값으로 결정이 된다.
let person; -> undefined, let person = null; -> null
그렇다면 그 값을 그대로 반환하지 않고 원하는 값을 반환해보자.

person이 객체가 아닐 때(false일 때) getName은 name이 아니라 "객체가 아닙니다."라는 문자열을 반환하고 person이 객체일 경우, getName은 name을 반환하게 된다. (name의 값은 "민영")

과정을 좀 더 디테일하게 살펴보자.
undefined의 경우, falsy하기 때문에 && 뒤의 값을 신경쓰지 않아도 되지만, 객체 즉, truthy의 경우 && 뒤의 값을 함께 반환해야 한다. 그래서 person.name이 반환되는 것이다. 그리고 return 뒤의 name 또한 truthy 하기 때문에 ||(OR)의 경우 앞의 값이 truthy하면 뒤의 값에 상관없이 결과가 바로 반환된다. (name이 반환됨.)

그렇다면 person에 falsy한 값인 null을 전달해보자.
person이 falsy한 값이기 때문에, &&연산은 무조건 falsy가 된다.
그래서 person의 값을 그대로 반환한다. (name은 null이 된다.)

name의 값이 falsy(=null)하기 때문에, ||(OR) 연산에서는 뒤에까지 확인을 해야한다. 뒤에 값("객체가 아닙니다")이 truthy가 되기에 뒤에 값이 반환된다.

profile
안녕하세요, FE 개발자 김민영입니다.

0개의 댓글