Understanding the JavaScript bitwise operators

JavaScript provides several kinds of operators, making it possible to carry out basic operations on simple values such as arithmetic operations, assignment operations, logical operations, bitwise operations, etc.

Originally published by Glad Chinda at https://blog.logrocket.com

We often see JavaScript code that contains a mix of assignment operators, arithmetic operators, and logical operators. However, we don’t get to see bitwise operators in use that much.

JavaScript bitwise operators

1. ~ — Bitwise NOT
2. & — Bitwise AND
3. | — Bitwise OR
4. ^ — Bitwise XOR
5. << — Left Shift
6. >> — Sign-Propagating Right Shift
7. >>> — Zero-Fill Right Shift

In this tutorial, we will take a look at all the JavaScript bitwise operators and try to understand how they are evaluated. We will also look at a few interesting applications for bitwise operators in writing simple JavaScript programs. This will require us to take a little peek at how JavaScript bitwise operators represent their operands as signed 32-bit integers. Come on, let’s do this already!

Bitwise NOT (~)

The ~ operator is a unary operator; thus, it takes only one operand. The ~ operator performs a NOT operation on every bit of its operand. The result of a NOT operation is called a complement. The complement of an integer is formed by inverting every bit of the integer.

For a given integer — say, 170 — the complement can be computed using the ~ operator as follows:

// 170 => 00000000000000000000000010101010
// --------------------------------------
//  ~ 00000000000000000000000010101010
// --------------------------------------
//  = 11111111111111111111111101010101
// --------------------------------------
//  = -171 (decimal)
 
console.log(~170); // -171

JavaScript bitwise operators convert their operands to 32-bit signed integers in two’s complement format. Hence, when the ~ operator is used on an integer, the resulting value is the two’s complement of the integer. The two’s complement of an integer A is given by -(A + 1).

~170 => -(170 + 1) => -171

Here are a few points to note about the 32-bit signed integers used by JavaScript bitwise operators:

• The most significant (leftmost) bit is called the sign bit. The sign bit is always 0 for positive integers, and 1 for negative integers.
• The remaining 31 bits besides the sign bit are used to represent the integer. Therefore, the maximum 32-bit integer that can be represented is (2^32 - 1), which is 2147483647, while the minimum integer is -(2^31), which is -2147483648.
• For integers that fall outside the 32-bit signed integer range, the most significant bits are discarded until the integer falls within range.

Here are the 32-bit sequence representations of some important numbers:

           0 => 00000000000000000000000000000000
          -1 => 11111111111111111111111111111111
  2147483647 => 01111111111111111111111111111111
 -2147483648 => 10000000000000000000000000000000

From the above representations, it is evident that:

          ~0 => -1
         ~-1 => 0
 ~2147483647 => -2147483648
~-2147483648 => 2147483647

Found index

Most JavaScript built-in objects, such as arrays and strings, have some useful methods that can be used to check for the presence of an item in the array or a substring within the string. Here are some of those methods:

• Array.indexOf()
• Array.lastIndexOf()
• Array.findIndex()
• String.indexOf()
• String.lastIndexOf()
• String.search()

These methods all return the zero-based index of the item or substring, if it is found; otherwise, they return -1. For example:

const numbers = [1, 3, 5, 7, 9];
 
console.log(numbers.indexOf(5)); // 2
console.log(numbers.indexOf(8)); // -1

If we are not interested in the index of the found item or substring, we could choose to work with a boolean value instead, such that -1 becomes false for items or substrings not found, and every other value becomes true. Here is what that will look like:

function foundIndex (index) {
  return Boolean(~index);
}

In the above code snippet, the ~ operator, when used on -1, evaluates to 0, which is a falsy value. Hence, using Boolean() to cast a falsy value to a boolean will return false. For every other index value, true is returned. Thus, the previous code snippet can be modified as follows:

const numbers = [1, 3, 5, 7, 9];
 
console.log(foundIndex(numbers.indexOf(5))); // true
console.log(foundIndex(numbers.indexOf(8))); // false

Bitwise AND (&)

The & operator performs an AND operation on each pair of corresponding bits of its operands. The & operator returns 1 only if both bits are 1; otherwise, it returns 0. Thus, the result of an AND operation is the equivalent of multiplying each pair of corresponding bits.

For a pair of bits, here are the possible values of an AND operation.

(0 & 0) === 0     // 0 x 0 = 0
(0 & 1) === 0     // 0 x 1 = 0
(1 & 0) === 0     // 1 x 0 = 0
(1 & 1) === 1     // 1 x 1 = 1

Turning off bits

The & operator is commonly used in bit masking applications to ensure that certain bits are turned off for a given sequence of bits. This is based on the fact that for any bit A:

• (A & 0 = 0) — The bit is always turned off by a corresponding 0 bit.
• (A & 1 = A) — The bit remains unchanged when paired with a corresponding 1 bit.

For example, say we have an 8-bit integer, and we want to ensure that the first 4 bits are turned off (set to 0). The & operator can be used to achieve this as follows:

• First, create a bit mask whose effect will be to turn off the first 4 bits of an 8-bit integer. That bit mask will be 0b11110000. Note that the first 4 bits of the bit mask are set to 0, while every other bit is set to 1.
• Next, perform an & operation using the 8-bit integer and the created bit mask:

const mask = 0b11110000;
 
// 222 => 11011110
 
// (222 & mask)
// ------------
// 11011110
// & 11110000
// ------------
// = 11010000
// ------------
// = 208 (decimal)
 
console.log(222 & mask); // 208

Checking for set bits

The & operator has some other useful bit masking applications. One such application is in determining whether one or more bits are set for a given sequence of bits. For example, say we want to check if the fifth bit is set for a given decimal number. Here is how we can use the & operator to do that:

• First, create a bit mask that will be used to check whether the target bits (fifth bit, in this case) are set to 1. Every bit on the bit mask is set to 0 except the bits at the target positions, which are set to 1. The binary number literal can be used to easily achieve this:

const mask = 0b10000;

• Next, perform an & operation using the decimal number and the bit mask as operands, and compare the result with the bit mask. If all the target bits are set for the decimal number, the result of the & operation will be equal to the bit mask. Note that the 0 bits in the bit mask will effectively turn off the corresponding bits in the decimal number, since A & 0 = 0.

// 34 => 100010
// (34 & mask) => (100010 & 010000) = 000000
console.log((34 & mask) === mask); // false
 
// 50 => 110010
// (50 & mask) => (110010 & 010000) = 010000
console.log((50 & mask) === mask); // true

Even or odd

The use of the & operator in checking for set bits for a decimal number can be extended to check whether a given decimal number is even or odd. To achieve this, 1 is used as the bit mask (to determine whether the first bit or rightmost bit is set).

For integers, the least significant bit (first bit or rightmost bit) can be used to determine whether the number is even or odd. If the least significant bit is turned on (set to 1), the number is odd; otherwise, the number is even.

function isOdd (int) {
  return (int & 1) === 1;
}
 
function isEven (int) {
  return (int & 1) === 0;
}
 
console.log(isOdd(34)); // false
console.log(isOdd(-63)); // true
console.log(isEven(-12)); // true
console.log(isEven(199)); // false

Useful identities

Before proceeding to the next operator, here are some useful identities for & operations (for any signed 32-bit integer A):

(A & 0) === 0
(A & ~A) === 0
(A & A) === A
(A & -1) === A

Bitwise OR (|)

The | operator performs an OR operation on each pair of corresponding bits of its operands. The | operator returns 0 only if both bits are 0; otherwise, it returns 1.

For a pair of bits, here are the possible values of an OR operation:

(0 | 0) === 0
(0 | 1) === 1
(1 | 0) === 1
(1 | 1) === 1

Turning on bits

In bit masking applications, the | operator can be used to ensure that certain bits in a sequence of bits are turned on (set to 1). This is based on the fact that for any given bit A:

• (A | 0 = A) — The bit remains unchanged when paired with a corresponding 0 bit.
• (A | 1 = 1) — The bit is always turned on by a corresponding 1 bit.

For example, say we have an 8-bit integer and we want to ensure that all the even-position bits (second, fourth, sixth, eighth) are turned on (set to 1). The | operator can be used to achieve this as follows:

• First, create a bit mask whose effect will be to turn on every even-positioned bit of an 8-bit integer. That bit mask will be 0b10101010. Note that the even-positioned bits of the bit mask are set to 1, while every other bit is set to 0.
• Next, perform an | operation using the 8-bit integer and the created bit mask:

const mask = 0b10101010;
 
// 208 => 11010000
 
// (208 | mask)
// ------------
// 11010000
// | 10101010
// ------------
// = 11111010
// ------------
// = 250 (decimal)
 
console.log(208 | mask); // 250

Useful identities

Before proceeding to the next operator, here are some useful identities for | operations (for any signed 32-bit integer A):

(A | 0) === A
(A | ~A) === -1
(A | A) === A
(A | -1) === -1

Bitwise XOR (^)

The ^ operator performs an XOR (exclusive-OR) operation on each pair of corresponding bits of its operands. The ^ operator returns 0 if both bits are the same (either 0 or 1); otherwise, it returns 1.

For a pair of bits, here are the possible values of an XOR operation.

(0 ^ 0) === 0
(0 ^ 1) === 1
(1 ^ 0) === 1
(1 ^ 1) === 0

Toggling bits

In bit masking applications, the ^ operator is commonly used for toggling or flipping certain bits in a sequence of bits. This is based on the fact that for any given bit A:

• The bit remains unchanged when paired with a corresponding 0 bit.
• (A ^ 0 = A)
• The bit is always toggled when paired with a corresponding 1 bit.
• (A ^ 1 = 1) — if A is 0
• (A ^ 1 = 0) — if A is 1

For example, say we have an 8-bit integer and we want to ensure that every bit is toggled except the least significant (first) and most significant (eighth) bits. The ^ operator can be used to achieve this as follows:

• First, create a bit mask whose effect will be to toggle every bit of an 8-bit integer except the least significant and most significant bits. That bit mask will be 0b01111110. Note that the bits to be toggled are set to 1, while every other bit is set to 0.
• Next, perform an ^ operation using the 8-bit integer and the created bit mask:

const mask = 0b01111110;
 
// 208 => 11010000
 
// (208 ^ mask)
// ------------
// 11010000
// ^ 01111110
// ------------
// = 10101110
// ------------
// = 174 (decimal)
 
console.log(208 ^ mask); // 174

Useful identities

Before proceeding to the next operator, here are some useful identities for ^ operations (for any signed 32-bit integer A):

(A ^ 0) === A
(A ^ ~A) === -1
(A ^ A) === 0
(A ^ -1) === ~A

From the identities listed above, it is evident that an XOR operation on A and -1 is equivalent to a NOT operation on A. Hence, the foundIndex() function from before can also be written like so:

function foundIndex (index) {
  return Boolean(index ^ -1);
}

Left shift (<<)

The left shift (<<) operator takes two operands. The first operand is an integer, while the second operand is the number of bits of the first operand to be shifted to the left. Zero (0) bits are shifted in from the right, while the excess bits that have been shifted off to the left are discarded.

For example, consider the integer 170. Let’s say we want to shift three bits to the left. We can use the << operator as follows:

// 170 => 00000000000000000000000010101010
 
// 170 << 3
// --------------------------------------------
//    (000)00000000000000000000010101010(***)
// --------------------------------------------
//  = (***)00000000000000000000010101010(000)
// --------------------------------------------
//  = 00000000000000000000010101010000
// --------------------------------------------
//  = 1360 (decimal)
 
console.log(170 << 3); // 1360

The left shift bitwise operator (<<) can be defined using the following JavaScript expressions:

(A << B) => A * (2 ** B) => A * Math.pow(2, B)

Hence, looking back at the previous example:

(170 << 3) => 170 * (2 ** 3) => 170 * 8 => 1360

Color conversion: RGB to hex

One very useful application of the left shift (<<) operator is converting colors from an RGB representation to a hexadecimal representation.

The color value for each component of an RGB color is between 0 - 255. Simply put, each color value can be represented perfectly by 8 bits.

  0 => 0b00000000 (binary) => 0x00 (hexadecimal)
255 => 0b11111111 (binary) => 0xff (hexadecimal)

Thus, the color itself can be perfectly represented by 24 bits (8 bits each for red, green, and blue components). The first 8 bits starting from the right will represent the blue component, the next 8 bits will represent the green component, and the 8 bits after that will represent the red component.

(binary) => 11111111 00100011 00010100
 
   (red) => 11111111 => ff => 255
 (green) => 00100011 => 23 => 35
  (blue) => 00010100 => 14 => 20
 
   (hex) => ff2314

Now that we understand how to represent the color as a 24-bit sequence, let’s see how we can compose the 24 bits of the color from the values of the color’s individual components. Let’s say we have a color represented by rgb(255, 35, 20). Here is how we can compose the bits:

  (red) => 255 => 00000000 00000000 00000000 11111111
(green) =>  35 => 00000000 00000000 00000000 00100011
 (blue) =>  20 => 00000000 00000000 00000000 00010100
 
// Rearrange the component bits and pad with zeroes as necessary
// Use the left shift operator
 
  (red << 16) => 00000000 11111111 00000000 00000000
 (green << 8) => 00000000 00000000 00100011 00000000
       (blue) => 00000000 00000000 00000000 00010100
 
// Combine the component bits together using the OR (|) operator
// ( red << 16 | green << 8 | blue )
 
      00000000 11111111 00000000 00000000
    | 00000000 00000000 00100011 00000000
    | 00000000 00000000 00000000 00010100
// -----------------------------------------
      00000000 11111111 00100011 00010100
// -----------------------------------------

Now that the procedure is pretty clear, here is a simple function that takes the RGB values of a color as an input array and returns the corresponding hexadecimal representation of the color based on the above procedure:

function rgbToHex ([red = 0, green = 0, blue = 0] = []) {
  return `#${(red << 16 | green << 8 | blue).toString(16)}`;
}

Sign-propagating right shift (>>)

The sign-propagating right shift (>>) operator takes two operands. The first operand is an integer, while the second operand is the number of bits of the first operand to be shifted to the right.

The excess bits that have been shifted off to the right are discarded, whereas copies of the sign bit (leftmost bit) are shifted in from the left. As a result, the sign of the integer is always preserved, hence the name sign-propagating right shift.

For example, consider the integers 170 and -170. Let’s say we want to shift three bits to the right. We can use the >> operator as follows:

//  170 => 00000000000000000000000010101010
// -170 => 11111111111111111111111101010110
 
// 170 >> 3
// --------------------------------------------
//    (***)00000000000000000000000010101(010)
// --------------------------------------------
//  = (000)00000000000000000000000010101(***)
// --------------------------------------------
//  = 00000000000000000000000000010101
// --------------------------------------------
//  = 21 (decimal)
 
// -170 >> 3
// --------------------------------------------
//    (***)11111111111111111111111101010(110)
// --------------------------------------------
//  = (111)11111111111111111111111101010(***)
// --------------------------------------------
//  = 11111111111111111111111111101010
// --------------------------------------------
//  = -22 (decimal)
 
console.log(170 >> 3); // 21
console.log(-170 >> 3); // -22

The sign-propagating right shift bitwise operator (>>) can be described by the following JavaScript expressions:

(A >> B) => Math.floor(A / (2 ** B)) => Math.floor(A / Math.pow(2, B))

Thus, looking back at the previous example:

(170 >> 3) => Math.floor(170 / (2 ** 3)) => Math.floor(170 / 8) => 21
(-170 >> 3) => Math.floor(-170 / (2 ** 3)) => Math.floor(-170 / 8) => -22

Color extraction

One very good application of the right shift (>>) operator is extracting RGB color values from a color. When the color is represented in RGB, it is very easy to distinguish between the red, green, and blue color component values. However, it will take a bit more effort for a color represented as hexadecimal.

In the previous section, we saw the procedure for composing the bits of a color from the bits of its individual components (red, green, and blue). If we work through that procedure backwards, we will be able to extract the values of the individual components of the color. Let’s give that a shot.

Let’s say we have a color represented by the hexadecimal notation #ff2314. Here is the signed 32-bit representation of the color:

(color) => ff2314 (hexadecimal) => 11111111 00100011 00010100 (binary)
 
// 32-bit representation of color
00000000 11111111 00100011 00010100

To get the individual components, we will right-shift the color bits by multiples of 8 as necessary until we get the target component bits as the first 8 bits from the right. Since the most significant bit of the 32 bits for the color is 0, we can safely use the sign-propagating right shift (>>) operator for this.

color => 00000000 11111111 00100011 00010100
 
// Right shift the color bits by multiples of 8
// Until the target component bits are the first 8 bits from the right
 
  red => color >> 16
      => 00000000 11111111 00100011 00010100 >> 16
      => 00000000 00000000 00000000 11111111
 
green => color >> 8
      => 00000000 11111111 00100011 00010100 >> 8
      => 00000000 00000000 11111111 00100011
 
 blue => color >> 0 => color
      => 00000000 11111111 00100011 00010100

Now that we have the target component bits as the first 8 bits from the right, we need a way to mask out every other bits except the first 8 bits. That brings us back to the AND (&) operator. Remember that the & operator can be used to ensure that certain bits are turned off.

mask => 00000000 00000000 00000000 11111111
    => 0b11111111 (binary)
    => 0xff (hexadecimal)

With the bit mask ready, we can carry out an AND (&) operation on each of the results from the previous right-shifting operations using the bit mask to extract the target component bits.

 red => color >> 16 & 0xff
     =>  00000000 00000000 00000000 11111111
     => & 00000000 00000000 00000000 11111111
     => = 00000000 00000000 00000000 11111111
     =>  255 (decimal)
green => color >> 8 & 0xff

     =>  00000000 00000000 11111111 00100011

     => & 00000000 00000000 00000000 11111111

     => = 00000000 00000000 00000000 00100011

     =>  35 (decimal)
 blue => color & 0xff

     =>  00000000 11111111 00100011 00010100

     => & 00000000 00000000 00000000 11111111

     => = 00000000 00000000 00000000 00010100

     =>  20 (decimal)

Based on the above procedure, here is a simple function that takes a hex color string (with six hexadecimal digits) as input and returns the corresponding array of RGB color component values.

function hexToRgb (hex) {

 hex = hex.replace(/^#?([0-9a-f]{6})$/i, ‘$1’);

 hex = Number(0x${hex});

 return [

   hex >> 16 & 0xff, // red

   hex >> 8 & 0xff, // green

   hex & 0xff       // blue

 ];

}

Zero-fill right shift (>>>)

The zero-fill right shift (>>>) operator behaves pretty much like the sign-propagating right shift (>>) operator. However, the key difference is in the bits that are shifted in from the left.

As the name implies, 0 bits are always shifted in from the left. As a result, the >>> operator always returns an unsigned 32-bit integer since the sign bit of the resulting integer is always 0. For positive integers, both >> and >>> will always return the same result.

For example, consider the integers 170 and -170. Let’s say we want to shift 3 bits to the right, we can use the >>> operator as follows:

// 170 => 00000000000000000000000010101010

// -170 => 11111111111111111111111101010110

// 170 >>> 3

// --------------------------------------------

//   ()00000000000000000000000010101(010)

// --------------------------------------------

// = (000)00000000000000000000000010101()

// --------------------------------------------

// = 00000000000000000000000000010101

// --------------------------------------------

// = 21 (decimal)
// -170 >>> 3

// --------------------------------------------

//   ()11111111111111111111111101010(110)

// --------------------------------------------

// = (000)11111111111111111111111101010()

// --------------------------------------------

// = 00011111111111111111111111101010

// --------------------------------------------

// = 536870890 (decimal)
console.log(170 >>> 3); // 21

console.log(-170 >>> 3); // 536870890

Config flags

Before we wrap up this tutorial, let’s consider another pretty common application of bitwise operators and bit masking: config flags.

Let’s say we have a function that accepts a couple of boolean options that can be used to control how the function runs or the kind of value it returns. One possible way to create this function is by passing all the options as arguments to the function, probably with some default values, like so:

function doSomething (optA = true, optB = true, optC = false, optD = true, …) {

 // something happens here…

}

Surely, this isn’t so convenient. Here are two cases in which this approach starts getting quite problematic:

• Imagine that we have more than 10 boolean options. We just can’t define our function with that many parameters.
• Imagine that we just want to specify a different value for the fifth and ninth options and leave the others with their default values. We will need to call the function, passing the default values as arguments for all the other options while passing the desired values for the fifth and ninth options.

One way to solve the issues with the previous approach would be to use an object for the config options, like so:

const defaultOptions = {

 optA: true,

 optB: true,

 optC: false,

 optD: true,

 …

};

function doSomething (options = defaultOptions) {

 // something happens here…

}

This approach is very elegant, and you’ve most likely seen it used, or even used it yourself at some point or another. With this approach, however, the options argument will always be an object, which can be considered overkill for just configuration options.

If all the options take boolean values, we could use an integer instead of an object to represent the options. In this case, certain bits of the integer will be mapped to designated options. If a bit is turned on (set to 1), the designated option’s value is true;otherwise, it is false.

We can demonstrate this approach using a simple example. Let’s say we have a function that normalizes the items of an array list containing numbers and returns the normalized array. The returned array can be controlled by three options, namely:

• fraction: divides each item of the array by the maximum item in the array
• unique: removes duplicate items from the array
• sorted: sorts the items of the array from lowest to highest

We can use an integer with 3 bits to represent these options, each bit being mapped to an option. The following code snippet shows the option flags:

const LIST_FRACTION = 0x1; // (001)

const LIST_UNIQUE = 0x2;  // (010)

const LIST_SORTED = 0x4;  // (100)

To activate one or more options, the | operator can be used to combine the corresponding flags as necessary. For example, we can create a flag that activates all the options, as follows:

const LIST_ALL = LIST_FRACTION | LIST_UNIQUE | LIST_SORTED; // (111)

Again, let’s say we want only the fraction and sorted options to be activated by default. We could use the | operator again, as follows:

const LIST_DEFAULT = LIST_FRACTION | LIST_SORTED; // (101)

While this doesn’t look bad with just three options, it tends to become quite messy when there are so many options, and a lot of them are required to be activated by default. In such a scenario, a better approach will be to deactivate the unwanted options using the ^ operator:

const LIST_DEFAULT = LIST_ALL ^ LIST_UNIQUE; // (101)

Here, we have the LIST_ALL flag that activates all the options. We then use the ^ operator to deactivate the unique option, leaving other options activated as required.

Now that we have the option flags ready, we can go ahead and define the normalizeList() function:

function normalizeList (list, flag = LIST_DEFAULT) {

 if (flag & LIST_FRACTION) {

   const max = Math.max(…list);

   list = list.map(value => Number((value / max).toFixed(2)));

 }

 if (flag & LIST_UNIQUE) {

   list = […new Set(list)];

 }

 if (flag & LIST_SORTED) {

   list = list.sort((a, b) => a - b);

 }

 return list;

}

To check if an option is activated, we use the & operator to check if the corresponding bit of the option is turned on (set to 1). The & operation is carried out with the flag argument passed to the function and the corresponding flag for the option, as demonstrated in the following code snippet:

// Checking if the unique option is activated

// (flag & LIST_UNIQUE) === LIST_UNIQUE (activated)

// (flag & LIST_UNIQUE) === 0 (deactivated)

flag & LIST_UNIQUE

Conclusion

Hey, I’m really glad that you made it to the end of this article despite the long read time, and I strongly hope that you learned a thing or two while reading it. Thanks for your time.

JavaScript bitwise operators, though sparingly used, have some pretty interesting use cases, as we’ve seen in this article. I strongly hope that the insights you’ve gotten in the course of reading this article will find expression in your day-to-day coding from now on.

Thanks for reading ❤

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ JavaScript Bootcamp - Build Real World Applications

☞ The Web Developer Bootcamp

☞ JavaScript Programming Tutorial - Full JavaScript Course for Beginners

☞ New ES2019 Features Every JavaScript Developer Should Know

☞ Best JavaScript Frameworks, Libraries and Tools to Use in 2019

☞ React vs Angular vs Vue.js by Example

☞ Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

☞ Creating Web Animations with Anime.js

☞ Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

☞ Do we still need JavaScript frameworks?

#javascript #web-development

What is GEEK

Buddha Community

JavaScript compound assignment operators

JavaScript is unarguablly one of the most common things you’ll learn when you start programming for the web. Here’s a small post on JavaScript compound assignment operators and how we use them.

The compound assignment operators consist of a binary operator and the simple assignment operator.

The binary operators, work with two operands. For example a+b where + is the operator and the a, b are operands. Simple assignment operator is used to assign values to a variable(s).

It’s quite common to modify values stored in variables. To make this process a little quicker, we use compound assignment operators.

They are:

• +=
• -+
• *=
• /=

You can also check my video tutorial compound assignment operators.

Let’s consider an example. Suppose price = 5 and we want to add ten more to it.

var price = 5;
price = price + 10;

We added ten to price. Look at the repetitive price variable. We could easily use a compound += to reduce this. We do this instead.

price += 5;

Awesome. Isn’t it? What’s the value of price now? Practice and comment below. If you don’t know how to practice check these lessons.

Lets bring down the price by 5 again and display it.
We use console.log command to display what is stored in the variable. It is very help for debugging.
Debugging let’s you find errors or bugs in your code. More on this later.

price -= 5;
console.log(price);

Lets multiply price and show it.

price *=5;
console.log(price);

and finally we will divide it.

price /=5;
console.log(price);

If you have any doubts, comment below.

#javascript #javascript compound assignment operators #javascript binary operators #javascript simple assignment operator #doers javascript

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

How to Implement Bitwise Operations On Images Using OpenCV?

OpenCV is an image processing library created by intel which includes various packages and several functions in it. OpenCV is used to solve many problems in computer vision and machine learning applications and due to its large community, it is getting updated day by day. OpenCV can be implemented in C++, Python, Java programming languages, and different platforms like Linux, Windows, macOS.

In this article, we will demonstrate one of the interesting applications of OpenCV in performing bitwise operations on images.

Topics covered in this article

• Bitwise Operators in Computer Vision
• Bitwise AND
• Bitwise OR
• Bitwise NOT
• Bitwise XOR

Bitwise Operators in Computer Vision

Bitwise operations can be used in image manipulations. These bitwise techniques are used in many computer vision applications like for creating masks of the image, adding watermarks to the image and it is possible to create a new image using these bitwise operators. These operations work on the individual pixels in the image to give accurate results compared with other morphing techniques in OpenCV.

---

Using the below code snippet, we will create two images – image1, image2 as input images on which the bitwise operations will be performed.

import numpy as np

import cv2

from google.colab.patches import cv2_imshow

image1 = np.zeros((400, 400), dtype="uint8")

cv2.rectangle(image1, (100, 100), (250, 250), 255, -1)

cv2_imshow(image1)

image2 = np.zeros((400, 400), dtype="uint8")

cv2.circle(image2, (150, 150), 90, 255, -1)

cv2_imshow(image2)

---

#developers corner #bitwise and #bitwise not #bitwise or #bitwise xor #opencv image processing

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers