The exponentiation operator (**)

Author：Chuan Chen 阅读数：7111人阅读分类： JavaScript

ECMAScript 7 introduced the exponentiation operator (**), providing a more concise way to perform power calculations. This feature simplifies code that previously required calling Math.pow(), while also supporting chained operations similar to other operators.

Basic Syntax and Usage

The basic syntax of the exponentiation operator is base ** exponent, representing base raised to the power of exponent. Its precedence is higher than multiplication and division (* and /) but lower than unary operators (e.g., + and -).

// Calculate 2 to the power of 3
console.log(2 ** 3); // Output: 8

// Equivalent to Math.pow(2, 3)
console.log(Math.pow(2, 3)); // Output: 8

Operator Precedence

The exponentiation operator is right-associative, meaning that when multiple exponentiation operators appear consecutively, they are evaluated from right to left. This differs from most left-associative operators (e.g., addition, subtraction, multiplication, and division).

// Right-associativity example
console.log(2 ** 3 ** 2); // Output: 512
// Equivalent to 2 ** (3 ** 2), not (2 ** 3) ** 2

// Comparison with left-associative multiplication
console.log(2 * 3 * 2); // Output: 12

Interaction with Other Operators

The exponentiation operator can be combined with other operators, but precedence must be considered. Parentheses can be used to clarify the order of operations when necessary.

// Without parentheses
console.log(2 ** 3 + 1); // Output: 9 (2**3 is calculated first, then 1 is added)
console.log(2 ** (3 + 1)); // Output: 16 (3+1 is calculated first, then 2**4)

// With unary operators
console.log(-2 ** 2); // Syntax error, parentheses are required
console.log((-2) ** 2); // Output: 4

Assignment Operator Form

ECMAScript 7 also introduced the exponentiation assignment operator **=, which conveniently performs a power operation and assigns the result to a variable.

let num = 3;
num **= 2; // Equivalent to num = num ** 2
console.log(num); // Output: 9

// Combined with other operations
let x = 2;
x **= 3 **= 2; // Evaluated from right to left
console.log(x); // Output: 262144 (3**2=9, 2**9=512)

Special Value Handling

The exponentiation operator handles special values (e.g., Infinity, NaN) in the same way as Math.pow().

// Negative power of 0
console.log(0 ** -1); // Output: Infinity

// Fractional power of a negative number
console.log((-1) ** 0.5); // Output: NaN

// Operations with Infinity
console.log(Infinity ** 0); // Output: 1
console.log(1 ** Infinity); // Output: 1

Practical Use Cases

The exponentiation operator is particularly useful in scenarios requiring quick power calculations, such as geometric computations, animation effects, and physics simulations.

// Calculate the area of a circle
const radius = 5;
const area = Math.PI * radius ** 2;
console.log(area); // Output: 78.53981633974483

// Easing function in animations
function easeInQuad(t) {
  return t ** 2;
}
console.log(easeInQuad(0.5)); // Output: 0.25

Browser Compatibility

Although the exponentiation operator is an ECMAScript 7 feature, most modern browsers and Node.js environments already support it. In unsupported environments, tools like Babel can be used for transpilation.

// Transpiled code
// 2 ** 3 would be transpiled to Math.pow(2, 3)

Performance Considerations

In most JavaScript engines, the performance of the exponentiation operator ** is comparable to Math.pow(), but specific implementations may vary. For performance-sensitive scenarios, benchmarking is recommended.

// Simple performance test
const start1 = performance.now();
for (let i = 0; i < 1000000; i++) {
  2 ** 3;
}
const end1 = performance.now();

const start2 = performance.now();
for (let i = 0; i < 1000000; i++) {
  Math.pow(2, 3);
}
const end2 = performance.now();

console.log(`** operator time: ${end1 - start1}ms`);
console.log(`Math.pow time: ${end2 - start2}ms`);