JavaScript Advanced

Instructor : Dr Farzana Jabeen

Recap
 Recap: JavaScript Objects
• JavaScript is an Object Oriented Programming
(OOP) language. An OOP language allows you
to define your own objects and make your
own variable types.
• Note that an object is just a special kind of
data. An object has properties and methods.
• To declare an object
var myObj = new Object();
• To set properties
myObj.name = “Alex”
 OOJS: Example 1
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years
old.";
</script>

</body>
</html>
 OOJS: Example 2
<p id="demo"></p>

<script>
var person = {
firstName: "John",
lastName : “Smith",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " +
person["lastName"];
</script>
 OOJS: Example 3
<p id="demo"></p>
<script>
var person = {
firstName: "John", lastName : “Smith",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
document.getElementById("demo").innerHTML =
person.fullName();
 OOJS: Example 4
<p id="demo"></p>
<script>
var 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>
OOJS: Using an Object Constructor
• to create many objects of one type
<p id="demo"></p>
<script>
function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " +
myMother.age;
</script>
 OOJS: The this Keyword
• this, is the object that "owns" the JavaScript
code.
– when used in a function, is the object that "owns"
the function
– when used in an object, is the object itself
– in an object constructor does not have a value. It
is only a substitute for the new object
• this will become the new object when the constructor
is used to create an object
 OOJS: Mutable
• addressed by reference, not by value.
• var x = y; // This will not create a copy of y.
– Both x and y points to the same object.
<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:“Smith", age:50,
eyeColor:"blue"}

var x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
 OOJS: Prototypes
• Every JavaScript object has a prototype. The
prototype is also an object.
• All JavaScript objects inherit their properties
and methods from their prototype.
• The Object.prototype is on the top of the
prototype chain.
• All JavaScript objects (Date, Array, RegExp,
Function, ....) inherit from the
Object.prototype.
 OOJS: Creating a Prototype
function person(first, last,
age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
The constructor function is the prototype for the
person objects
 OOJS: Adding to your Objects
• Adding a Property to an Object
– myFather.nationality = "English";
• Adding a Method to an Object
– myFather.name = function () {
return this.firstName + " " + this.lastName;
};
OOJS: Adding Properties to a Prototype
• Adding a Property to a Prototype
– myFather.nationality = "English";
– function person(first, last, age,
eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English"
}
 OOJS: Adding Properties to a
Prototype(Alternate)
• Adding a Property to a Prototype
– myFather.nationality = "English";
– function person(first, last, age,
eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
person.prototype.nationality
= "English";
 OOJS: Adding Methods to a Prototype
• Adding a Method to a Prototype
– function person(first, last, age,
eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {return
this.firstName + " " +
this.lastName;};
}
 OOJS: Adding Methods to a
Prototype(Alternate)
• Adding a Method to a Prototype
– function person(first, last, age,
eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
person.prototype.name = function() {
return this.firstName + " " +
this.lastName;
};
 JSON
• JavaScript Object Notation
• JSON is lightweight data interchange format
• JSON is language independent
– syntax is derived from JavaScript object notation
syntax, but the JSON format is text only.
– Code for reading and generating JSON data can be
written in any programming language.
• JSON is "self-describing" and easy to understand
• https://www.programiz.com/javascript/json
 JSON Example
{
"employees":[

{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna",
"lastName":"Smith"},

{"firstName":"Peter", "lastName":"Jones"}
]
}

• An array of 3 employee records

 JSON & JS Objects
• The JSON Format Evaluates to JavaScript
Objects
• The JSON format is syntactically identical to the
code for creating JavaScript objects.
• Because of this similarity, a JavaScript program
can easily convert JSON data into native
JavaScript objects.
• To convert JSON to a JS Object
– var obj = JSON.parse(text);
 JSON Syntax
• Data is in name/value pairs
– "firstName":"John"
• Data is separated by commas
– "firstName":"John", "lastName":"Do
e"
• Curly braces hold objects
– {"firstName":"John", "lastName":"D
oe"}
• Square brackets hold arrays
 JSON Syntax
• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays
– "employees":[

{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna",
"lastName":"Smith"},

{"firstName":"Peter", "lastName":"Jones"}
]
 JSON vs JS Objects
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;

var jsobj = {employees: [{firstName: "John",lastName:"Doe"},

{firstName: "Anna",lastName:"Smith"},
{firstName: "Peter",lastName:"Jones"}
]};

document.getElementById("demo2").innerHTML =
jsobj.employees[1].firstName + " " + jsobj.employees[1].lastName;
</script>
 JSON.stringify()
• JSON is to exchange data to/from a web server.
• When sending data to a web server, the data has to
be string.
• Convert any JavaScript datatype into a string
with JSON.stringify().

const obj = {name: "John", age: 30, city: "New

York"};
const myJSON = JSON.stringify(obj);

myJSON is now a string, and ready to be sent

to a server:
Today’s Lecture
JS object Methods
 JavaScript Object.assign()
The Object.assign() method copies properties
from
one or more source objects to a target object.
Object Protection Method
 Object Protection
With const you can not re-assign the object, but you can still change the
value of a property, delete a property or create a new property.

The Object.preventExtensions() method prevents adding properties to

an object.
 Promise JS Object
• The Promise Object represents the
completion or failure of an asynchronous
operation and its results.
• A Promise can have 3 states:
pending initial state
rejected operation failed
fulfilled operation completed
 Modules

• Allow you to break up your code into separate files.

• Easy to maintain a code-base.
• Modules are imported from external files with
the import statement.
• Modules also rely on type="module" in the <script>
tag.
JavaScript Modules
Jesse is 40 years old.
Thank you

QUESTIONS?