Best of Modern JavaScript — Function Names
Tags: javascript
Published: 2020-07-26 01:20:12

---
title: Best of Modern JavaScript — Function Names
published: true
date: 2020-07-25 00:31:10 UTC
tags: javascript
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8afunction-names/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258afunction-names
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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:

```
console.log(C.prototype.foo.name);
console.log(C.prototype.bar.name);
console.log(C.baz.name);

```

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;
console.log(getter.name);

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

```

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]() {},
};
console.log(obj[foo].name);
console.log(obj[bar].name);

```

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 {}
console.log(Foo.name);

```

Then `Foo.name` is `'Foo'` .

We can also define it by writing:

```
const Baz = class {};
console.log(Baz.name);

```

Then `Baz.name` 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);
console.log(bound.name);

```

Then `bound.name` 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();
console.log(bar.name);

```

Then `bar.name` 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:

```
func.name = 'foo';
func.name

```

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 `bar.name` ‘s value.

### Conclusion

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

The post [Best of Modern JavaScript — Function Names](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8afunction-names/) appeared first on [The Web Dev](https://thewebdev.info).