➥ JS Tutorial
- JS HOME
- JS introduction
- JS Where to
- JS Output
- JS Statements
- JS Syntax
- JS Variables
- JS Operators
- JS Assignment
- JS Data Types
- JS Functions
- JS Objects
- JS Events
- JS Sting methods
- JS String Search
- JS Arrays Methods
- JS Arrays
- JS Sorting Arrays
- JS Array Iteration
- JS Math Object
- JS Comparison & Logical Operators
- JS if else and else if
- JS Switch Statement
- JS For Loop
- JS For In
- JS For Of
- JS While Loop
- JavaScript Break
- JS Sets
- JavaScript typeof
- JS Type Conversion
- JS Bitwise Operations
- JS JSON
- JS Best Practices
- JS Reserved Words
- JS Number Methods
➥ JS Objects
➥ JS Functions
➥ JS Classes
➥ JS HTML DOM
- JavaScript HTML DOM
- JS HTML DOM Document
- JS HTML DOM Elements
- Changing HTML
- JS Forms
- JS HTML DOM - CSS
- DOM Events
- HTML DOM Event Listener
➥ JS Browser BOM
➥ JS Web APIs
➥ JS AJAX
➥ JS JSON
Tutorial
Real Life Objects, Properties, and Methods
In real life, a car is an object.
A car has properties like weight and color, and methods like start and stop.
All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different times.
JavaScript Objects
JavaScript objects are containers for named values called properties.
Object Methods. Objects can also have methods.
Methods are actions that can be performed.
You have already learned that JavaScript variables are containers for data values.
This code assigns a simple value (Fiat) to a variable named car:
EXAMPLE ❯
Objects are variables too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
EXAMPLE ❯
Object Definition
In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.
EXAMPLE ❯
Object Properties
The name:values pairs in JavaScript objects are called properties:
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName OR objectName["propertyName"]
EXAMPLE ❯
EXAMPLE ❯
Object Methods
The Object class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.
Objects can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
| Property | Property Value |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
EXAMPLE ❯
The this Keyword
The JavaScript this keyword refers to the object it belongs to.
It has different values depending on where it is used:
In a method, this refers to the owner object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
Methods like call(), and apply() can refer this to any object
EXAMPLE ❯
Accessing Object Methods
You access an object method with the following
syntax:
objectName.methodName()
EXAMPLE ❯
Do Not Declare Strings, Numbers, and Booleans as Objects!
When a JavaScript variable is declared with the keyword "new", the variable is created as an object:
Avoid String, Number, and Boolean objects. They complicate your code and slow down execution speed.
Example:
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