Why is the name property a different value from what I set it to?

Question

I am new to JavaScript. Can someone explain why I'm getting an unexpected value when I access the name property of the person function?

var name = function() {
    console.log('name');
}

function person() {
    console.log('hello person');
}

person.name = "hello";

console.log(person.name); // logs "person"

Answer 1

Functions have a "name" property that defaults to the, erm, name of the function itself. It can be accessed but not written to, so your assignment to person.name is ignored.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Answer 2

Function.name is a non-writable and non-enumerable property defined for functions. So even though you

person.name = "hello";

Its not getting over-written. It returns the function name.

Answer 3

If you check name property descriptor you will see that it's not writable:

function person() {
    console.log('hello person');
}

var descriptor = Object.getOwnPropertyDescriptor(person, 'name');

console.log(descriptor);

As you can see it has "writable": false, which means that you can't change name of the function.

Answer 4

In JavaScript, you can define readonly(writable: false) properties. Hence, the name property is one of them. For futher you can check this link out.

Defining read-only properties in JavaScript

Define Property

Answer 5

Check the defineProperty doc

It is possible to define a property which is non-enumerable and non-writable through assignment operator

writable

true if and only if the value associated with the property may be changed with an assignment operator.

and

enumerable

true if and only if this property shows up during enumeration of the properties on the corresponding object.

name is one such property of function object.

Writable no

Enumerable no

Configurable yes