In JavaScript, almost "everything" is an object.
new
keyword)new
keyword)new
keyword)All JavaScript values, except primitives, are objects.
A primitive value is a value that has no properties or methods.
A primitive data type is data that has a primitive value.
JavaScript defines 5 types of primitive data types:
string
number
boolean
null
undefined
Primitive values are immutable (they are hardcoded and therefore cannot be changed).
if x = 3.14, you can change the value of x. But you cannot change the value of 3.14.
Value | Type | Comment |
---|---|---|
"Hello" | string | "Hello" is always "Hello" |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined is always undefined |
Objects are Variables
JavaScript variables can contain single values:
Example(1)
var person = "John Doe";
Objects are variables too. But objects can contain many values.
The values are written as name : value pairs (name and value separated by a colon).
Example(2)
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
A JavaScript object is a collection of named values
The named values, in JavaScript objects, are called properties.
Property | Value |
---|---|
firstName | John |
lastName | Doe |
age | 50 |
eyeColor | blue |
Objects written as name value pairs are similar to:
Object Methods
Methods are actions that can be performed on objects.
Object properties can be both primitive values, other objects, and functions.
An object method is an object property containing a function definition.
Property | Value |
---|---|
firstName | John |
lastName | Doe |
age | 50 |
eyeColor | blue |
fullName | function() {return this.firstName + " " + this.lastName;} |
JavaScript objects are containers for named values, called properties and methods.
You will learn more about methods in the next chapters.
Creating a JavaScript Object
With JavaScript, you can define and create your own objects.
There are different ways to create new objects:
new
.In ECMAScript 5, an object can also be created with the function Object.create()
.
Using an Object Literal
This is the easiest way to create a JavaScript Object.
Using an object literal, you both define and create an object in one statement.
An object literal is a list of name:value pairs (like age:50) inside curly braces {}.
The following example creates a new JavaScript object with four properties:
Example(3)
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Spaces and line breaks are not important. An object definition can span multiple lines:
Example(4)
var person = { firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue" };
Using the JavaScript Keyword new
The following example also creates a new JavaScript object with four properties:
Example(5)
var person = new Object(); person.firstName = "John"; person.lastName = "Doe"; person.age = 50; person.eyeColor = "blue";
The two examples above do exactly the same. There is no need to use new Object()
.
For simplicity, readability and execution speed, use the first one (the object literal method).
JavaScript Objects are Mutable
Objects are mutable: They are addressed by reference, not by value.
If person is an object, the following statement will not create a copy of person:
Example(6)
var x = person; // This will not create a copy of person.
The object x is not a copy of person. It is person. Both x and person are the same object.
Any changes to x will also change person, because x and person are the same object.
Example(7)
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} var x = person; x.age = 10; // This will change both x.age and person.age
Complete Code For Define Objects Using JavaScript
<!DOCTYPE html> <html> <head> <title>How To Define Objects Using JavaScript With Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> body{ background: black; } </style> <body> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: White">How To Define Objects Using JavaScript With Example</h1> </div> <div class="well"> <h2 id="demo1"></h2> <h2 id="demo2"></h2> <h2 id="demo3"></h2> <script> var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; document.getElementById("demo1").innerHTML = person.firstName + " is " + person.age + " years old."; var women = { firstName: "Sheetal", lastName: "Doe", age: 23, eyeColor: "brown" }; document.getElementById("demo2").innerHTML = women.firstName + " is " + women.age + " years old."; var man = new Object(); man.firstName = "Sushant"; man.lastName = "Doe"; man.age = 34; man.eyeColor = "blue"; document.getElementById("demo3").innerHTML = man.firstName + " is " + man.age + " years old."; </script> </div> </div> </body> </html>