Almost everything in Javascript is an object, whether it’s an array or a function. In this post, we’ll learn three different ways to create objects in JavaScript: Object Literals New Keyword Class Object Literals A JavaScript is a comma-separated list of name-value pairs wrapped in curly braces. Object literals encapsulate data, enclosing it in a tidy package. object literal Person = { : , : , : [ , ], : { .log( ); } }; let name "Foziya" age 20 action "walk" " run" greeting ( ) function console "Hello" Object literal property values can be of any data type, including array literals, function literals, and nested object literals. shape = { : , : , : { : , : } }; .log(shape); .log(shape.size.length) let name "rectangle" color "red" size length 10 breadth 20 console // { name: 'rectangle', // color: 'red', // size: { length: 10, breadth: 20 } } console // 10 Shorthand property names Consider a scenario in which you have to put different variables inside an object. One way of doing it is: one = ; two = ; three = ; numbers = { : one, : two, : three }; .log(numbers); let 1 let 2 let 3 let one two three console //{ one: 1, two: 2, three: 3 } With , a shorter notation is available to achieve the same thing: ECMAScript 2015 one = ; two = ; three = ; numbers = { one, two, three }; .log(numbers); .log(numbers.one) .log(numbers.one === { one }.one); let 1 let 2 let 3 let console //{ one: 1, two: 2, three: 3 } console // 1 console // true Duplicated property names If you use the same name for two properties, the second property will overwrite the first. Person = { : , : }; .log(Person.name); let name "Ney Vatsa" name "Shashank" console // Shashank New Keyword The constructor creates an object wrapper for a given value. If the value is or , it will create and return an empty object. Otherwise, it will return an object of a type that corresponds to the given value. Object null undefined Objects can also be created using the keyword. With the built-in Object Constructor in Javascript, creates an empty object; or, this keyword can be used with a user-defined constructor function: . new new with builtin Object Constructor To get started, first take a look at this example: movies = (); .log(movies) let new Object console //{} The next step is to add properties and methods to this empty object. This can be achieved with simple dot notation: movies = (); .log(movies) movies.name = ; movies.releaseYear = ; movies.genre = [ , ]; movies.ratings = { : , : }; movies.watch = { .log( ); }; .log(movies); movies.watch(); let new Object console //{} "Dead Poets Society" 1989 "Drama" "Teen" IMDb "8.1 / 10" Metacritic "79%" => () console "Watch Online" console // { name: 'Dead Poets Society', // releaseYear: 1989, // genre: [ 'Drama', 'Teen' ], // ratings: { IMDb: '8.1 / 10', Metacritic: '79%' }, // watch: [Function] } // Watch Online However, this practice is not recommended, as there is a scope resolution behind the scenes to check if the constructor function is built-in or user-defined. User-defined constructor functions Functions can also be used to create objects in JavaScript. If you really think about it, they’re already objects — so basically, objects are used to create more objects. Generally, this method is preferred over the object constructor. Imagine you have to create hundreds of objects with the same properties; with the object constructor method you’ll have to manually add all the properties to all the objects but with function constructor, these properties can be predefined. { .name = name; .releaseYear = releaseYear; .genre = genre; .ratings = ratings; .watch = { .log( ); }; } DPS = movies( , , [ , ], { : , : }); .log(DPS);movies { rocky = movies( , , [ , ], { : , : }); .log(rocky); ( ) function movies name, releaseYear, genre, ratings this this this this this => () console "Watch Online" let new "Dead Poets Society" 1989 "Drama" "Teen" IMDb "8.1 / 10" Metacritic "79%" console // name: 'Dead Poets Society', // releaseYear: 1989, // genre: ['Drama', 'Teen'], // ratings: { IMDb: '8.1 / 10', Metacritic: '79%' }, // watch: [Function] // } let new "Rocky" 1976 "Drama" "Sports" IMDb "8.1 / 10" Metacritic "70%" console // movies { // name: 'Rocky', // releaseYear: 1976, // genre: ['Drama', 'Sports'], // ratings: { IMDb: '8.1 / 10', Metacritic: '70%' }, // watch: [Function] // } Using the same function constructor, any number of objects can be created. Using ES6 Classes to Create Objects This method is a lot similar to using new with the user-defined function constructor. Classes are the primary components of Object Oriented Programming (OOP). Many instances of classes can be created which are in fact objects. The constructor functions can now be replaced by classes, as they are supported in specifications. ES6 { (name, releaseYear, genre, ratings) { .name = name; .releaseYear = releaseYear; .genre = genre; .ratings = ratings; } watch() { .log( ); } } rocky = Movies( , , [ , ], { : , : }); .log(rocky); rocky.watch(); class Movies constructor this this this this console "Watch Online" let new "Rocky" 1976 "Drama" "Sports" IMDb "8.1 / 10" Metacritic "70%" console // Movies { // name: 'Rocky', // releaseYear: 1976, // genre: ['Drama', 'Sports'], // ratings: { IMDb: '8.1 / 10', Metacritic: '70%' } // } //Watch Online Here I have defined all the arguments inside the constructor. Methods can be a part of the class while declarations can be added later to the created instance of the class, “objects”: rocky.buy = { .log( ); }; rocky.buy(); /* above example */ ( ) function console "Buy the Movie" // Buy the Movie Here this method is a part of the object and will not affect our original class. Both classes and constructors imitate an object-oriented inheritance model to JavaScript, which is a prototype-based inheritance language. Being familiar with classes is extremely helpful, as popular JavaScript libraries such as make frequent use of the syntax. React class Previously published at https://medium.com/better-programming/three-different-ways-to-create-objects-in-javascript-d3595d693296
