17

Couldn’t understand the difference between object and plain object in JavaScript.

I know how Object looks like but don’t understand plain object. I googled about this but couldn’t understand.

As per my understanding normal object looks like below

const object = {};

Or we do call functions as objects in JavaScript

function test() {

}

But what is plain object? how it differs with normal object. Thank you

Edit:

My confusion started about plain object after looking at below error. So my query is to understand the concept of plain object in JavaScript

Actions must be plain objects. Use custom middleware for async actions.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
  • 4
    there is no such thing as a "plain object" in Javascript. Where did you hear the term "plain object". What you have written is called "an object literal". Show me in Javascript specification where the term "plain object" is used. – mpm Sep 22 '18 at 04:16
  • @mpm My doubt has started about plain object from this error “Actions must be plain objects. Use custom middleware for async actions.” – Hemadri Dasari Sep 22 '18 at 04:19
  • 1
    @Think-Twice looks like you're using redux. In redux, without any additional middleware, the action data must be a plain object. It looks like you're instread returning a function, which you need the thunk middleware to handle that. By default, redux just looks for an object - the thunk middleware add additional functionality that can call functions. – Ryan Sep 22 '18 at 04:22
  • @Ryan that’s where I get stuck. What is plain object that thunk expects? I hope thunk must be using a concept of JavaScript plain object? – Hemadri Dasari Sep 22 '18 at 04:26
  • @Think-Twice thunk middleware does not require a plain object. plain redux only allows plain object, thunk adds support for function as return type. if you intend to only return plain object, no need for thunk. if you intend to return a function you need thunk. thunk middleware is useful for dispatch-driven flow. because you don't even know JS fundamentals like objects and functions, I recommend trying to learn react WITHOUT using redux. just use component local state for now - DELETE REDUX. – Ryan Sep 22 '18 at 04:30
  • Possible duplicate of [What is the difference between redux-thunk and redux-promise?](https://stackoverflow.com/questions/36577510/what-is-the-difference-between-redux-thunk-and-redux-promise) – Ryan Sep 22 '18 at 04:31
  • @ryan please forget about thunk. What I am trying to understand is the plain object concept in JavaScript. My question is no wr related to redux or Redux-thunk. Not sure why you duplicated with Redux thunk. I shared that error for just an example to tell about plain object – Hemadri Dasari Sep 22 '18 at 04:49

7 Answers7

23

I think you wanted to mean Plain Old JavaScript Object as plain object.

In vanilla JavaScript a POJO (Plain Old JavaScript Object) is the simplest kind of object you could possibly have: a set of key-value pairs, created by the {} object literal notation or constructed with new Object().

Plain Old JavaScript Object:

Using the bracket's syntactic sugar also known as object literal:

var obj = {};

Using the Object() constructor:

var obj = new Object();

Other Than Plain Object:

Using a function constructor:

var Obj = function(name) {
  this.name = name;
}
var c = new Obj("hello");

Using ES6 class syntax:

class myObject  {
  constructor(name) {
    this.name = name;
  }
}
var e = new myObject("hello");
Mamun
  • 66,969
  • 9
  • 47
  • 59
13

Plain object(POJO - Plain Old Javascript Object)

var plainObj1 = {}; // typeof plainObj1 --> Object
var plainObj2 = {name : "myName"}; // typeof plainObj2 --> Object
var plainObj3 = new Object(); // typeof plainObj3 --> Object

Non Plain object

var Person = function(){}; //class
var nonPlainObj = new Person(); // typeof nonPlainObj --> function
Sathish
  • 180
  • 2
  • 10
  • Hello, in the "Non Plain object" example, 1st line "var Person = function(){}; //class" <-- what is that 'class' means? Please elaborate, why you have written it there? Cheers – Viktor Borítás Mar 16 '21 at 12:23
  • 1
    `var nonPlainObj = new Person();` — That is wrong: `typeof nonPlainObj → 'object'`. It is `typoef Person` that is a `function`. – WoodrowShigeru Dec 07 '22 at 18:30
6

An Object created by literal notation or new Object are know as plain object. example :

let a = {aaa : 1}

let b = new Object()

while Object created using function are not plain object

let C = function(){}

let d = new C()
Ishant Gaurav
  • 1,183
  • 2
  • 13
  • 32
2

You are talking about object literals, which is a literal object, {}. Like array literals use [] instead of new Array(). This is an object whose prototype is Object. A string is an Object too, but its prototype chain looks like: String -> Object. Arrays are Array -> Object. These are all objects.

An object literal's prototype is just, well, Object.

Rafael
  • 7,605
  • 13
  • 31
  • 46
2

Any object created with object literals notation is called plain Objects in JavaScript

function Animal(){
//Some codes
}
var obj = new Animal();
foxiris
  • 3,125
  • 32
  • 32
Pratap Sharma
  • 2,633
  • 2
  • 18
  • 32
1

In your question, you cite that you think both an object literal and a function are both "objects". In JS, function is a type, and so is object. So your original question, those two items are not objects ...

enter image description here

Ryan
  • 7,733
  • 10
  • 61
  • 106
-2

plain objects (sets of key/value pairs wrapped in { } ) are great for storing simple data sets.

var lunch={
    sandwich:'furkey',
    drink:'soda',
    chips:true
}

like in react redux actions are written in key/value pairs.

hope you understand it.

webexpert3333
  • 1