Best of Modern JavaScript — Prototypes and Function Names

Since 2015, JavaScript has improved immensely.

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

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

Using call and apply to Call hasOwnProperty() Safely

hasOwnProperty is a method of an object’s prototype.

Therefore, it can easily be overridden with an object’s own methods.

To call hasOwnProperty safety, we can call it with call .

So instead of writing:

obj.hasOwnProperty('prop')

We write:

Object.prototype.hasOwnProperty.call(obj, 'prop')

The 2nd way is safer because hasOwnProperty is always part of the Object.prototype .

We can’t guarantee that hasOwnProperty isn’t overridden with the first way.

With ES6, we can use the Map constructor to store key-value pairs, so that we don’t need to create objects to store them.

Therefore, we won’t need hasOwnProperty as much.

Abbreviations for Object.prototype and Array.prototype

Using Object.prototype and Array.prototype are long.

But we can shorten Object.prototype to an empty object literal.

We can shorten Array.prototype to an empty array literal.

So instead of writing:

Object.prototype.hasOwnProperty.call(obj, 'prop')

We can write:

({}).hasOwnProperty.call(obj, 'prop')

With arrays, we can write:

[].slice.call(1)

The name Property of Functions

The name property of the function contains the function’s name.

For example, we can write:

function foo() {}

Then foo.name returns 'foo' .

Arrow functions also has the name property.

For instance, if we write:

`const` bar `=` `()` `=>` `{};`

Then bar.name returns 'bar' .

Default Values

If we use a function as a default value, then it gets its name from its variable or parameter.

For example, if we have:

`let` `[foo =` `function` `()` `{}]` `=` `[]`

Then foo.name is 'foo' .

Likewise,

`let` `{` bar`:` foo `=` `function` `()` `{}` `}` `=` `{};`

and

`function` `g(foo =` `function` `()` `{})` `{`
  `return` `foo.name;`
`}`

all get the same result.

Named Function Definitions

If we have function declarations, then the name property of the function will have the name:

function foo() {}
console.log(foo.name);

foo.name would be 'foo' .

For function expressions, we get the same thing:

const bar = function baz() {};
console.log(bar.name);

so bar.name is 'bar' .

However, if we assigned a named function to a variable, then the function’s name would be the function’s name.

For example, if we write:

const bar = function baz() {
  console.log(baz.name);
};

bar()

Then we call it with bar and baz.name would be baz .

But we can’t write baz() to call it, we’ll see the ‘Uncaught ReferenceError: baz is not defined’ error.

Methods in Object Literals

Methods in object literals can be defined with fixed and computed property names.

For instance, we can write:

function qux() {}

let obj = {
  foo() {},
  bar: function() {},
  ['ba' + 'z']: function() {},
  qux,
};

foo is defined with the object method shorthand.

bar is defined as a traditional method.

baz is defined with the computed key.

And qux is passed in from the outside.

If we get the name property of each method:

console.log(obj.foo.name);
console.log(obj.bar.name);
console.log(obj.baz.name);
console.log(obj.qux.name);

We get:

foo
bar
baz
qux

Conclusion

We can use the name property to get the property name of a function.

Also, we can call a constructor instance’s method in shorter ways in some situations.

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