[JavaScript] Boolean 트릭, truthy와 falsy를 다루는 논리 연산자 이용을 중심으로

yoon·2023년 2월 24일

!! 연산자 이용

!은 기존의 bool값을 반대로 바꾸는 거라면, !!는 반대의 반대, 즉 원래로 돌아오는 값이다. 정말 쓸데 없다고 생각하겠지만, !!를 이용하면 truthy를 true로, falsy를 false로 바꿔주는 유용한 친구이다.

truthy와 falsy가 모른다면 이쪽으로 => https://velog.io/@heeyoon1302/JavaScript-if%EB%AC%B8%EC%97%90-%EB%8C%80%ED%95%B4-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%97%B0%EC%82%B0%EC%9E%90%EB%A5%BC-%EC%A4%91%EC%8B%AC%EC%9C%BC%EB%A1%9C#truly-%EC%99%80-falsy-%EA%B0%92%EC%9D%80-%EB%AD%90%EC%A7%80

코드로 예시를 보여주겠다

!!1

일단 1은 truthy다. 만약 !1 이었다면 false가 반환되었을 것이다. 그러나 !! 덕분에 true가 반환되었다.

|| 연산자 이용

||연산자를 이용하면 조건문을 사용하지 않고 조건에 따른 값 할당이 가능하다. 이번에 내가 소개할 것은 삼항연산자는 아니다. 그러나 그만큼 유용하다.

||을 Boolean 형의 연산 용도로 사용하지 않고, truthy와 falsy 값을 비교할 때에도 사용할 수 있다. 이때 ||은 가장 첫번째의 truthy값을 반환하는 연산자가 된다. 만약 모든 값이 falsy라면, 가장 마지막 값을 반환한다.

const name = someInput || 'MAX'

예시 코드를 설명하자면, name의 값은 someInput이라는 변수에 어떤 값이 할당되었는지에 따라서 달라진다. 만약 사용자가 자신의 이름을 작성하지 않았다면 someInput은 null일 것이다. null은 falsy 값이다. 따라서 || 뒤에 있는 someInput이 falsy인것을 깨달은 후 || 뒤에 있는 'MAX'가 truthy임을 깨달으면 name에 MAX가 할당되는 것이다.

만약 someInput이 null이나 빈 문자열이 아니라면(즉, 문자열이 할당되어 있다면) truthy이기 때문에 name에는 someInput의 값이 할당될 것이다.

내가 소개한 || 연산자의 자바스크립트만의 특별한 쓰임에 대해 더 자세히 알고 싶다면 이하 링크를 참고해라.
https://ko.javascript.info/logical-operators

&& 연산자 이용

||와 비슷한 느낌으로 가주면 된다. &&은 모두 truthy일 경우 마지막 값을 반환하고, falsy인 값을 인지하면 그 값을 반환한다.

결론

=== >= 와 같은 비교연산자와는 다르게, || 와 &&의 논리연산자는 boolean 값을 반환하는 게 아니다. 연산자 전후에 있는 값을 조건을 취해서 그 조건 중 일부를 반환한다.

0개의 댓글