JS Objects

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Objects

JavaScript variables are containers for data values.

This code  is used to assigns a simple value (Fiat) to a variable named car.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2

<p id=”demo”></p>

<script>

// Create and display a variable:

let car = “Fiat”;

document.getElementById(“demo”).innerHTML = car;

</script>

</body>

</html>

Output

JavaScript Variables

fiat

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to a variable named car.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id=”demo”></p>

<script>

// Create an object:

const car = {type:”Fiat”, model:”500″, color:”white”};

// Display some data from the object:

document.getElementById(“demo”).innerHTML = “The car type is ” + car.type;

</script>

</body>

</html>

Output

JavaScript Objects

The car type is Fiat

Object Definition

Defining  a JavaScript object that has an object literal:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id=”demo”></p>

<script>

// Create an object:

const person = {firstName:”John”, lastName:”Doe”, age:50, eyeColor:”blue”};

// Display some data from the object:

document.getElementById(“demo”).innerHTML =

person.firstName + ” is ” + person.age + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Objects

John is 50 years old.

Spaces and line breaks are not considered important. An object definition helps in span multiple lines.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName: “Doe”,

  age: 50,

  eyeColor: “blue”

};

// Display some data from the object:

document.getElementById(“demo”).innerHTML =

person.firstName + ” is ” + person.age + ” years old.”;

</script>

</body>

</html>

Output

JavaScript Objects

John is 50 years old.

Accessing Object Properties

Accessing the object properties in two ways:

objectName.propertyName

or

objectName[“propertyName”]

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person[“property”].</p>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName : “Doe”,

  id     :  5566

};

// Display some data from the object:

document.getElementById(“demo”).innerHTML =

person.firstName + ” ” + person.lastName;

</script>

</body>

</html>

Output

JavaScript Objects

There are two different ways to access an object property.

You can use person.property or person["property"].

John Doe

Object Methods

Objects can also have methods.

Methods are actions that are used on objects.

Methods are stored in properties in the form of  function definitions.

Example

const person = {

  firstName: “John”,

  lastName : “Doe”,

  id: 5566,

  fullName : function() {

    return this.firstName + ” ” + this.lastName;

  }};

In the example above, this indicates to the person object.

I.E. this.firstName refers to the firstName property of this.

I.E. this.firstName refers to the firstName property of person.

What is this?

In JavaScript, the this keyword indicates to an object.

Which object depends on how this is being invoked (used or called).

The this keyword points to different objects depending on how it is used:

The this Keyword

In a function definition, this points to the “owner” of the function.

In the above example, this is the person object that “owns” the fullName function.

In other words, this.firstName means the firstName property of this object.

Accessing Object Methods

Accessing an object method with the following syntax:

objectName.methodName()

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>An object method is a function definition, stored as a property value.</p>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName: “Doe”,

  id: 5566,

  fullName: function() {

    return this.firstName + ” ” + this.lastName;

  }

};

// Display data from the object:

document.getElementById(“demo”).innerHTML = person.fullName();

</script>

</body>

</html>

Output

JavaScript Objects

An object method is a function definition, stored as a property value.

John Doe

If a method without the () parentheses is accessed, it will return the function definition

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id=”demo”></p>

<script>

// Create an object:

const person = {

  firstName: “John”,

  lastName : “Doe”,

  id     : 5566,

  fullName : function() {

    return this.firstName + ” ” + this.lastName;

  }

};

// Display data from the object:

document.getElementById(“demo”).innerHTML = person.fullName;

</script>

</body>

</html>

Output

JavaScript Objects

If you access an object method without (), it will return the function definition:

function() { return this.firstName + " " + this.lastName; }

Do Not Declare Strings, Numbers, and Booleans as Objects!

When a JavaScript variable is defined with the keyword “new”, the variable is created as an object:

x = new String();        // Declares x as a String object

y = new Number();        // Declares y as a Number object

z = new Boolean();       // Declares z as a Boolean object

Avoid String, Number, and Boolean objects as they complicate the code and result in slowing down execution speed.