비트 연산자(Bitwise Operator)는 숫자를 32비트 이진수로 변환한 뒤 각 비트 단위로 직접 연산을 수행하는 연산자입니다. 자바스크립트에서는 플래그 처리, 성능 최적화, 저수준 데이터 조작 등에 활용됩니다. 이 글에서는 대표적인 비트 연산자인 NOT(~), 왼쪽 시프트(<<), 오른쪽 시프트(>>>)의 동작 원리를 예제와 함께 살펴보겠습니다.
1. 비트 NOT 연산자(~)
NOT 연산자는 피연산자의 모든 비트를 반전시킵니다. 1은 0으로, 0은 1로 바뀌며, 결과값의 부호도 반대가 됩니다.
예제
<html>
<body>
<p id="not"></p>
<script>
document.getElementById("not").innerHTML = ~ 13;
</script>
</body>
</html>
출력 결과
-14
설명: 10진수 13은 2진수로 1101입니다. NOT 연산을 적용하면 모든 비트가 반전되는데, 자바스크립트는 부호 있는 32비트 정수를 기준으로 연산하기 때문에 결과는 -(13 + 1) = -14가 됩니다. '~n은 -(n+1)'이라는 공식만 기억하면 NOT 연산의 결과를 쉽게 예측할 수 있습니다.
2. 왼쪽 시프트 연산자(<<)
왼쪽 시프트 연산자는 비트를 지정한 칸수만큼 왼쪽으로 밀어내고, 생긴 빈자리는 0으로 채웁니다. n << k는 곱셈 n × 2k와 같은 효과를 냅니다.
예제
<html>
<body>
<p id="left"></p>
<script>
document.getElementById("left").innerHTML = 5 << 2;
</script>
</body>
</html>
출력 결과
20
설명: 5의 2진수 표현은 0101입니다. 이를 2비트 왼쪽으로 이동하면 010100이 되고, 이를 10진수로 변환하면 20입니다. 실제로 5 × 2² = 20과 동일한 결과입니다.
3. 오른쪽 시프트 연산자(>>>)
부호 없는 오른쪽 시프트 연산자(>>>)는 비트를 오른쪽으로 밀어내며, 빈자리를 항상 0으로 채웁니다. 양수의 경우 n >>> k는 나눗셈 n ÷ 2k의 몫과 같습니다.
예제
<html>
<body>
<p id="right"></p>
<script>
document.getElementById("right").innerHTML = 5 >>> 2;
</script>
</body>
</html>
출력 결과
1
설명: 5의 2진수 표현은 0101입니다. 이를 2비트 오른쪽으로 이동하면 0001이 되어 10진수로 1입니다. 이는 5 ÷ 2² = 1.25에서 소수점 이하를 버린 값과 같습니다.
정리: 시프트 연산자 한눈에 비교하기
| 연산자 | 이름 | 동작 |
|---|---|---|
| << | 왼쪽 시프트 | n × 2k, 비트를 왼쪽으로 이동하고 빈자리는 0으로 채움 |
| >> | 부호 있는 오른쪽 시프트 | n ÷ 2k의 몫, 부호 비트를 유지 |
| >>> | 부호 없는 오른쪽 시프트 | n ÷ 2k의 몫, 빈자리를 항상 0으로 채움 |
비트 연산자는 익숙해지면 코드를 더 간결하고 빠르게 작성할 수 있게 해주는 강력한 도구입니다. 특히 시프트 연산은 2의 거듭제곱 단위 곱셈·나눗셈을 처리할 때 유용하므로, 위 예제들을 직접 실행해 보면서 동작 방식을 익혀보시기 바랍니다.