web222 assignment 4

Pardon Our Interruption

As you were browsing something about your browser made us think you were a bot. There are a few reasons this might happen:

• You've disabled JavaScript in your web browser.
• You're a power user moving through this website with super-human speed.
• You've disabled cookies in your web browser.
• A third-party browser plugin, such as Ghostery or NoScript, is preventing JavaScript from running. Additional information is available in this support article .

To regain access, please make sure that cookies and JavaScript are enabled before reloading the page.

WEB222 - Week 4

Suggested readings.

• Object-oriented JavaScript for beginners
• ExploringJS, Chapter 17. Objects and Inheritance
• ExploringJS, Chapter 20. Dates
• ExploringJS, Chapter 21. Math

Objects in JavaScript

So far we’ve been working with built-in Objects in JavaScript. We can also create our own in order to model complex data types in our programs. There are a number of ways to do this, and we’ll look at a few of them now.

An Object in JavaScript is a map (also known as an associative array or a dictionary ), which is a data structure composed of a collection of key and value pairs. We call an Object ’s key/value pairs properties . Imagine a JavaScript Object as a dynamic “bag” of properties, a property-bag. Each key is a unique String , and an Object can only contain a given key once. An Object can have any number of properties , and they can be added and removed at runtime.

Much like we did with an Array or RegExp , we can create instances of Objects via literals. An Object literal always starts with { and ends with } . In between these curly braces we can optionally include a list of any properties (comma separated) we want to attach to this Object instance. These properties are written using a standard key: value style, with the property’s name String coming first, followed by a : , then its value. The value can be any JavaScript value, including functions or other Objects .

Here are a few examples:

Accessing Elements in an Object

Object property names are String s, and we can refer to them either via the dot operator .name , or using the bracket operator ['name'] (similar to indexing in an Array ):

Why would you choose the dot operator over the bracket operator, or vice versa? The dot operator is probably more commonly used; however, the bracket operator is useful in a number of scenarios. First, if you need to use a reserved JavaScript keyword for your property key, you’ll need to refer to it as a string (e.g., obj['for'] ). Second, it’s sometimes useful to be able to pass a variable in order to lookup a property value for a name that will be different at runtime. For example, if you are using usernames as keys, you might do users[currentUsername] , where currentUsername is a variable holding a String for the logged in user.

Destructuring Objects

In the same way that we destructured Array values into new variables, we can also use the same technique with an Object . Recall that JavaScript allows us to Destructuring Assignment to unpack values in an Array or Object into distinct variables. Consider each of the following methods, both of which accomplish the same goal:

With an Array , we learned that you can destructure various elements into new variables:

The same can be done with an Object . Imagine a complex Object , with lots of properties, but we’re only interested in a few of them:

This is a powerful technique for extracting data from an Object .

Modifying Object Properties

Object literals allow us to define an initial set of properties on an Object , but we aren’t limited to that set. We can easily add new ones:

Here we define an empty Object , but then add new properties. Because we can add properties after an Object is created, we always have to deal with a property not existing. If we try to access a property that does not exist on an Object , there won’t be an error. Instead, we will get back undefined for its value:

Because properties may or may not exist at runtime, it’s important to always check for a value before trying to use it. We could rewrite the above to first check if data has an inventory property:

Another common situation where you have to deal with this is working with deep structures. Consider an Object that defines the structure of a level in a video game. The level includes various rooms , some of which contain a monster :

When working this code, we can access a particular room by its ID :

However, we used an ID that doesn’t exist, we’d get back undefined :

If we then try to access the monster in that room, our program will crash:

JavaScript provides a few ways to deal with this problem. Consider:

In the third version above we’ve used optional chaining via the ?. operator. This stops us from going any further in an object chain, when something is undefined.

Using Objects: dealing with optional parameters

A very common pattern in JavaScript programs that uses this concept is optional argument passing to functions. Instead of using an unknown number of arguments for a function, we often use an options Object , which may contain values to be used in the function. Consider the case of starting a game and sometimes passing existing user data:

In the code above, we have an options Object that defines some, but not all of the properties our initGame function might use. We wrote initGame using a single argument so that it was easier to call: we didn’t need to worry about the order or number of arguments, and could instead just define an Object with all of the properties we had. The initGame function examined the options at runtime to see which properties existed, and which were undefined and needed a default value instead. Recall that we can use the logical OR ( || ) operator to choose between two values at runtime.

It’s also common to see people use destructuring here:

The value of what we’ve done above is that passing many arguments to a function is easier when we can name them as properties on an Object instead of having to pass them positionally as arguments.

Updating, Clearing, and Removing properties

We’ve seen that properties can be defined when declared as part of a literal and added later via the . or [] operators. We can also update or remove values after they are created:

An Object ’s property keys are unique, and setting a value for o.name more than once doesn’t add more properties–it overwrites the value already stored in the existing property. We can also clear (remove the value but not the key) or delete (remove the entire property from the object, key and value) things from an Object .

Why would you choose to assign null vs. use delete ? Often we want to get rid of a key’s value, but will use the key again in the future (e.g., add a new value). In such cases we just null the value by assigning the key a value of null . If we know that we’ll never use this key again, and we don’t want to retain it on the Object , we can instead completely remove the property (key and value) with delete . You’ll see both used. For the most part, setting a key’s value to null is probably what you want.

Using Objects: creating sets to track arbitrary lists

Another common use of Object s, and their unique property keys, is to keep track of a sets, for example to count or keep track of an unknown number of items. Consider the following program, which tracks how many times each character appears within a String . The code uses the [] operator to allow for the keys to be created and accessed via a variable ( char ). Without an Object we would have to hard-code variables for each separate letter.

Complex Property Types: Object , Function

We said earlier that Object properties can be any valid JavaScript type. That includes Number , String , Boolean , etc., also Object and Function . A property may define a complex Object of its own:

Here we define a part , which has an id ( part.id ) as well as a complex property named info , which is itself an Object . We access properties deep in an Object the same way as a simple property, for example: part.info.ref.length means: get the length of the ref array on the info property of the part Object . An Object ’s properties can be Object s many levels deep, and we use the . or [] operators to access these child properties.

An Object property can also be a function. We call these functions methods . A method has access to other properties on the Object via the this keyword, which refers to the current Object instance itself. Let’s add a toString() method to our part Object above:

The toString property is just like any other key we’ve added previously, except its value is an anonymous function . Just as we previously bound function expressions to variables, here a function expression is bound to an Object ’s property. When we write part.toString we are accessing the function stored at this key, and by adding the () operator, we can invoke it: part.toString() says get the function stored at part.toString and call it . Our function accesses other properties on the part Object by using this.* instead of part.* . When the function is run, this will be the same as part (i.e., a reference to this Object instance).

The this keyword in JavaScript is used in different contexts, and has a different meaning depending on where and how it is used. We will return to this and its various meanings throughout the course.

Constructor Functions

Sometimes we need to create lots of Objects that have the same layout. For example, we might be defining lots of users in an application. All of our user Objects need to work the same way so that we can pass them around within our program, to and from functions. Every user needs to have the same set of properties and methods, so we decide to write a factory function that can build our user Objects for us based on some data. We call such functions a Constructor :

Notice that unlike all previous functions we’ve defined, the User function starts with a capital U instead of a lower case u . We use this naming convention to indicate that User is special: a constructor function. A constructor function needs to be called with the extra new keyword in front of it. When we say new User(...) we are saying, create a new object, and pass it along to User so it can attach various things to it .

A constructor can also add methods to an object via this :

In the code above, we’re creating a new function every time we create a new User. As we start to create lots of users, we’ll also be creating lots of duplicate functions. This will cause our program to use more and more resources (memory), which can lead to issues as the program scales.

Object Prototypes

What we would really like is a way to separate the parts of a User that are different for each user (the data: id , name ), but somehow share the parts that are the same (the methods: toString ). JavaScript gives us a way to accomplish this via an Object ’s prototype .

JavaScript is unique among programming languages in the way it accomplishes sharing between Object s. All object-oriented languages provide some mechanism for us to share or inherit things like methods in a type hierarchy. For example, C++ and Java use classes, which can inherit from one another to define methods on parents vs. children. JavaScript uses prototypal inheritance and a special property called prototype .

In JavaScript, we always talk about Object s, because every object is an instance of Object . Notice the capital O in Object , which should give you an indication of what it is: a constructor function. In a previous week we said that an Array is an Object , and a RegExp is an Object . This is true because of JavaScript’s type system, where almost everything is chained to Object .

JavaScript objects always have a prototype, which is an object to which their .prototype property refers. At runtime, when we refer to an object’s property, JavaScript first looks for that property on the object itself. If it doesn’t find it, the prototype object is visited, and the same search is done. The process continues until the end of the prototype chain is reached at Object .

Let’s rewrite our User so that the toString method is moved from each user instance to the prototype of all user instances:

This code looks very similar to what we originally wrote. Notice that we’ve moved toString out of the User function, and instead attached it to User.prototype . By doing so, we’ll only ever need a single copy of this function: every new User() instance we create will also include a reference to a prototype object, which contains our function. When we use user1.toString() , JavaScript will do something like this:

• does user1 have a property called toString ? No, we didn’t add one in the constructor.
• does user1.prototype have a property called toString ? Yes, use that.

What if we’d written user1.something() ?

• does user1 have a property called something ? No, we didn’t add one in the constructor.
• does user1.prototype have a property called something ? No.
• does user1.prototype.prototype (i.e., Object ) have a property called something ? No.
• there are no more objects in the prototype chain, throw an error

Whenever a method is used on a prototype, we still pass the current instance so we can get access to its data. Notice in our User.prototype.toString method, we still referred to this , which will be the instance of our user, and give us access to the correct data ( name , id ).

There are times when defining a method inside a constructor makes sense vs. putting it on the prototype. The prototype will only have access to public properties of an object instance, meaning things you explicitly add to this and expose to the rest of your program. Sometimes we want to define some data, but hide it from the rest of a program, so it can’t be changed after it gets created. Consider the following example, which uses a closure to retain access to a variable in the scope of the constructor without exposing it:

JavaScript’s class and Object

For a long time, JavaScript didn’t have any notion of a class. Most Object-Oriented languages are based on the idea of a class, but JavaScript only has runtime instances (i.e., Object s) and didn’t need them.

In recent years, a new syntax has been added to JavaScript to allow those more familiar with traditional OOP style programming to define their Object s using a new class keyword.

Let’s recreate our code above as a class in JavaScript:

This code still uses the same prototype technique we learned above above, but does so in a more familiar syntax.

We can even use other OOP features like inheritance:

Practice Problem: a Morse Code translator

Morse code is a system of encoding developed in the 1800s that allowed transmission of textual messages over signal systems that only supported on/off (1 and 0) notations.

Complete the program below as specified. Your program should be able to translate messages like -- --- .-. ... ./-.-. --- -.. . into MORSE CODE and vice versa. Use what you learned above about Object s, and also some of the built-in Object s we’ve studied, in particular RegExp and String .

Use the following limited set of morse code to use in this exercise. You could expand your program to handle more complex messages later if you want:

NOTE: letters are separated by a single space ( ' ' ) within a word, and words are separated with a / . For example, the words MORSE CODE would translate to -- --- .-. ... ./-.-. --- -.. .

You can download the code above as well as a possible solution .

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

This repository contains all the WEB222 (Web Programming Principles) assignments that I have done as a student at Seneca College. This repo also contains all the notes and the learning material that I created/used to learn web development.

Gulshanpreet-singh/WEB222-Learning-and-Assignments

Folders and files.

Repository files navigation

Web222 learning and assignments, marks secured.

• Assignment 1: 10/10
• Assignment 2: 10/10
• Assignment 3: 6/6
• Assignment 4: 6/6
• Assignment 5: 6/6

POINTS TO NOTE

• I have not done assignment 4 and 5 using the method that the word document specified. I have used my own methods to do the assignment.

Please don't just copy the code mindlessly without trying to solve the problems yourself, it's totally pointless if you actually wanna learn how to write software and a blatant violation of the Academic Integrity policy of the course.

• JavaScript 96.3%