Object Definations

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

Object definations

In JavaScript, almost “everything” is an object.

  • Booleans can be objects (if defined using a new keyword).
  • Numbers can be objects (if defined using a new keyword).
  • Strings can be objects (if defined using a new keyword).
  • Dates are always objects.
  • Maths are always objects.
  • Regular expressions are always objects.
  • Arrays are always objects.
  • Functions are always objects.
  • Objects are always objects.
  • All JavaScript values, except primitives, are objects.

JavaScript Primitives

A primitive value is a value that has no properties or methods.

3.14 is a primitive value

A primitive data type is data that consists of primitive values.

JavaScript defines 7 types of primitive data types:

Examples

  • String
  • Boolean
  • Null
  • Undefined
  • Symbol
  • Bigint

Immutable

Primitive values are immutable, which means that they are hardcoded and 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 consists of single values:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Variables</h2>

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

<script>

// Create and display a variable:

let person = “John Doe”;

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

</script>

</body>

</html>

Output

JavaScript Variables

  • JavaScript variables can also have many values.
  • Objects are variables too. But objects can have many values.
  • Object values are written as : value pairs (name and value separated by a colon).

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating an object:</p>

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

<script>

let person = {

  firstName : “John”,

  lastName  : “Doe”,

  age : 50,

  eyeColor  : “blue”

};

document.getElementById(“demo”).innerHTML = person.firstName + ” ” + person.lastName;

</script>

</body>

</html>

Output

JavaScript Objects

Creating an object:

John Doe

A JavaScript object is a collection of named values.

It is a common practice to declare objects using const keyword.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating an object:</p>

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

<script>

const person = {

  firstName : “John”,

  lastName  : “Doe”,

  age : 50,

  eyeColor  : “blue”

};

document.getElementById(“demo”).innerHTML = person.firstName + ” ” + person.lastName;

</script>

</body>

</html>

Output

JavaScript Objects

Creating an object:

John Doe

Object Properties

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:

  • Associative arrays in PHP.
  • Dictionaries in Python.
  • Hash tables in C.
  • Hash maps in Java.
  • Hashes in Ruby and Perl.

Object Methods

Methods are defined as 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

Creating a JavaScript Object

With JavaScript, you can define and create your own objects.

  • There are different ways to create new objects:
  • Create a single object with the object literal.
  • Create a single object, using a keyword new.
  • Define an object constructor, and then create objects of the constructed type.
  • Create an object using Object.create().

Using an Object Literal

This is the easiest way to create a JavaScript Object.

Using an object literal, you can define as well as 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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating a JavaScript Object:</p>

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

<script>

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

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Objects

Creating a JavaScript Object:

John is 50 years old.

Spaces and line breaks are not important. An object definition can span multiple lines:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating a JavaScript Object:</p>

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

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  age: 50,

  eyeColor: “blue”

};

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Objects

Creating a JavaScript Object:

John is 50 years old.

Using the JavaScript Keyword new

The following example create a new JavaScript object with new Object(), and then adds 4 properties:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Creating a JavaScript Object:</p>

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

<script>

const person = new Object();

person.firstName = “John”;

person.lastName = “Doe”;

person.age = 50;

person.eyeColor = “blue”;

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Objects

Creating a JavaScript Object:

John is 50 years old.

JavaScript Objects are Mutable

Objects are mutable: They are addressed by reference, not by value.

If a person is an object, the following statement will not create a copy of the person:

const x = person;  // Will not create a copy of person.

The object x is not a copy of a person. It is a person. Both x and person are the same objects.

Any changes to x will also change person because x and person are the same objects.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>JavaScript objects are mutable.</p>

<p>Any changes to a copy of an object will also change the original object:</p>

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

<script>

const person = {

  firstName: “John”,

  lastName: “Doe”,

  age:50,

  eyeColor: “blue”

};

const x = person;

x.age = 10;

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Objects

JavaScript objects are mutable.

Any changes to a copy of an object will also change the original object:

John is 10 years old.