Objects and it’s internal representation in JavaScript.

Objects overview

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects.

Objects and properties

A JavaScript object has properties associated with it. A property of an object can be explained as a variable that is attached to the object. Object properties are basically the same as ordinary JavaScript variables, except for the attachment to objects. The properties of an object define the characteristics of the object. You access the properties of an object with a simple dot-notation:

1|objectName.propertyName

Like all JavaScript variables, both the object name (which could be a normal variable) and property name are case sensitive. You can define a property by assigning it a value. For example, let’s create an object named myCar and give it properties named make, model, and year as follows:

1|var myCar = new Object();
2|myCar.make = 'Maruti Suzuki';
3|myCar.model = 'Zen';
4|myCar.year = 2008;

Unassigned properties of an object are undefined (and not null).

1| myCar.color; // undefined

Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays, since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows:

1| myCar['make'] = 'Maruti Suzuki';
2| myCar['model'] = 'Zen';
3| myCar['year'] = 2008;

Object Creation

Using object initializers is sometimes referred to as creating objects with literal notation. The above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}):

1|var myCar = {
2| make: 'Maruti Suzuki',
3| model: 'Zen',
4| year: 2008
};

The syntax for an object using an object initializer is:

var obj = {property_1: value_1,// property_# may be an indentifire 
2: value_2, // or a number...

'property n':value n }; // or a string

where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i. The obj and assignment is optional; if you do not need to refer to this object elsewhere, you do not need to assign it to a variable.

Alternatively, you can create an object with these two steps:

  1. Define the object type by writing a constructor function. There is a strong convention, with good reason, to use a capital initial letter.
  2. Create an instance of the object with new.

To define an object type, create a function for the object type that specifies its name, properties, and methods. For example, suppose you want to create an object type for cars. You want this type of object to be called Car, and you want it to have properties for make, model, and year. To do this, you would write the following function:

function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}

Notice the use of this to assign values to the object's properties based on the values passed to the function.

Now you can create an object called mycar as follows:

var mycar = new Car('Eagle', 'Talon TSi', 1993);

This statement creates mycar and assigns it the specified values for its properties. Then the value of mycar.make is the string "Eagle", mycar.year is the integer 1993, and so on.

You can create any number of Car objects by calls to new. For example,

var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);

Objects can also be created using the Object.create() method. This method can be very useful, because it allows you to choose the prototype object for the object you want to create, without having to define a constructor function.

Syntax: const newObject = Object.create(prototype)

Example:

In the above example, the object obj contains property called name & the newly object obj2 created will inherit all the prototype object properties of obj.

Thank You!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

How to Clear input form with Formik React

Example Visual Form in React with Formik

Scratching the Surface of Higher Order Functions in JavaScript

Best Handy Regex for Forms

Updating An Old Project

The Basics on How to Use useState

Displaying a detail page in Xamarin using mvvm

Conditional Rendering With React Hider

Blog 307

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suraj Shenoy

Suraj Shenoy

More from Medium

Hire Fuchsia App Developers

Cloning An E-Commerce Website(Overstock) Using HTML,CSS & JavaScript

Implement Even Occurrence in JavaScript

Application Frameworks —Node JS