postImage

Tutorial: Javascript Objects

blogImage

By Emmanuel Chinonso

Web Developer

JavaScript Object

A automobile is an object in real life. A car has properties such as weight and color, as well as procedures such as start and stop. All cars have the same properties, yet the values of those properties vary from one to the next. The processes are the identical in all cars, however they are conducted at different times.

Contrast Bootstrap UI Kit

JavaScript variables, as you undoubtedly know, are containers for data values. Objects are also variables. Objects, on the other hand, might have a wide range of values. Name: value pairs are used to represent the values (name and value separated by a colon). JavaScript objects are containers for named values that are referred to as properties or methods.

Object Definition

An object literal is used to define (and construct) a JavaScript object:

JavaScript Code:

1var person = {
2 firstName: 'Johnny',
3 lastName: 'Williams',
4 age: 35,
5 eyeColor: 'brown',
6};

It is not necessary to use spaces or line breaks. Multiple lines can be used to define an object.

Object Properties

In JavaScript objects, The name: value pairs are referred to as properties:

PropertyProperty Value
firstNameJohnny
---------------
lastNameWilliams
---------------
age35
---------------
eyeColorbrown

Accessing Object Properties

Object properties can be accessed in two ways: objectName.propertyName

or

objectName["propertyName"]

JavaScript Code:

1person.lastName;

Or

1person['lastName'];

Object Methods Methods can be added to objects. Actions that can be done on objects are referred to as methods. Methods are stored as function definitions in properties.

PropertyProperty Value
firstNameJohnny
---------------
lastNameWilliams
---------------
age35
---------------
eyeColorbrown
---------------
fullNamefunction () {return this.firstName + " " + this.lastName;}

A property that stores a function is known as a method.

JavaScript Code:

1var person = {
2 firstName: 'John',
3 lastName: 'Doe',
4 id: 5566,
5 fullName: function() {
6 return this.firstName + ' ' + this.lastName;
7 },
8};

The this Keyword

This refers to the "owner" of a function in a function definition. This is the object that "owns" the fullName function in the previous example. To put it another way: The firstName property of this object is referred to as firstName. Object Methods Are Accessible The following is the syntax for calling an object method: objectName.methodName()

JavaScript Code:

1name = person.fullName();

If you call a method without the () parenthesis, the function definition is returned:

JavaScript Code:

1name = person.fullName;

Strings, Numbers, and Booleans should not be declared as objects!

When the keyword "new" is used to declare a JavaScript variable, it creates the variable as an object:

JavaScript Code:

1var x = new String(); // Declares x as a String object
2var y = new Number(); // Declares y as a Number object
3var z = new Boolean(); // Declares z as a Boolean object

String, Number, and Boolean objects should all be avoided at all costs. They make your code more difficult to understand and slow down the speed with which it runs.

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...