Modern JavaScript: String Keyed Methods

Welcome to the String Keyed Methods lesson!

This lesson is shown as static text below. However, it's designed to be used interactively. Click the button below to start!

We've seen shorthand methods in object literals:

const user = {
  name() { return 'Amir'; }
};
user.name();

Result:

'Amir'

When we use that syntax, the method name is subject to the normal limitations on JavaScript variable names. It can't contain spaces, for example.

const user = {
  name of the user() { return 'Amir' }
}
user.name()

Result:

We can work around this by putting quotes around the method's name. Then, it can contain spaces and even punctuation!
But immediately there's a problem. If a method name contains spaces or punctuation, then we can't call it with the usual someObject.methodName syntax. We'll have to use someObject['methodName'].

const user = {
  'name of the ~user~'() { return 'Betty'; }
};
user['name of the ~user~']();

Result:

'Betty'

This method definition syntax is called "string keyed methods" because we're using the normal JavaScript string syntax to define the method's name. Remember, to the object, the function name is just another key!
Modern JavaScript has good Unicode support, so ordinary methods work with non-English characters as well. For example, we can name our method "名前", the Japanese word for "name". This didn't work at all in older versions of JavaScript, and still doesn't work in some other programming languages.

const user = {
  名前() { return 'Betty'; }
};
user.名前();

Result:

'Betty'

That worked, but it won't work if we try to name the method 名前。. The "。" character is a Japanese period, which is punctuation, and punctuation isn't allowed at all in JavaScript identifiers. Including that character will result in an error. (You can type error when a code example will throw an error.)

const user = {
  名前。() { return 'Betty' }
}
user.名前。()

Result:

SyntaxError: on line 2: Unexpected character '。'.

With string keyed methods, we can define that "名前。" method.

const user = {
  '名前。'() { return 'Betty'; }
};
user['名前。']();

Result:

'Betty'

String keyed methods also work in class definitions. This is a recurring theme: syntax that works in object literal methods will generally work inside class definitions as well.

class User {
  constructor(name) {
    this.name = name;
  }

  'name of the user'() {
    return this.name;
  }
}

new User('Marie')['name of the user']();

Result:

'Marie'

class User {
  constructor(名前) {
    this.名前 = 名前;
  }

  '名前。'() {
    return this.名前;
  }
}

new User('Marie')['名前。']();

Result:

'Marie'

Here's a code problem:
Define a User class with a method named "is admin", including the space. Your class should accept an isAdmin argument to the constructor, which is then returned by the "is admin" method.
class User {
constructor(isAdmin) {
this.isAdmin = isAdmin;
}

'is admin'() {
return this.isAdmin;
}
}
const adminFlags = [
new User(false)['is admin'](),
new User(true)['is admin'](),
];
adminFlags;
Goal:
[false, true]
Yours:
[false, true]
Show Author's Answer
Here's one way that this could come up in practice. Suppose that we have objects representing columns in a data table shown in a web application. The objects' property names match the tables' column titles, like "User Name" or "Number of Logins".
We also use a library that can automatically call an object's methods when the user clicks table column headers. In our case, we want those functions to sort the table by the clicked column. The library is designed so that the object's method names must match the table header names. That means that we have to define methods with names like "User Name" and "Number of Logins" to match our headers.
This is a made-up example because it's uncommon to see quoted method names in real-world JavaScript code. If you do encounter them, they probably won't involve the Japanese period character or ~tildes~; you're more likely to encounter regular old space characters. Still, we have unlimited naming options if we need them.