# 25 Unnoticeable Features of JavaScript

Often, as developers, we write similar types of code, falling into a pattern that, while comfortable, can sometimes feel mundane.

However, the world of JavaScript is vast, filled with advanced features that, when discovered and used, can transform our development work into something much more exciting and fulfilling.

In this guide, we will unveil 25 advanced JavaScript features that promise not just to reveal these hidden gems but also to elevate your mastery of JavaScript to unprecedented levels.

Let’s embark on this journey of discovery together, integrating JavaScript’s advanced capabilities into our coding repertoire to create more efficient, elegant, and powerful applications. It’s time to infuse our development tasks with a newfound sense of fun and creativity.

## 1 — Labels for Loop and Block Statements

JavaScript allows labeling loops and block statements, enabling precise control with `break` and `continue`.

```javascript
outerLoop: for (let i = 0; i < 5; i++) {
    innerLoop: for (let j = 0; j < 5; j++) {
        if (i === 2 && j === 2) break outerLoop;
        console.log(`i=${i}, j=${j}`);
    }
}
```

## 2 — Comma Operator

The comma operator allows multiple expressions to be evaluated in a sequence, returning the last expression’s result.

```javascript
let a = (1, 2, 3); // a = 3
```

## 3 — Tagged Template Literals Beyond String Formatting

Beyond creating strings, tagged templates can be used for DSLs (Domain Specific Languages), sanitizing user input, or localization.

```javascript
function htmlEscape(strings, ...values) {
    // Example implementation
}
```

## 4 — Function Declarations Inside Blocks

Though not recommended, JavaScript allows function declarations inside blocks, which can lead to different behaviors in non-strict mode.

```javascript
if (true) {
    function test() { return "Yes"; }
} else {
    function test() { return "No"; }
}
test(); // Behavior varies depending on the environment
```

## 5 — void Operator

The `void` operator evaluates any expression and then returns undefined, useful for hyperlinks with JavaScript.

```javascript
void (0); // returns undefined
```

## 6 — Bitwise Operators for Quick Math

Bitwise operators, like `|` and `&`, can perform some math operations much faster, though at the cost of readability.

```javascript
let floor = 5.95 | 0; // Fast way to do Math.floor(5.95)
```

## 7 — with Statement for Working with Objects

The `with` statement extends the scope chain for a block, allowing you to write shorter code. However, it's not recommended due to readability and performance concerns.

```javascript
with(document.getElementById("myDiv").style) {
    background = "black";
    color = "white";
}
```

[![Skillshare Course on JavaScript Development by Christian Heilmann](https://cdn-images-1.medium.com/max/1600/1*j_AZzqiI5SZrBANMQ3bGEQ.png align="left")](https://skillshare.eqcm.net/QyLx6z)

*Sharpen your JavaScript skills with Christian Heilmann’s — start writing cleaner, faster, and better code today!*

## 8 — Automatic Semicolon Insertion (ASI)

JavaScript tries to fix missing semicolons, but relying on it can lead to unexpected results.

```javascript
let x = 1
let y = 2
[x, y] = [y, x] // Without proper semicolons, this could fail
```

## 9 — in Operator for Property Checking

Check if an object has a property without accessing its value directly.

```javascript
"toString" in {}; // true
```

## 10 — instanceof vs. typeof

`instanceof` checks the prototype chain, while `typeof` returns a string indicating the type of the unevaluated operand.

```javascript
function Person() {}
let person = new Person();
console.log(person instanceof Person); // true
console.log(typeof person); // "object"
```

## 11 — Block-Level Functions in ES6

[ES6](https://www.webdevstory.com/mastering-es6-for-react/) allows functions to be block-scoped, similar to `let` and `const`.

```javascript
{
    function test() {
        return "block scoped";
    }
}
console.log(typeof test); // "function" in non-strict mode, "undefined" in strict mode
```

## 12 — Debugger Statement

Use the `debugger` statement to pause execution and open the debugger.

```javascript
function problematicFunction() {
    debugger; // Execution pauses here if the developer tools are open
}
```

## **13 —** `eval()` for Dynamic Code Execution

`eval` executes a string as JavaScript code but comes with significant security and performance implications.

```javascript
eval("let a = 1; console.log(a);"); // 1
```

[![InMotion Hosting Promotional Web Hosting Plans](https://cdn-images-1.medium.com/max/1600/1*BHTRRqnvX4ZN4Kyt45kCwQ.png align="left")](https://partners.inmotionhosting.com/k0EPWv)

*Find the right hosting solution for your projects with InMotion Hosting’s range of plans, from shared to VPS, and dedicated servers.*

## **14 — Non-standard** `__proto__` Property

While `__proto__` is widely supported for setting an object's prototype, it's non-standard. Use `Object.getPrototypeOf()` and `Object.setPrototypeOf()` instead.

```javascript
let obj = {};
obj.__proto__ = Array.prototype; // Not recommended
```

## 15 — document.write() for Direct Document Editing

`document.write()` directly writes to the HTML document, but using it can have negative implications, especially for loading external scripts synchronously.

```javascript
document.write("<h1>Hello World!</h1>");
```

## 16 — Chained Assignment

JavaScript allows for chained assignments, which can assign a single value to multiple variables in one statement.

```javascript
let a, b, c;
a = b = c = 5; // Sets all three variables to the value of 5
```

## 17 — The in Operator for Property Existence

The `in` operator checks if a property exists within an object without accessing the property value.

```javascript
const car = {
    make: 'Toyota',
    model: 'Corolla'
};
console.log('make' in car); // true
```

## 18 — Object Property Shorthand

When assigning properties to an object, if the property name is the same as the variable name, you can use the shorthand.

```javascript
const name = 'Alice';
const age = 25;
const person = { name, age };
```

## 19 — Default Parameter Values and Destructuring Combined

You can combine default parameter values with destructuring in function parameters for more readable and flexible function definitions.

```javascript
function createPerson({ name = 'Anonymous', age = 0 } = {}) {
   console.log(`Name: ${name}, Age: ${age}`);
}
createPerson({ name: 'Alice' }); // Name: Alice, Age: 0
createPerson(); // Name: Anonymous, Age: 0
```

## **20 — Using** `Array.fill()` to Initialize Arrays

Quickly initialize an array with a specific value using the `fill()` method.

```javascript
const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0]
```

[![Ergonomic workspace setup with a laptop on a desk illuminated by a LED desk lamp indicating 500 lux brightness at 35.4 inches, surrounded by books and office supplies.](https://cdn.hashnode.com/res/hashnode/image/upload/v1710336874817/03813d24-7e27-41ad-b789-39f31b03c3d5.jpeg align="center")](https://amzn.to/3T9OtPg)

*Optimize your workspace for productivity and comfort with adjustable LED lighting, creating an ideal environment for focused work sessions.*

## **21 —** `Array.includes()` for Presence Check

Easily check for the presence of an element within an array with the `includes()` method, which is more readable than using `indexOf()`.

```javascript
const fruits = ['apple', 'banana', 'mango'];
console.log(fruits.includes('banana')); // true
```

## 22 — Destructuring Aliases

When `destructuring` an object, you can assign properties to variables with different names using aliases.

```javascript
const obj = { x: 1, y: 2 };
const { x: newX, y: newY } = obj;
console.log(newX); // 1
```

## 23 — Nullish Coalescing Operator for Default Values

Use `??` to provide default values only when dealing with `null` or `undefined`, not other `falsy` values like

```javascript
const count = 0;
console.log(count ?? 10); // 0, because count is not null or undefined
```

## 24 — Dynamic Function Names

Create functions with dynamic names using computed property names in object literals.

```javascript
const dynamicName = 'func';
const obj = {
    [dynamicName]() {
        return 'Dynamic Function Name!';
    }
};
console.log(obj.func()); // "Dynamic Function Name!"
```

## 25 — Private Class Fields

Use the hash `#` prefix to define private fields in a class, which cannot be accessed from outside the class.

```javascript
class Counter {
    #count = 0;

    increment() {
        this.#count++;
    }

    getCount() {
        return this.#count;
    }
}
```

## Wrap Up

As we conclude our exploration of the 25 advanced JavaScript features, JavaScript’s arsenal is both vast and profoundly capable.

Each feature we’ve delved into opens up new avenues for solving coding challenges, akin to adding an innovative tool to our toolkit.

This not only enhances our ability to craft solutions creatively and efficiently but also underscores the dynamic versatility of JavaScript.

These advanced features spotlight the critical role of continuous learning in the realm of web development.

Embracing these nuances and integrating them into our daily coding practices allows us to refine our skills and contribute to the [evolution of web technologies](https://www.simplilearn.com/what-is-web-1-0-web-2-0-and-web-3-0-with-their-difference-article).

Remember, the path to [mastering JavaScript](https://www.webdevstory.com/javascript-essential-terms/) is a continuous journey, where every line of code presents an opportunity to uncover something extraordinary.

Let’s keep pushing the boundaries of what we can achieve with JavaScript, staying curious and open to the endless possibilities that lie ahead.

### **Support Our Tech Insights**

* [**Buy Me a Coffee**](https://www.buymeacoffee.com/mmainulhasan)
    
* [**PayPal**](https://www.paypal.com/donate/?hosted_button_id=GDUQRAJZM3UR8)
    

![Buy Me a Coffee and PayPal Logos](https://miro.medium.com/v2/resize:fit:574/0*mC2Lzxqxowumj_nJ.png align="left")