? | ?? | ! | !! | ~ | ~~ | 6가지의 연산자 알아보기

자바스크립트에서 자주 사용하는 특수 기호와 연산자 정리

코딩하다 보면 자바스크립트에서 다양한 특수 기호와 연산자를 자주 쓰게 된다. 이런 기호들을 잘 활용하면 코드를 더 간결하고 효율적으로 짤 수 있다. 이번 글에서는   ?, !, ~ 같은 연산자들이 각각 어떤 의미를 가지고 어떻게 활용되는지 알아보겠다.

1. 물음표 (?): 삼항 연산자랑 옵셔널 체이닝

(1) 삼항 연산자 ?

?는 **삼항 연산자(ternary operator)**로 자주 쓰인다. 조건에 따라 다른 값을 선택할 때 유용하며, if 문을 짧게 쓸 수 있게 해준다.

 

const result = condition ? '참일 때 값' : '거짓일 때 값';

 

예를 들면

 

const age = 20;
const isAdult = age >= 18 ? '성인' : '미성년자';
console.log(isAdult);  // 성인

 

 

 

이처럼 조건을 간단하게 처리할 수 있다.

 

 

(2) 옵셔널 체이닝 연산자

?.는 옵셔널 체이닝(Optional Chaining) 연산자다.

객체의 프로퍼티를 접근할 때 해당 값이 없으면 undefined를 반환해서 에러를 방지할 수 있다.

 

const person = { name: 'Alice', address: { city: 'Seoul' } };
console.log(person?.address?.city);  // 'Seoul'
console.log(person?.contact?.email); // undefined (에러 발생 안함)

 

이 연산자는 중첩된 객체를 다룰 때 유용하게 사용할 수 있다.

 

 

2. 느낌표 (!): 논리 부정과 일치 여부 확인

(1) 느낌표 한 개 (!)

! 는 논리 부정 연산자로, 값을 반전시키는 역할을 한다. true는 false로, false는 true로 변환된다.

이 연산자는 중첩된 객체를 다룰 때 유용하게 사용할 수 있다.

 

 

const isLoggedIn = false;
console.log(!isLoggedIn);  // true

 

이처럼 불리언 값을 반전시켜 논리적 흐름을 바꿀 때 유용하다.

(2) 느낌표 두 개 (!==)

!==는 일치하지 않음(strict inequality) 연산자로, 두 값이 일치하지 않으면 true, 일치하면 false를 반환한다.

값뿐만 아니라 타입까지 비교하기 때문에 더 엄격한 비교 방식이다.

 

 

console.log(3 !== '3'); // true (타입이 다르기 때문)
console.log(3 !== 3);   // false (값과 타입이 모두 같음)

 

이렇게 값이든 타입이든 차이가 있으면 true를 반환하는 방식이다.

 

3. 물결 (~): 비트 연산자

(1) 물결 한 개 (~)

~ 는 비트 NOT 연산자로, 숫자의 비트를 반전시키는 역할을 한다.

이 연산자는 -(n+1)의 결과를 반환하는 방식으로 동작한다.

 

console.log(~5);  // -6 (5의 비트를 반전시키면 -6이 나옴)
console.log(~-1); // 0  (-1의 비트를 반전시키면 0이 나옴)

 

(2) 물결 두 개 (~~)

 

~~는 소수점 이하를 버리는 연산자다. Math.floor()와 비슷한 역할을 하며, 소수점을 깔끔하게 버릴 때 쓴다.

 

 

console.log(~~4.9);  // 4 (소수점 이하를 버림)
console.log(~~-4.9); // -4 (Math.floor와 동일하게 동작)

 

 

소수점 처리를 간단하게 하고 싶을 때 유용하게 사용할 수 있다.

 

마무리

자바스크립트에서 이런 특수 기호와 연산자들을 잘 활용하면 코드를 훨씬 더 깔끔하고 효율적으로 작성할 수 있다.

오늘 다룬 ?, !, ~ 연산자들을 익혀두면 여러 상황에서 유용하게 사용할 수 있을 것이다. 앞으로 코드를 작성할 때 한 번씩 활용해보길 권장한다!

 

 

이해하는 데 도움을 많이 줬던 글 : https://aiday.tistory.com/102