[Javascript] 단축평가

📌단축평가란 무엇일까?

논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것

이라고는 하는데, 사실 잘 와닿지 않는다.

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

책에서 이렇게도 설명하는데, 사실 이것도 이해하기엔 어려움이 있다.

 

 

🔀 논리합 연산자(||)

논리합 연산자를 이용해 단축평가를 이해해보자.

true || true

해당 연산은 결과가 당연히 true이다.

논리합 연산자(||)는 비교하는 대상(피연산자) 중 하나만 true여도 true를 반환하기 때문이다.

 

그러면 이번엔 결과가 어떻게 될까?

true || false

얘도 당연히 둘 중에 하나가 true이므로 true를 반환할 것이다.

여기서 js는 처음에 true만을 확인하고도 결과가 true임을 판단할 수 있다(한 개만 true여도 되니까)

 

그럼 둘이 순서가 다르면?

false || true

이때도 결과 값은 true이지만, 위와 다른 점은

js가 처음 false가 아닌 두번째 true까지 확인해야 true임을 판단할 수 있다.

 

여기서 단축 평가의 두번째 정의 였던 

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

 

를 다시 생각해 볼 수 있다.

 

 

아까 true와 false를 비교하던 예시에서 결과가 확정되는 시기가 다르다.

// 처음 나오는 true에서 결과가 판단됨
true || false

// 두번째에 나오는 true에서 결과가 판단됨 
false || true

이 예시에서는 둘 다 최종 결과가 true에서 크게 달라보이지 않는다.

 

그렇지만 단순한 true나 false가 아니라면? 

'햄스터' || '강아지'

이 경우에 문자열은 Truthy값이므로 true로 평가된다.

즉 둘다 true이므로, 평가는 처음 나오는 '햄스터'에서 이미 결과가 끝나는 것이다.

여기서 단축 평가는 

논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것

이라고 했으므로, 타입 변환하지 않고 그대로 '햄스터'를 반환할 것이다.

 

• 추가 예시들

'햄스터' || false      // '햄스터'
false || '햄스터'      // '햄스터'
'강아지' || '햄스터'   // '강아지'
false || false         // false

 

 

 

✅ 논리곱 연산자(&&)

연산 대상이 모두 true여야하는 논리곱 연산자에서는 어떻게 되는지 확인해보자

true && true

둘 다 true일 때 언제 결과가 판단이 되는지를 생각해보면 된다.

첫번째 true만으로는 전체 결과가 어떨지 알 수 없다. 두번째 true까지 확인해야 전체가 true임을 판단할 수 있다.

 

'춘배' && '나비'

 

둘 다 문자열일 때, 문자열은 Truthy값이므로 둘 다 true로 평가되지만,

논리곱 연산자에서는 평가 확정은 두번째 문자열에서 판단된다.

즉, 해당 논리곱 연산의 결과는 "나비"가 된다.

 

• 추가 예시들

'춘배' && '나비'      // '나비'
false && '춘배'       // false
'춘배' && false       // false

 

 

---

⚡ 단축평가의 활용

1. if 문을 대체할 수 있음

• 조건이 true일 때 = 논리곱 연산자 사용(&&)

let done = true
let message = ''

// if 문을 사용할 때
if (done) message = '완료!'

// 단축 평가로 대체할 때
message = done && '완료!'

논리곱(&&) 연산자를 이용해 done이 true일 때 '완료!' 라고 들어갈 수 있도록 할 수 있다.

 

• 조건이 false일 때 = 논리합 연산자 사용(||)

let done = false
let message = ''

// if 문 사용
if (!done) message = '아직임'

// 논리합 연산자 사용
message = done || '미완료'

done이 false라면 '미완료'가 저장된다.

 

하지만 두가지 예시 모두, done이 원하는 결과와 다르다면 false가 저장되므로 때에 따라서 삼항 연산자를 사용하는 것도 좋다(if else문을 대체할 수 있음)

let done = false
let message = done ? '완료' : '미완료'

 

2. 객체의 프로퍼티가 null이거나 undefined일 때 생기는 에러를 막고 싶을 때

let 고양이 = null
let 이름 = 고양이.이름     // TypeError: Cannot read property '이름' of null

객체에 프로퍼티가 정의되지 않거나 null이면 TypeError가 발생하는데, 이 때 단축평가를 사용하면 에러를 막을 수 있다.

let 고양이 = null
let 이름 = 고양이 && 고양이.이름     // null

이렇게 하면 고양이가 null이므로 논리곱연산자에서 바로 null을 결과값으로 냄

 

 

3. 함수 매개변수에 기본값을 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다.

function print(str) {
	console.log(str)
}

print()    // undefined, 매개변수가 전달되지 않으므로

이 때, 매개변수를 넣지 않는 기본값을 설정해주고 싶으면 단축평가를 사용한다.

function print(str) {
	str = str || '매개변수 확인하세요'
    console.log(str)
}

print()      // '매개변수 확인하세요'

하지만 이경우에는 print(0), print(null)과 같이 Falsy로 판단될 수 있는 값이 들어가면 기본값으로 들어가는 문제가 생길 수 있다. 그럴 때에는 ES6의 기본값 설정 기능을 사용하자

function print(str = '기본값') {
	console.log(str)
}

print()      // 기본값
print(0)     // 0

 

 

---

논리합 연산자와 논리곱 연산자 외에도 ES11에서 도입된 단축평가가 더 있다.

 

🔗옵셔널 체이닝 연산자(?.)

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아니라면 우항의 프로퍼티 참조를 이어간다.

let 고양이 = null

let 이름 = 고양이?.이름    // undefined

 

ES11에서 도입되었고, 이전에는 논리연산자 &&를 사용한 단축평가를 사용했다.

하지만 차이점도 존재한다.

• 논리곱 연산자(&&): 좌항이 false로 평가되는 값이면 바로 반환
• 옵셔널 체이닝 연산자(?.): 좌항이 false로 평가가 되어도 null과 undefined가 아니라면 프로퍼티 참조를 이어감

let 고양이 = ''
console.log(고양이 && 고양이.length)   // ''   -> 빈문자열이 false로 판단됨, 바로 평가
console.log(고양이?.length)            // 0    -> false지만, null이나 undefined가 아님

 

 

🛒null 병합 연산자(??)

좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 아니라면 좌항의 피연산자를 반환

변수에 기본값을 설정하기에 유용하다.

 let 변수 = null ?? '기본값'
 console.log(변수)           // '기본값'

 

null 병합 연산자도 ES11에 도입되었는데, 그 전에는 논리연산자(||)를 사용해서 기본값을 설정하였다.

여기서도 차이점이 존재한다.

• 논리합 연산자(||): 좌항이 fasle로 판단되면 우항을 그대로 반환, 0이나 ''도 사용할 수 있다면 예상 못한 동작이 발생할 수도 있음

let 변수 = '' || '기본값'
console.log(변수)     // '기본값'

let 숫자 = 0 || 10
console.log(숫자)     // 10

• null 병합 연산자(??): 좌항이 false로 판단되더라도 null이나 undefined가 아니라면 좌항을 반환

let 변수 = '' ?? '기본값'
console.log(변수)     // ''

let 숫자 = 0 ?? 10
console.log(숫자)     // 0

 

 

상황에 따라서 어떤 걸 사용할지 알려면 이런걸 정확하게 파악하고 있어야 할 것 같다.

 

출처

모던 자바스크립트 Deep Dive(이웅모, 위키북스)