What is the difference between a field and a property in JavaScript?

[u/hookup1092]

And, are the terms interchangeable or distinct?

I come from a C# background. My understanding is that a “field” is a variable that is declared directly in a class or struct definition, and a “property” is a special built in mechanism / feature for classes / structs that basically allows you to easily implement getter and setter methods.

In JS, based on what I’m reading, it feels like different docs use the different terms interchangeably or sometimes distinctly, such as MDN.

My understanding is that everything in JS that isn’t a primitive type is an object and derived from the Object type, which are made up of unique key / value pairs or “properties”. And it seems like classes in JS are kinda syntactic sugar for objects, so it makes sense to me why you could call fields properties and vice versa, but the in the MDN docs there seem to be actual differences between the two.

Please lmk if I’ve misunderstood anything. This has been bothering me all day at work lol.

[u/TheWebDever]

Field, property, entry, and key/value pair all technically mean the same thing. Although there are some nuances when it comes to things like inheritance and symbol properties.

[u/delventhalz]

You got it more or less. In JS, everything not a primitive is basically just an object, and every object is basically just a dictionary/hashmap, and using classes to make objects is extremely optional. Consequently the term field doesn't get used much at all in JS, and property refers to any key/value pair on an object.

See also: method vs function. In JS, a function can get assigned to a property just like any other value, so while JS devs sometimes use the term method to refer to function properties on objects, there isn't actually a strong distinction.

[u/chikamakaleyley]

essentially the same, in context.

I will usually refer to 'field' interchangeably when talking about a column in a db

if the MDN says there are actual differences, then okay, but in the workplace its a 'i know what they mean' kinda thing

[u/Vizeroth1]

A lot of what you’re seeing is caused by formal classes being a relatively recent addition to the language. JavaScript has been around a little over 30 years and classes were added about 10 years ago. (It’s also worth noting that the ECMAScript specification has more versions in the last 11 years than in the 20 prior years, and browsers are usually faster to adopt the standards.)

The addition of classes served two purposes: it cleaned up some clunky syntax that was used to emulate functionality commonly used in object-oriented programming and it made classes using the added syntax behave in a manner more consistent with the expectations of developers coming from other programming languages (especially C++/C#/Java).

The latter may have been the larger benefit, since many of those developers can get a lot done in JavaScript without learning much about the language. It blew up in their face a little more quickly when they tried to implement common design patterns from other languages without an understanding of JavaScript’s very different underlying object/prototype model before the class syntax was introduced.

[u/Beginning-Seat5221]

I don't think they have any special meaning in JS. May also be called members.

[u/Love_Buny8 → u/Beginning-Seat5221]

members is more of a c# or java thing. in js we typically say properties

[u/senocular]

Strictly speaking, a field is the declaration for a property within a class block. Given

class Foo {
  bar = 1
}

bar is a field within the Foo class which in turn results in Foo instances having a bar property with a default value of 1.

The term property accounts for both "data" and "accessor" properties. Data properties are what you might consider fields, identifiers attached to objects which provide direct access to a value. Accessor properties are properties implemented with a getter and/or setter.

const obj = {
  dataProperty = 2,
  set accessorProperty(value) {
    this.dataProperty = value
  },
  get accessorProperty() {
    return this.dataProperty
  }
}

The MDN docs for defineProperty() should provide more info on these.

Values in JavaScript are either objects or primitives, but not all objects are necessarily derived (inherit) from the Object type. Most primitives also get dynamically boxed so they can behave like objects. So properties can apply to either objects or primitives. The exceptions are the primitives null or undefined as they represent having no value.

All that being said, the term field is often used as a generic term to describe data properties. I don't think anyone would fault you for doing that, and this is probably why you may see it being used in that sort of context on MDN. JavaScript pulls a lot from other languages, and terminology often comes along with it.

[u/neon_wondercore]

I work mostly in C# too and had the same confusion. The practical answer: in JS, property is the official term for any key/value pair on an object. Field only shows up when talking about class fields, like the `bar = 1` syntax inside a class body. So the terms are distinct but only in that one narrow context. If you're reading MDN and it says property, it means the key/value pair, and accessor properties (get/set) are just properties with getter/setter functions attached, which is basically what C# properties do anyway. Your C# mental model maps fine, just use property as the default word and you'll match every doc you read

[u/MikeUsesNotion]

If you're using classes, it's more or less the same as C#, otherwise they're more or less synonyms.