React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
단락 회로 평가
논리 연산자를 알고 계신가요?
- true && true : true
- false || true : true
- !true : false
이렇게 세 가지의 연산자 &&(and), ||(or), !(not)를 논리 연산자라고 한다. 논리 연산자는 왼쪽에서부터 오른쪽 순서로 연산을 수행하는데 바로 이 점을 이용해서 단락 회로 평가를 사용?할 수 있다.
console.log(false && true); // false
console.log(true || false); // true
console.log(!true); // false위의 코드 중에서 우리가 눈여겨 볼 코드는 &&와 || 연산자이다. not의 경우는 단일 연산자이니 패스!
&&의 경우는 둘 다 true 값을 가져야지만 true이다. 그러니 && 앞 피연산자가 false인 경우는 뒤에 false가 와도 true가 와도 false임은 변함 없다. 그래서 처음 피연산자가 false인 경우에는 연산을 바로 끝내버리는게 단락 회로 평가다.
||도 마찬가지이다. ||의 앞 피연산자가 true면 뒤에 false 혹은 true가 와도 값은 언제가 true가 반환 될 것이다. 그래서 앞 부분의 피연산자만 보고 연산을 끝내버린다.
이런 단락 회로 평가의 특징과 Truthy, Falsy를 이용해 코드를 보다 간결하게 작성해보자.
전에 만들었었던 객체의 name을 가져오는 getName 함수를 작성해보자.
const getName = (person) => {
if(!person) {
return "객체가 아닙니다.";
}
return person.name;
};
let person;
const name = getName(person);
console.log(name); // 객체가 아닙니다getName 함수는 화살표 함수로 작성되었고 person의 객체가 없으면 false를 반환하는데 !(not)을 붙여줬으므로 '객체가 아닙니다'가 리턴되어 콘솔에 출력된다. 이 코드를 조금 더 줄여보자.
const getName = (person) => {
const name = person && person.name; // false && false
return name || "객체가 아닙니다"; // false(undefined) || true
};
let person;
const name = getName(person);
console.log(name);// 객체가 아닙니다Truthy, Falsy 그리고 단락 회로 평가의 특징을 이용해 줄인 코드이다.
일단 person은 undefined를 담고있다. 그래서 getName() 첫 줄에서 person은 Falsy하므로 false 값을 가지고 있어 연산을 끝내버리고 undefined를 name에 담는다. 그리고 return에서 name은 undefined를 갖고 있으므로 false이다. ||는 첫 피연산자가 false인 경우 뒤의 피연산자가 false인지 true인지 확인해야한다. 그래서 "객체가 아닙니다"를 보고 문자열이 true임을 확인해 결국엔 "객체가 아닙니다"를 리턴하게 된다.
