JavaScript ES2016

Small but useful additions to JavaScript

📈 What is ES2016?

ES2016 was a smaller release that added two important features: the exponentiation operator and Array.includes() method. These additions made JavaScript code more readable and efficient.


// ES2016 introduced the exponentiation operator
const result = 2 ** 3; // 2 to the power of 3
console.log(result); // 8

// And Array.includes() method
const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
                                    

Output:

8
true

ES2016 Features

Exponentiation Operator

Power calculations made easy

2 ** 3 // equals 8
🔍

Array.includes()

Check if array contains a value

arr.includes("value")

🔹 Exponentiation Operator (**))

A cleaner way to calculate powers:

// Old way using Math.pow()
const oldWay = Math.pow(2, 3);
const oldWay2 = Math.pow(5, 2);

// New way using ** operator
const newWay = 2 ** 3;
const newWay2 = 5 ** 2;

console.log("2^3 =", newWay);     // 8
console.log("5^2 =", newWay2);    // 25

// Works with variables too
const base = 3;
const exponent = 4;
const result = base ** exponent;
console.log(`${base}^${exponent} =`, result); // 81

// Can be used in expressions
const area = (2 ** 2) * Math.PI; // Circle area with radius 2
console.log("Circle area:", area.toFixed(2));

Output:

2^3 = 8
5^2 = 25
3^4 = 81
Circle area: 12.57

🔹 Array.includes() Method

Check if an array contains a specific value:

const colors = ["red", "green", "blue", "yellow"];

// Check if array includes specific values
console.log(colors.includes("red"));    // true
console.log(colors.includes("purple")); // false

// Case sensitive
const names = ["John", "jane", "Bob"];
console.log(names.includes("jane"));    // true
console.log(names.includes("Jane"));    // false (different case)

// Works with numbers too
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3));       // true
console.log(numbers.includes(6));       // false

// Old way (before ES2016)
const hasRed = colors.indexOf("red") !== -1;
console.log("Old way result:", hasRed); // true

// New way is much cleaner
const hasRedNew = colors.includes("red");
console.log("New way result:", hasRedNew); // true

Output:

true
false
true
false
true
false
Old way result: true
New way result: true

🔹 Practical Examples

Real-world usage of ES2016 features:

// Example 1: Password strength checker
function checkPasswordStrength(password) {
    const minLength = 8;
    const hasUpperCase = /[A-Z]/.test(password);
    const hasLowerCase = /[a-z]/.test(password);
    const hasNumbers = /\d/.test(password);
    
    const strength = (hasUpperCase ? 1 : 0) + 
                    (hasLowerCase ? 1 : 0) + 
                    (hasNumbers ? 1 : 0);
    
    // Using exponentiation operator
    const score = (password.length >= minLength ? 1 : 0) * (2 ** strength);
    
    return score >= 4 ? "Strong" : score >= 2 ? "Medium" : "Weak";
}

console.log(checkPasswordStrength("MyPass123")); // Strong

// Example 2: Shopping cart checker
const availableItems = ["laptop", "mouse", "keyboard", "monitor"];
const cartItems = ["laptop", "headphones", "mouse"];

cartItems.forEach(item => {
    if (availableItems.includes(item)) {
        console.log(`✓ ${item} is available`);
    } else {
        console.log(`✗ ${item} is not available`);
    }
});

Output:

Strong
✓ laptop is available
✗ headphones is not available
✓ mouse is available

🔹 Browser Support

ES2016 features are well supported in modern browsers:

Exponentiation Operator (**):

  • Chrome: 52+
  • Firefox: 52+
  • Safari: 10.1+
  • Edge: 14+

Array.includes():

  • Chrome: 47+
  • Firefox: 43+
  • Safari: 9+
  • Edge: 14+

🧠 Test Your Knowledge

What does 3 ** 2 equal?