Object Properties

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 for…in Loop

The JavaScript for…in statement loops through the properties of an object.

The syntax

for (let variable in object) {

  // code to be executed

}

The block of code within the for…in the loop will be executed once for each property.

Looping through the properties of an object:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Properties</h2>

<p>Looping object property values:</p>

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

<script>

const person = {

  fname:”John”,

  lname:”Doe”,

  age:25

};

let txt = “”;

for (let x in person) {

  txt += person[x] + ” “;

}

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

</script>

</body>

</html>

Output

JavaScript Object Properties

Looping object property values:

John Doe 25

Adding New Properties

New properties can be added to an existing object by simply giving it a value.

Assume that the person object already exists – you can then give it new properties:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Properties</h2>

<p>Add a new property to an existing object:</p>

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

<script>

const person = {

  firstname: “John”,

  lastname: “Doe”,

  age: 50,

  eyecolor: “blue”

};

person.nationality = “English”;

document.getElementById(“demo”).innerHTML =

person.firstname + ” is ” + person.nationality + “.”;

</script>

</body>

</html>

Output

JavaScript Object Properties

Add a new property to an existing object:

John is English.

Deleting Properties

The delete keyword deletes a property from an object:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Properties</h2>

<p>Deleting object properties.</p>

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

<script>

const person = {

  firstname: “John”,

  lastname: “Doe”,

  age: 50,

  eyecolor: “blue”

};

delete person.age;

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Object Properties

Deleting object properties.

John is undefined years old.

or delete person[“age”];

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Properties</h2>

<p>Deleting object properties.</p>

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

<script>

const person = {

  firstname: “John”,

  lastname: “Doe”,

  age: 50,

  eyecolor: “blue”

};

delete person[“age”];

document.getElementById(“demo”).innerHTML =

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

</script>

</body>

</html>

Output

JavaScript Object Properties

Deleting object properties.

John is undefined years old.

  • The delete keyword deletes both the value of the property and the property itself.
  • After deletion, the property cannot be used before it is added back again.
  • The delete operator is created to be used on object properties. It does not affect variables or functions.
  • The delete operator must not be used on predefined JavaScript object properties. It can crash your application.

Nested Objects

Values in an object can be another object:

Example

myObj = {

  name:”John”,

  age:30,

  cars: {

    car1:”Ford”,

    car2:”BMW”,

    car3:”Fiat”

  }

}

You can access nested objects using the dot notation or the bracket notation:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Access nested objects:</p>

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

<script>

const myObj = {

  name: “John”,

  age: 30,

  cars: {

  car1: “Ford”,

  car2: “BMW”,

  car3: “Fiat”

  }

}

document.getElementById(“demo”).innerHTML = myObj.cars.car2;

</script>

</body>

</html>

Output

JavaScript Objects

Access nested objects:

BMW

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Objects</h2>

<p>Access nested objects:</p>

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

<script>

const myObj = {

  name: “John”,

  age: 30,

  cars: {

  car1: “Ford”,

  car2: “BMW”,

  car3: “Fiat”

  }

}

document.getElementById(“demo”).innerHTML = myObj.cars[“car2”];

</script>

</body>

</html>

Output

JavaScript Objects

Access nested objects:

BMW

Nested Arrays and Objects

Values in objects can be arrays, and values in arrays can be objects:

Example

const myObj = {

  name: “John”,

  age: 30,

  cars: [

    {name:”Ford”, models:[“Fiesta”, “Focus”, “Mustang”]},

    {name:”BMW”, models:[“320”, “X3”, “X5”]},

    {name:”Fiat”, models:[“500”, “Panda”]}

  ]}

To access arrays inside arrays, use a for-in loop for each array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>Nested JavaScript Objects and Arrays.</h2>

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

<script>

let x = “”;

const myObj = {

  name: “John”,

  age: 30,

  cars: [

    {name:”Ford”, models:[“Fiesta”, “Focus”, “Mustang”]},

    {name:”BMW”, models:[“320”, “X3”, “X5”]},

    {name:”Fiat”, models:[“500”, “Panda”]}

  ]

}

for (let i in myObj.cars) {

  x += “<h2>” + myObj.cars[i].name + “</h2>”;

  for (let j in myObj.cars[i].models) {

    x += myObj.cars[i].models[j] + “<br>”;

  }

}

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

</script>

</body>

</html>

Output

Nested JavaScript Objects and Arrays.

Property Attributes

All properties have a name and also consist of value.

The value is one of the property’s attributes.

Other attributes are: enumerable, configurable, and writable.

In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable).

Prototype Properties

JavaScript objects inherit the properties of their prototype.

The delete keyword does not delete inherited properties, but if you delete a prototype property, it affects all objects inherited from the prototype.