[JavaScript] 자바스크립트 단락 회로 평가

논리연산자를 활용한 단락회로평가에 대해 알아보자

단락회로평가라는 것은 논리연산자의 특성을 이용한 문법

논리연산자를 복습해보자. 논리연산자는 3가지가 있다

console.log(true && true); //and을 뜻함
//true
console.log(true || false); //or을 뜻함
//true
console.log(!true); //not을 뜻함
//false

단락회로평가는 왼쪽에서 오른쪽으로 연산하게 되는 논리연산자의 연산 순서를 이용하는 문법

예를 들어 &&연산자를 보게되면 &&연산자는 피연산자 2개가 모두 true일때만 true반환

console.log(false && true); //and을 뜻함
//false

만약 첫번째 피연산자가 false이면 뒤에 있는(두번째) 피연산자는 굳이 볼 필요 X

이렇게 피연산자 중에 뒤에 위치한 피연산자를 확인할 필요가 없이 그냥 연산을 끝내버리는 것을 단락회로평가라고 함

이번엔 || 연산에도 단락회로평가가 존재하는지 알아보자

|| 연산자는 둘 중 하나만 true여도 true이다

console.log(true && false); //and을 뜻함
//true

따라서 앞의 피연산자의 값이 true이면 뒤의 피연산자가 뭐가 오든 상관이 없다 -> 평가가 앞의 true만 보고 종료되버림

이런식으로 || 연산자에도 단락회로평가가 이루어짐

이렇게 보면 단락회로평가가 값이 참인지 거짓인지를 빨리 평가하는 기능이라고만 생각할 수 있다

논리연산자의 피연산자의 값이 지금 true나 false이지만,
truthy와 falsy를 사용하게 되면 단락회로평가를 굉장히 멋있게 이용할 수 있다

이번에는 함수를 포함한 프로그램을 만들어보자👇

저저번시간에 다뤘던 주어진 객체에서 name이라는 프로퍼티를 반환하는 getName함수를 다시 만들어보자

const getName = (person) => { //화살표 함수
  if(!person){ //falsy 속성 이용
    return "객체가 아닙니다.";
  }
  return person.name;
};

let person; //undefined 할당

const name = getName(person);
console.log(name); // 객체가 아닙니다.

getName이라는 함수에서는 이런식으로 falsy 속성을 이용해서 파라미터가 null인지 undefined인지 검사 가능
-> 이것을 단락회로평가를 사용하면 더욱더 단축해서 사용가능

const getName = (person) => { //화살표 함수
  return person && person.name;
};

let person; //undefined 할당

const name = getName(person);
console.log(name); // undefined

if문으로 person.name에 접근하지 말라고 한것도 아닌데 정상적으로 수행됨

&&는 논리연산자
양쪽에 피연산자를 true나 false를 준게 아니라 truthy, falsy한 값을 줌
person 파라미터는 undefined이라는 값을 받기 때문에
-> && 연산에서 앞의 피연산자가 false가 되기 때문에 뒤에 있는 값을 고려할 필요 X
-> person.name에는 아예 접근 X
-> 그냥 값을 봤을 때 falsy 하다면 그 값을 그대로 return

이렇게 단락회로평가를 응용해서 사용 가능

하지만 이렇게되면 person 자체가 반환되기 때문에 출력이 undefined이나 null을 전달하면 undefined이나 null로 나오게 됨

이번에는 원래의 함수처럼 전달받은 값이 undefined이나 null처럼 falsy한 값일 때 그 값을 그대로 반환하지 않고, 아까처럼 "객체가 아닙니다." 라는 값을 반환하도록 해보자

이번에는 단락회로평가를 || 까지 써보자

const getName = (person) => { //화살표 함수
  const name = person && person.name;
  return name || "객체가 아닙니다";
};

let person = null; //null 할당

const name = getName(person);
console.log(name); // 객체가 아닙니다

실제로 객체를 넣어보면?👇

const getName = (person) => { //화살표 함수
  const name = person && person.name; //영주
  return name || "객체가 아닙니다";
};

let person = {name : "영주"}; //객체 할당

const name = getName(person);
console.log(name); // 영주

동작 원리👉 -> name에는 && 단락회로평가에서 배웠던 것처럼 person이 현재 undefined이 아니기 때문에 truthy하기 때문에 뒤의 피연산자를 보는데 person.name도 truthy하기 때문에 이 값을 반환
-> name에는 영주라는 값이 저장됨
그 다음 return문에서 name이 빈 문자열이 아니기 때문에 truthy하기 때문에 뒤의 값을 볼 필요 X
왜냐? ||의 단락회로평가는 앞이 truthy하거나 true이면 그냥 그 값을 반환하는 것으로 종료

이번에는 반대로 person에 falsy한 값을 전달해보자

const getName = (person) => { //화살표 함수
  const name = person && person.name; //null
  return name || "객체가 아닙니다"; //객체가 아닙니다
};

let person = null; 

const name = getName(person);
console.log(name); // 객체가 아닙니다

동작 원리👉 -> person은 falsy한 값이기 때문에 뒤를 볼 필요 X
왜냐? && 연산이기 때문
그래서 person의 값을 그대로 반환 -> name은 null 반환
name이 null이면 falsy
앞이 flasy하기 때문에 || 연산에서는 뒤에까지 봐야함
왜냐면 뒤가 truthy이기 때문에 결론적으로 name이 falsy가 되고, ||를 통해서 뒤로 넘어가서 뒤의 값이 리턴되기 때문에 "객체가 아닙니다"가 반환됨

이번시간에는 &&연산과 ||연산을 응용한 참과 거짓을 구분하는 단락회로평가와 truthy와 falsy 속성을 응용해서 함수안에서 사용할 수 있는 방법까지 알아보았다.