Chapter 3
Types - Objects
Objects are used for collections of data or collections of functionalities.
Using random variables like:
const name='aye aye'
const age=40
That is not the best way to do things, because the values are not associated.
Instead is create an object called person.
Using two curly brackets and a semi colon. That is the most common way to make
an object, but there are other ways that we will go over.
const person={}
Inside of the person object, you have what are called properties and values. Add the
following to types.js
const person={
first:'nway yu aung',
last:'aung',
age:37
}
The order doesn't matter in an object. If you need the order to matter, use an array
or Map data structure.
1
Exercises 3.1
const name='aye aye'
const age=40
console.log(typeof name)
console.log(typeof age)
const person={
first:'nway yu aung',
last:'aung',
age:37
}
console.log(typeof person)
To access the properties, using the dot notation.
console.log(person.first)
Exercises 3.2
const name='aye aye'
const age=40
console.log(typeof name)
console.log(typeof age)
const person={
first:'nway yu',
last:'aung',
age:37
}
console.log(person.first)
console.log(person.last)
console.log(person.age)
To add and edit the property.
let bird = { color: "Green", legs: 2 }
console.log(bird.color)
console.log(bird.legs)
2
Output
Green
2
let bird = { color: "Green", legs: 2 }
console.log(bird.color)
console.log(bird.legs)
bird.name = "Shwe Gal" //add property
bird["color"] = "Blue" //edit property
console.log(bird.name)
console.log(bird.color)
Output
Green
2
Shwe Gal
Blue
3
Using an Object Literal
Exercises 3.3
myexercise.js
// Create an empty Object
const person = {};
// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
// Display Data from Object
document.write(person.firstName + " is " + person.age + "
years old.")
test.html
<!DOCTYPE html>
<html>
<body>
<h1>Creating JavaScript Objects</h1>
<h2>Using an Object Literal</h2>
<script src="myexercise.js"></script>
</body>
</html>
4
Using the new Keyword
Exercises 3.4
newObject.html
<!DOCTYPE html>
<html>
<body>
<h1>Creating JavaScript Objects</h1>
<h2>Using the new Keyword</h2>
<script src="newObject.js"></script>
</body>
</html>
newObject.js
// Create an Object
const person = new Object();
person.firstName = "Nay";
person.lastName = "Chi";
person.age = 27;
person.eyeColor = "blue";
// Diplay Object Content
document.write(person.firstName + " is " + person.age + "
years old.")
document.write("<br>")
document.write("Her eye color is "+person.eyeColor)
5
Deleting Properties
The delete keyword deletes a property from an object:
Exercises 3.5
delete.html
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Object Properties</h1>
<h2>Deleting a Property</h2>
<script src="newObject.js"></script>
</body>
</html>
delete.js
const person = {
firstname: "John",
lastname: "Doe",
age: 50,
eyecolor: "blue"
};
delete person.age;
document.write(person.firstname + " is " + person.age + "
years old.")
6
Nested Objects
Exercises 3.6
nestedObject.html
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>Accessing Nested Objects</h2>
<script src="newObject.js"></script>
</body>
</html>
nestedObject.js
// Create nested Objects
const myObj = {
name: "John",
age: 30,
myCars: {
car1: "Ford",
car2: "BMW",
car3: "Fiat"
}
}
document.write(myObj.myCars.car2)
