Best of Modern JavaScript — Prototypes and Function Names
Tags: javascript, webdev
Published: 2020-07-30 00:08:12

---
title: Best of Modern JavaScript — Prototypes and Function Names
published: true
date: 2020-07-25 00:36:27 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aprototypes-and-function-names/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aprototypes-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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aprototypes-and-function-names/) appeared first on [The Web Dev](https://thewebdev.info).