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.