한 입 크기로 잘라먹는 리액트Table Of Contents
1장 논리 연산에서 살펴보았듯이 true || false와 같은 비교식은 첫 번째 피연산자의 값이 true이므로 두 번째 피연산자의 값이 무엇이든 연산 결과는 true입니다. 또한 false && true와 같은 식은 첫 번째 피연산자의 값이 false이므로 두 번째 피연산자가 무엇이든 연산 결과는 false입니다.
이렇듯 논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할때, 두 번째 값은 평가하지 않는 것을 ‘단락 평가(Short-Circuit Evaluation)’라고 합니다. 단락 평가는 다른 표현으로 ‘지름길 평가’라고도 합니다.
단락 평가에는 AND와 OR 논리 연산자의 특징을 이용하는 두 가지 방식이 있습니다. 이번 절에서는 두 가지 단락 평가에 대해 살펴보겠습니다.
AND 단락평가
AND를 의미하는 && 연산자는 피연산자의 값이 하나라도 거짓이면 거짓을 반환합니다. 따라서 왼쪽에 위치한 첫 번째 피연산자 값이 false면, 단락 평가가 이루어지므로 두 번째 피연산자는 계산하지 않습니다.
코드를 불러오는 중 입니다 ...첫 번째 피연산자 함수 calcA의 반환값이 거짓이므로, 두 번째 피연산자는 계산하지 않습니다. 따라서 함수 calcB는 호출되지 않습니다. 이는 콘솔에 b가 출력되지 않는 것으로 확인할 수 있습니다.
AND 단락 평가를 이용해 오류 방지하기
단락 평가는 불리언이 아닌 truthy & falsy한 값을 사용할 때도 적용할 수 있습니다.
코드를 불러오는 중 입니다 ...결과를 보면 undefined를 출력합니다. AND 논리 연산의 결과가 true나 false가 아니라 undefined인 이유는 논리 연산에 참여한 피연산자의 값이 불리언 값이 아니기 때문입니다. AND나 OR 논리 연산은 피연산자의 값이 truthy 또는 falsy하면 해당값을 그대로 반환합니다. 따라서 함수 calcA가 falsy한 값인 undefined를 반환하므로, 이 값이 그대로 논리 연산의 결괏값이 됩니다.
이런 특징을 이용하면 오류를 방지하는 데 큰 도움이 됩니다.
코드를 불러오는 중 입니다 ...① 함수 getName은 매개변수 person의 name 프로퍼티 값을 반환합니다. ② 함수 getName을 호출하고 인수로 person을 전달합니다. 이때 person의 값은 undefined입니다.
함수 getName은 매개변수 person에 저장한 값이 객체일 것으로 예상합니다. 그러나 person에 실제로 저장한 값은 undefined입니다. 따라서 undefined 값에 객체의 점 표기법으로 접근하므로 프로퍼티를 읽을 수 없다는 오류 메시지를 출력합니다.
조건문으로 오류를 방지할 수 있습니다.
코드를 불러오는 중 입니다 ...① 매개변수 person의 값이 undefined가 아닐 때만 name 프로퍼티에 접근합니다.
오류는 일단 해결했지만 조금 부족합니다. 함수 getName에 전달하는 인수가 null일 때에도 오류가 발생할 수 있기 때문입니다.
코드를 불러오는 중 입니다 ...① 매개변수 person의 값이 null이므로 조건을 만족하여 name 프로퍼티에 접근합니다.
함수 getName의 인수로 null 값을 전달했습니다. 그 결과 조건문은 만족하지만, null 값에 객체의 점 표기법을 사용해 접근하면 마찬가지로 프로퍼티를 읽을 수 없다는 메시지 오류가 발생합니다.
조건문에서 이 오류를 방지하려면 다음과 같이 조건을 수정해야 합니다.
코드를 불러오는 중 입니다 ...① 매개변수 person의 값이 undefined나 null이 아닐 때에만 name 프로퍼티에 접근합니다.
문제는 일단 해결되었습니다. 그러나 자바스크립트로 프로그래밍을 하다 보면 객체를 매개변수에 저장해 사용하는 일이 많습니다. 그럴 때마다 오류를 방지하기 위해 복잡한 조건문을 작성하는 것은 그다지 효율적이지 않습니다.
단락 평가를 이용하면 이 문제를 쉽게 해결할 수 있습니다.
코드를 불러오는 중 입니다 ...① 매개변수 person의 값이 false 또는 falsy한 값이라면 단락 평가를 수행합니다.
지금까지 복잡해 보였던 문제를 단락 평가를 이용하면 간단히 해결할 수 있습니다.
함수 getName의 매개변수 person이 undefined, null과 같은 falsy한 값이라면, person.name을 계산하지 않으므로 이제는 유사 오류가 발생하지 않습니다.
OR 단락 평가
OR 연산을 의미하는 || 연산자는 피연산자의 값이 하나라도 참이면 참을 반환합니다. 따라서 왼쪽에 위치한 첫 번째 피연산자의 값이 true면, 단락 평가가 이루어져 두 번째 피연산자 값은 계산하지 않습니다.
코드를 불러오는 중 입니다 ...첫 번째 피연산자인 함수 calcA의 반환값이 참이므로, 두 번째 피연산자의 값은 계산하지 않습니다. 따라서 함수 calcB는 호출되지 않습니다.
AND처럼 OR 단락 평가 역시 불리언이 아닌 truthy & falsy한 값을 사용할 때도 적용할 수 있습니다.
코드를 불러오는 중 입니다 ...“이정환”은 truthy한 값이므로 두 번째 피연산자를 계산하지 않습니다. 따라서 name에 "이정환"이 저장됩니다.
OR 단락 평가와 null 병합 연산자
이번에는 OR(||) 연산자를 이용한 단락 평가와 1장에서 살펴본 null 병합 연산자의 차이점을 알아보겠습니다.
코드를 불러오는 중 입니다 ...① varA는 falsy한 값, varB는 truthy한 값이기 때문에 || 연산의 결과 varB의 값인 “이정환”을 resultA에 저장합니다. ② varA와 varB에서 첫 번째로 확정된 값은 varA의 0입니다. 따라서 이 값을 resultB에 저장합니다.
||의 단락 평가는 null 병합 연산자와 유사한 듯 보이지만 혼동해서는 안 됩니다. null 병합 연산자는 값이 null이나 undefined가 아닌 피연산자를 찾습니다. 따라서 truthy와 falsy로 동작하는 || 연산자와는 엄밀히 다른 동작을 수행합니다.