Name

JavaScript's name property appears across multiple contexts--from identifying functions to naming broadcast channels for cross-tab communication. Understanding how name works helps developers debug common errors and leverage browser APIs effectively.

This guide covers the name property in three key areas: functions, broadcast channels, and the errors that arise when name is accessed on undefined values. Master these concepts to write more robust JavaScript applications and avoid common runtime errors.

The Function.name Property

The name property of a Function instance returns the function's name as specified when it was created, or either anonymous or '' (an empty string) for functions created anonymously.

How Function Names Are Inferred

Named Function Declarations:

function greetUser() {
 return "Hello!";
}
console.log(greetUser.name); // "greetUser"

Named Function Expressions:

const sayHello = function helloMessage() {
 return "Hi there!";
};
console.log(sayHello.name); // "helloMessage"

Anonymous Function Expressions:

const anonymousFunc = function() {};
console.log(anonymousFunc.name); // ""

Arrow Functions:

const arrowFunc = () => {};
console.log(arrowFunc.name); // "arrowFunc"

The Read-Only Nature of Function.name

The name property is read-only and cannot be changed by the assignment operator:

function myFunction() {}
myFunction.name = "differentName";
console.log(myFunction.name); // Still "myFunction"

To modify a function's name, you would need to use Object.defineProperty() with appropriate descriptors.

The #name? Error: Understanding Property Access on Undefined

One of the most common errors developers encounter is the "#name?" error, which manifests as "TypeError: Cannot read properties of undefined (reading 'name')" or similar messages.

What Causes This Error

This error happens when you attempt to access a property on a variable or object that hasn't been properly initialized or doesn't exist. The error means you're accessing a property (often name) on undefined. Understanding these error patterns is essential for professional JavaScript development and building resilient applications.

Uninitialized Variables:

let currentUser;
console.log(currentUser.name);
// TypeError: Cannot read properties of undefined (reading 'name')

Function Return Values:

function getUser() {
 // Missing return statement
}
const user = getUser();
console.log(user.name);
// TypeError: Cannot read properties of undefined (reading 'name')

How to Fix #name? Errors

Use Optional Chaining:

const user = null;
console.log(user?.name); // undefined, no error

Add Null Checks:

const user = getUser();
if (user && user.name) {
 console.log(user.name);
}

Provide Default Values:

const user = getUser() || { name: 'Guest' };
console.log(user.name);

The BroadcastChannel API and Its name Property

The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to, allowing communication between different documents (in different windows, tabs, frames, or iframes) of the same origin.

Creating a BroadcastChannel

// Create a channel named 'settings_channel'
const settingsChannel = new BroadcastChannel('settings_channel');

// Create another channel with the same name (different context)
const sameChannel = new BroadcastChannel('settings_channel');

The BroadcastChannel.name Property

The name property returns a string that uniquely identifies the channel:

const channel = new BroadcastChannel('user_updates');
console.log(channel.name); // "user_updates"

Sending and Receiving Messages

// Sender
const channel = new BroadcastChannel('notifications');
channel.postMessage({ type: 'new_message', count: 3 });

// Receiver
const channel = new BroadcastChannel('notifications');
channel.onmessage = (event) => {
 console.log('Received:', event.data);
};

Closing a Channel

const channel = new BroadcastChannel('my_channel');
channel.close(); // Closes and allows garbage collection

Practical Examples and Patterns

Debugging Function Names

function createLogger(fn) {
 return function(...args) {
 console.log(`Calling function: ${fn.name}`);
 const start = performance.now();
 const result = fn.apply(this, args);
 const duration = performance.now() - start;
 console.log(`${fn.name} took ${duration.toFixed(2)}ms`);
 return result;
 };
}

const loggedAdd = createLogger(function addNumbers(a, b) {
 return a + b;
});

Cross-Tab State Synchronization

class CrossTabSync {
 constructor(channelName) {
 this.channel = new BroadcastChannel(channelName);
 this.state = {};

 this.channel.onmessage = (event) => {
 if (event.data.type === 'STATE_UPDATE') {
 this.state = event.data.state;
 this.onStateChange?.(this.state);
 }
 };
 }

 updateState(newState) {
 this.state = { ...this.state, ...newState };
 this.channel.postMessage({ type: 'STATE_UPDATE', state: this.state });
 }
}

Related JavaScript Concepts

Explore other JavaScript fundamentals that connect to these topics:

• Strict Equality - Understanding JavaScript's comparison operators
• Bind - Setting the context for function execution
• Constructor - Understanding object prototype chains
• Then - Working with promises and asynchronous patterns

For developers building complex web applications, understanding these JavaScript fundamentals is essential for creating maintainable and error-resistant code. Our web development services team can help you master these concepts and apply them effectively in your projects.

Summary

The name property serves different purposes across JavaScript's APIs:

Understanding the "#name?" error--accessing name on undefined--is crucial for robust JavaScript development. Use optional chaining, null checks, and default values to prevent these runtime errors.

The BroadcastChannel API's name property enables clean cross-tab communication patterns, making it ideal for synchronizing state across multiple browser contexts sharing the same origin.

Sources

1. MDN Web Docs - Function.name - Official JavaScript reference for Function.name property
2. MDN Web Docs - BroadcastChannel - Official documentation on BroadcastChannel API
3. MDN Web Docs - BroadcastChannel.name - Documentation for BroadcastChannel.name read-only property
4. W3Schools - JavaScript Function name Property - Beginner-friendly tutorial on the name property
5. Rollbar - How to Fix "Cannot read properties of undefined" in JS - Debugging guide for undefined property errors
6. MDN Web Docs - undefined - Reference for the undefined primitive value