처음 프로그래밍 언어를 공부할 때 !(=부정연산자)를 보고 이런 걸 왜 쓰는거야? 라는 의문이 들었다. 언어 문법만 공부하던 입문자였기에 부정연산자를 사용할 일이 거의 없었지만, 머리가 조금 큰 코린이는 필요할 때 가끔 부정연산자를 사용하여 코드를 작성해준다. 그러던 중 알게된 부정연산자를 더 자세히 공부해보자.
그 전에‼️
문자열, 0이 아닌 숫자, true, 객체, 함수 등은 truthy한 값이고,
빈 문자열(''), 숫자 0, false, null, undefined, NaN 등의 자료형은 falsy한 값을 나타낸다는 걸 알고 코드를 보자.
⭐️ ! 연산자
자바스크립트에서 연산식 앞에 붙는 느낌표는 부정연산자이다. 부정연산자의 기본 원리는 연산하고자 하는 식 앞에 !만 붙이면 된다.
말 그대로 '부정'연산자이기 때문에 true에 !연산자를 붙이면 false가 되고, false에 !를 붙이면 true가 된다.
!true; // false
!false; // true⭐️ !! 연산자는 무엇일까?
부정연산자를 연이어 두 번 쓰면 다른 자료형을 Boolean값으로 강제 형 변환(type casting)을 할 수 있다.
- 형 변환이란? 값의 자료형이 바뀌는 현상 또는 바꾸는 행위를 말한다.
그래서 !! 연산자를 활용하면 문자열, 숫자, Boolean, null, undefined 등의 자료형을 Boolean type으로 변환할 수 있다.
⭐️ !!연산자로 true가 되는 값
!!'a'; // true
!!42; // true
!!true; // true
let value = "Hello";
let result = !!value; // true
- 비어있지 않은 문자열 'a', 0이 아닌 숫자, true 등은 truthy한 값이다.
truthy한 값에 느낌표 하나를 붙인 !'a'는 falsy한 값이 되는데,
여기에 느낌표 하나를 더 붙여서 다시 truthy한 값이 되었다.
이제 조금 감이 오나..?ㅎㅎㅎㅎ (나에게 하는 말임...)
⭐️ !!연산자로 false가 되는 값
대부분의 값은 bool값으로 형 변환 됐을 때 true가 된다. 하지만 이제부터 소개할 값은 모두 false가 되는 값이니 이것만은 기억해보도록 하자.
!!false; // false
!!""; // false
!!0; // false
!!NaN; // false
!!null; //false
!!undefined; // false- 사실 document.all이라는 값도 false가 되는 값인데 거의 사용하지 않는다고 한다..
⭐️ 연산자의 우선순위
연산자의 우선순위를 비교하기 위해 간단한 예제를 소개해보겠다.
// 1번째 문제
!(2 < 0); // true
// 2번째 문제
!2 < 0; // false왜 이와 같은 결과가 나올까?
- 연산자의 우선순위에서 소괄호()의 우선순위가 가장 높기 때문이다.
- 소괄호 다음으로 우선순위가 높은 연산자들이 몇 개 더 있지만, 예제에서 다룬 ()의 우선순위가 그 어느 연산자들 보다 높고,
- 비교연산자(<,>,<=,>=)보다 부정연산자(!)의 우선순위가 더 높기 때문에 위와 같은 결과가 도출된다.
하나씩 문제를 풀어보자면,
// 1번째 문제
1. !(2 < 0);에서 !보다 ()의 우선순위가 높으므로 2 < 0은 false 가 된다.
2. !false는 반대값인 true를 반환하기 때문에 결과적으로 true를 반환하게 된다.
// 2번째 문제
1. !2 < 0;에서 <보다 !의 우선순위가 더 높으므로 !2는 false가 된다.
2. false < 0;을 연산하게 되는데, 이때 false는 0보다 크거나 작지 않으므로 이 비교식은 false를 반환하게 된다.
JS를 공부한 지 꽤 오래되었지만 처음 알게 된 문법이라 정리해두면 좋을 것 같아 남겨보았다.
