DEV Community

John Au-Yeung
John Au-Yeung

Posted on • Originally published at on

Best of Modern JavaScript — Function Names

Subscribe to my email list now at

Follow me on Twitter at

Many more articles at

Even more articles at

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at function names in JavaScript.

Methods in Class Definitions

We can define methods in class definitions.

For instance, we can write:

class C {
  foo() {}

  ['ba' + 'r']() {}

  static baz() {}

We can define class methods with computed property names.

Then we can get their name property values by writing:


As we can see, class instance methods are just methods of C ‘s prototype .

The class syntax is just syntactic sugar on top of the regular prototypical inheritance model.

Static methods are methods attached to the property.

Getters and setters also have names.

For instance, we can write:

class C {
  get foo() {}
  set bar(value) {}

Then we get the names of these 2 methods with:

const getter = Object.getOwnPropertyDescriptor(C.prototype, 'foo').get;

const setter = Object.getOwnPropertyDescriptor(C.prototype, 'bar').set;

We use the Object.getOwnPropertyDescriptor method to get the property descriptor of our class methods.

And then we can get the getter with the get property and the setter with the set property.

They all have the name property to get the name.

Then the 2 console logs get us:

get foo
set bar

Methods with Symbol Keys

We can create methods with symbol keys.

For example, we can write:

const foo = Symbol('foo');
const bar = Symbol();

let obj = {
  [foo]() {},
  [bar]() {},

They also have the name property.

The first console log logs ‘[foo]’ .

And the 2nd console log logs an empty string.

Class Definitions

Class definitions create functions, so they also has a name property.

For instance, we can write:

class Foo {}

Then is 'Foo' .

We can also define it by writing:

const Baz = class {};

Then is 'Baz' .

Default Exports

Default exports of functions have names set to default .

This includes the following:

`export` `default` `function` `()` `{}`
`export` `default` `(function` `()` `{});`
`export` `default` `class` `{}`
`export` `default` `(class` `{});`
`export` `default` `()` `=>` `{};`

Other Kinds of Functions

new Function() ‘s name property is 'anonymous' .

This is a bug.

func.bind() creates a function with a name value that starts with 'bound' .

For example, we can write:

function bar(x) {
  return x
const bound = bar.bind(undefined, 123);

Then is 'bound bar' .

Generator functions get the name the same way normal functions do.

Function Names Assignment

Function names are always assigned during creating and never changed later.

For instance, if we have:

function createFunction() {
  return function() {};
const bar = createFunction();

Then isn’t 'bar' , it’s an empty string.

The name property doesn’t update after it’s created.

Since it’s anonymous at the beginning, it stays anonymous.

Changing Names of Functions

We can’t change the name value of functions.

So we can’t write: = 'foo';

to change a function’s name to 'foo' .

However, we can change the name by redefining it.

For example, we can write:

function bar() {}

Object.defineProperty(bar, 'name', {
  value: 'foo',
  configurable: true

Then we get 'foo' logged if we log ‘s value.


We can get and set the name of a function in various ways.

The post Best of Modern JavaScript — Function Names appeared first on The Web Dev.

Top comments (0)