-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathbitwise-operators.html
More file actions
128 lines (112 loc) · 31.9 KB
/
bitwise-operators.html
File metadata and controls
128 lines (112 loc) · 31.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Bitwise operators</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Bitwise operators, Shift Operators">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Bitwise operators">
<meta property="og:description" content="Bitwise operators, Shift Operators">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/bitwise-operators.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Bitwise operators">
<meta name="twitter:description" content="Bitwise operators, Shift Operators">
<meta name="twitter:url" content="/javascript/bitwise-operators.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1711.f7533f12.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" class="sidebar-link">Strings</a></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" class="sidebar-link">Conditions</a></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" class="sidebar-link">Objects</a></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" aria-current="page" class="active sidebar-link">Bitwise operators</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/bitwise-operators.html#bitwise-operators-2" class="sidebar-link">Bitwise operators</a></li><li class="sidebar-sub-header"><a href="/javascript/bitwise-operators.html#shift-operators" class="sidebar-link">Shift Operators</a></li></ul></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" class="sidebar-link">Functions</a></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="bitwise-operators"><a href="#bitwise-operators" class="header-anchor">#</a> Bitwise operators</h1> <h2 id="bitwise-operators-2"><a href="#bitwise-operators-2" class="header-anchor">#</a> Bitwise operators</h2> <p>Bitwise operators perform operations on bit values of data. These operators convert operands to signed 32-bit integers in <a href="http://stackoverflow.com/questions/1049722/what-is-2s-complement" target="_blank" rel="noopener noreferrer">two's complement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h3 id="conversion-to-32-bit-integers"><a href="#conversion-to-32-bit-integers" class="header-anchor">#</a> Conversion to 32-bit integers</h3> <p>Numbers with more than 32 bits discard their most significant bits. For example, the following integer with more than 32 bits is converted to a 32-bit integer:</p> <div class="language-js extra-class"><pre class="language-js"><code>Before<span class="token operator">:</span> <span class="token number">10100110111110100000000010000011110001000001</span>
After<span class="token operator">:</span> <span class="token number">10100000000010000011110001000001</span>
</code></pre></div><h3 id="two-s-complement"><a href="#two-s-complement" class="header-anchor">#</a> Two's Complement</h3> <p>In normal binary we find the binary value by adding the <code>1</code>'s based on their position as powers of 2 - The rightmost bit being <code>2^0</code> to the leftmost bit being <code>2^n-1</code> where <code>n</code> is the number of bits. For example, using 4 bits:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Normal Binary</span>
<span class="token comment">// 8 4 2 1</span>
<span class="token number">0</span> <span class="token number">1</span> <span class="token number">1</span> <span class="token number">0</span> <span class="token operator">=></span> <span class="token number">0</span> <span class="token operator">+</span> <span class="token number">4</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token number">0</span> <span class="token operator">=></span> <span class="token number">6</span>
</code></pre></div><p>Two complement's format means that the number's negative counterpart (6 vs -6) is all the bits for a number inverted, plus one. The inverted bits of 6 would be:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Normal binary</span>
<span class="token number">0</span> <span class="token number">1</span> <span class="token number">1</span> <span class="token number">0</span>
<span class="token comment">// One's complement (all bits inverted)</span>
<span class="token number">1</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">1</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">8</span> <span class="token operator">+</span> <span class="token number">0</span> <span class="token operator">+</span> <span class="token number">0</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">7</span>
<span class="token comment">// Two's complement (add 1 to one's complement)</span>
<span class="token number">1</span> <span class="token number">0</span> <span class="token number">1</span> <span class="token number">0</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">8</span> <span class="token operator">+</span> <span class="token number">0</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> <span class="token number">0</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">6</span>
</code></pre></div><p><strong>Note:</strong> Adding more <code>1</code>'s to the left of a binary number does not change its value in two's compliment. The value <code>1010</code> and <code>1111111111010</code> are both <code>-6</code>.</p> <h3 id="bitwise-and"><a href="#bitwise-and" class="header-anchor">#</a> Bitwise AND</h3> <p>The bitwise AND operation <code>a & b</code> returns the binary value with a <code>1</code> where both binary operands have <code>1</code>'s in a specific position, and <code>0</code> in all other positions. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">13</span> <span class="token operator">&</span> <span class="token number">7</span> <span class="token operator">=></span> <span class="token number">5</span>
<span class="token comment">// 13: 0..01101</span>
<span class="token comment">// 7: 0..00111</span>
<span class="token comment">//-----------------</span>
<span class="token comment">// 5: 0..00101 (0 + 0 + 4 + 0 + 1)</span>
</code></pre></div><p><strong>Real world example: Number's Parity Check</strong></p> <p>Instead of this "masterpiece" (unfortunately too often seen in many real code parts):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">isEven</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> n <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">isOdd</span><span class="token punctuation">(</span><span class="token parameter">n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isEven</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>You can check the (integer) number's parity in much more effective and simple manner:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>n <span class="token operator">&</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"ODD!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"EVEN!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="bitwise-or"><a href="#bitwise-or" class="header-anchor">#</a> Bitwise OR</h3> <p>The bitwise OR operation <code>a | b</code> returns the binary value with a <code>1</code> where either operands or both operands have <code>1</code>'s in a specific position, and <code>0</code> when both values have <code>0</code> in a position. For example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">13</span> <span class="token operator">|</span> <span class="token number">7</span> <span class="token operator">=></span> <span class="token number">15</span>
<span class="token comment">// 13: 0..01101</span>
<span class="token comment">// 7: 0..00111</span>
<span class="token comment">//-----------------</span>
<span class="token comment">// 15: 0..01111 (0 + 8 + 4 + 2 + 1) </span>
</code></pre></div><h3 id="bitwise-not"><a href="#bitwise-not" class="header-anchor">#</a> Bitwise NOT</h3> <p>The bitwise NOT operation <code>~a</code> <strong>flips</strong> the bits of the given value <code>a</code>. This means all the <code>1</code>'s will become <code>0</code>'s and all the <code>0</code>'s will become <code>1</code>'s.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">~</span><span class="token number">13</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">14</span>
<span class="token comment">// 13: 0..01101</span>
<span class="token comment">//-----------------</span>
<span class="token comment">//-14: 1..10010 (-16 + 0 + 0 + 2 + 0)</span>
</code></pre></div><h3 id="bitwise-xor"><a href="#bitwise-xor" class="header-anchor">#</a> Bitwise XOR</h3> <p>The bitwise XOR (<strong>exclusive or</strong>) operation <code>a ^ b</code> places a <code>1</code> only if the two bits are different. Exclusive or means <strong>either one or the other, but not both</strong>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">13</span> <span class="token operator">^</span> <span class="token number">7</span> <span class="token operator">=></span> <span class="token number">10</span>
<span class="token comment">// 13: 0..01101</span>
<span class="token comment">// 7: 0..00111</span>
<span class="token comment">//-----------------</span>
<span class="token comment">// 10: 0..01010 (0 + 8 + 0 + 2 + 0)</span>
</code></pre></div><p><strong>Real world example: swapping two integer values without additional memory allocation</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">11</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">22</span><span class="token punctuation">;</span>
a <span class="token operator">=</span> a <span class="token operator">^</span> b<span class="token punctuation">;</span>
b <span class="token operator">=</span> a <span class="token operator">^</span> b<span class="token punctuation">;</span>
a <span class="token operator">=</span> a <span class="token operator">^</span> b<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a = "</span> <span class="token operator">+</span> a <span class="token operator">+</span> <span class="token string">"; b = "</span> <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// a is now 22 and b is now 11</span>
</code></pre></div><h2 id="shift-operators"><a href="#shift-operators" class="header-anchor">#</a> Shift Operators</h2> <p>Bitwise shifting can be thought as "moving" the bits either left or right, and hence changing the value of the data operated on.</p> <h3 id="left-shift"><a href="#left-shift" class="header-anchor">#</a> Left Shift</h3> <p>The left shift operator <code>(value) << (shift amount)</code> will shift the bits to the left by <code>(shift amount)</code> bits; the new bits coming in from the right will be <code>0</code>'s:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">5</span> <span class="token operator"><<</span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token number">20</span>
<span class="token comment">// 5: 0..000101</span>
<span class="token comment">// 20: 0..010100 <= adds two 0's to the right</span>
</code></pre></div><h3 id="right-shift-sign-propagating"><a href="#right-shift-sign-propagating" class="header-anchor">#</a> Right Shift (<strong>Sign-propagating</strong>)</h3> <p>The right shift operator <code>(value) >> (shift amount)</code> is also known as the "Sign-propagating right shift" because it keeps the sign of the initial operand. The right shift operator shifts the <code>value</code> the specified <code>shift amount</code> of bits to the right. Excess bits shifted off the right are discarded. The new bits coming in from the left will be based on the sign of the initial operand. If the left-most bit was <code>1</code> then the new bits will all be <code>1</code> and vise-versa for <code>0</code>'s.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token number">20</span> <span class="token operator">>></span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token number">5</span>
<span class="token comment">// 20: 0..010100</span>
<span class="token comment">// 5: 0..000101 <= added two 0's from the left and chopped off 00 from the right</span>
<span class="token operator">-</span><span class="token number">5</span> <span class="token operator">>></span> <span class="token number">3</span> <span class="token operator">=></span> <span class="token operator">-</span><span class="token number">1</span>
<span class="token comment">// -5: 1..111011</span>
<span class="token comment">// -2: 1..111111 <= added three 1's from the left and chopped off 011 from the right</span>
</code></pre></div><h3 id="right-shift-zero-fill"><a href="#right-shift-zero-fill" class="header-anchor">#</a> Right Shift (<strong>Zero fill</strong>)</h3> <p>The zero-fill right shift operator <code>(value) >>> (shift amount)</code> will move the bits to the right, and the new bits will be <code>0</code>'s. The <code>0</code>'s are shifted in from the left, and excess bits to the right are shifted off and discarded. This means it can make negative numbers into positive ones.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">-</span><span class="token number">30</span> <span class="token operator">>>></span> <span class="token number">2</span> <span class="token operator">=></span> <span class="token number">1073741816</span>
<span class="token comment">// -30: 111..1100010</span>
<span class="token comment">//1073741816: 001..1111000</span>
</code></pre></div><p>Zero-fill right shift and sign-propagating right shift yield the same result for non negative numbers.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/bitwise-operators.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/arithmetic-math.html" class="prev">
Arithmetic (Math)
</a></span> <span class="next"><a href="/javascript/constructor-functions.html">
Constructor functions
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1711.f7533f12.js" defer></script>
</body>
</html>