DEV Community

Cover image for JavaScript Objects | Complete Guide

JavaScript Objects | Complete Guide

Abhishek Pathak on May 13, 2024

JavaScript Objects Similar to other programming languages javascript objects is a collection of key-value pairs, where each key is a str...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

You've missed Object.fromEntries as a creation method.

...where each key is a string...

Keys can also be Symbols

Properties of JS object can be accessed using dot notation and bracket notation

True if the key is a string, but if the key is a Symbol, bracket notation must be used.

Consider Object.create() that we used above. It is an method that creates a new object

Also important to note is that you can create an object with no prototype (a null prototype) by passing null as the first (prototype) parameter. This is useful for saving memory, creating enums, or dealing with objects that potentially use names that clash with default object methods.

Collapse
 
neurabot profile image
Neurabot • Edited

Beautiful. It's important to say for novels in models javascript.

Collapse
 
scorcism profile image
Abhishek Pathak

thank you @jonrandy for the feedback. Really appreciate; and will surely change and add the statements.

Collapse
 
bekbrace profile image
Bek Brace

I appreciate your great effort, well done.
However the post is full of errors, please review your code snippets and republish it - we need to be responsible about the quality of information we provide to the audience.
Cheers my friend

Collapse
 
scorcism profile image
Abhishek Pathak

hey bek
thank you for the awesome feedback
yes, I'm also improving the article daily so this can become one stop for the js object reference in dev to.

Collapse
 
bekbrace profile image
Bek Brace

Awesome, my friend !

Collapse
 
yogeshgalav7 profile image
Yogesh Galav • Edited

I think there's a mistake in code of Object.freeze

        const me = { name:"Abhishek", age:21 }
        Object.freeze(me); // Freezing the object
        me.name = "scorcism";
        me.age = 22;
        console.log(me) 
        // Expected output: { name:"Abhishek", age:21 }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
scorcism profile image
Abhishek Pathak

Thank you Yogesh,
Updated

Collapse
 
wangliwen profile image
WangLiwen

That's weird...

Collapse
 
softwaredeveloping profile image
FrontEndWebDeveloping

If you mean the cover image, I agree.

Collapse
 
scorcism profile image
Abhishek Pathak

haha, I am experimentingπŸ˜…

Thread Thread
 
softwaredeveloping profile image
FrontEndWebDeveloping

Keep it up! There's nothing wrong with it. It's just... unusual. πŸ˜„

Collapse
 
scorcism profile image
Abhishek Pathak

hey,
can you elobrate so I can fix and improve.

Collapse
 
surajupadhyay profile image
Suraj Upadhyay

A very good and informative article.

Collapse
 
scorcism profile image
Abhishek Pathak

Thank you suraj

Collapse
 
efpage profile image
Eckehard • Edited

You are very unprecise about the use of "new" in 2. Using the new Keyword! See this example:

function About(name, age, city) {
      this.name = name;
      this.age = age;
      this.city = city;
  }   

const me = About("Abhishek", 21, "Mumbai"); 

console.log(name, age) // => Abhishek 21
Enter fullscreen mode Exit fullscreen mode

"new" creates an object containing an internal "this". If you omit "new", this is the global context, so your properties are created outside of your object.

Using or not using "new" will lead to very hard to track errors. If you use "new" only 1,8% of the time, 98,2% your code will not work as expected.

Image description

Collapse
 
scorcism profile image
Abhishek Pathak

Thank you eckehard for you feedback.
Will update the post,
those percentages i have put are for the methods you will use for creating objectsπŸ˜€

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Using new to create an instance of an object is very common. It's pretty much the basis of how OOP works in JS.

Thread Thread
 
efpage profile image
Eckehard

I guess accidentally forgetting "new" is pretty common too. ThatΒ΄s what I hate about OOP in Javascript.

Collapse
 
mattlewandowski93 profile image
Matt Lewandowski

You had my like just from the cover image πŸ˜‚. Great article as well

Collapse
 
scorcism profile image
Abhishek Pathak

haha tried something newπŸ˜„

Collapse
 
kgwd07 profile image
Kiran Shrinivas Gudigar

A great consolidation of javascript object

Collapse
 
scorcism profile image
Abhishek Pathak

thank you kiran

Collapse
 
devh0us3 profile image
Alex P

Why you didn't review the valueOf?
That allows you to create "smart" & "magic" numbers or something else

Example:

Image description