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.