JavaScript Scratches

Objects 01

Objects are a fundamental JavaScript datatype, and are probably the most common datatype used - for a good reason.

Almost everything we discuss can be considered an object (pun intended).

Considering that a JavaScript object is a collection of key-value pairs, what is a car?

make:Subaru
model:Outback
color:Magnetite Gray Metallic
year:2024
...
...
size:compact

... and the list goes on.

Those are 'key-value' pairs. Hmmm

Using the object type to describe 1 car is a bit of overkill - the data could just as easily be held in an array.

The beauty and power of an object is that it can hold other objects. Such as more cars, or books, or people, or [... fill in the space].

Other programming languages may refer to this datatype as a dictionary, associative array, hash, or hash table.

JavaScript key-value pairs are known as properties, and they are dynamic. Meaning they can be added, deleted, or altered.

Objects you create have 3 property attributes:

writable attribute
this property can be set
enumerable attribute
this property can be used in a for/in loop
configurable attribute
this property can deleted or altered

You might think 'this is beginning to sound like a database', but IT IS NOT A DATABASE.

However, it CAN be sorted, and searched - just not 'related'.

Object Creation

There are 3 ways to create an object:

object literal
using 'new'
using 'object.create'

Object Literal

The simplest way to create an object. It is simply a comma-separated list of name-value pairs, separated by colons, all enclosed in curly braces { }.

A property name and property value must be enclosed in double quotes " " if the string contains spaces.

A single object literal may create new objects if it is in the body of a loop or repeatedly called function.

Here is an example creating a list of books.

let books = [
	{
	"title":"Eloquent JavaScript 3E",
	"subtitle":"A Modern Introduction To Programming",
	"author":"Marijn Haverbeke",
	"pubyear":"2019",
	"publisher":"No Starch Press",
	"format":"paper",
	"isbn":"9781593279509",
	"keywords":"JavaScript|Programming|Web Development",
	"notes":"",
	},
	{
	"title":"bash Cookbook",
	"subtitle":"",
	"author":Carl Albing|JP Vossen|Cameron Newham",
	"pubyear":"2007",
	"publisher":"O'Reilly Media Inc.",
	"format":"paper",
	"isbn":"97805965826788",
	"keywords":"bash|Programming|System Administration",
	"notes":"",
	},
];

Obviously we can have more than 2 books in our library. And there are several other properties you might want to include.

That will be an exercise for the reader.

I included multiple authors and keywords in 1 property with the pipe | symbol as a separator because we can programmatically split that field on the pipe character. However, we can also place each author into separate fields.

The code for this object is in this HTML code
but it would be best practice to have it in a separate file.

The above code was saved in a text file 'myLibrary.txt'. Then called as an external JavaScript file:

<script src="myLibrary.txt"></script>

Now we can do more with it ...

<script>
const NumBooks=books.length;
Sprint('<p>There are ' + NumContacts + ' records here.</p>');
</script>

The 'Sprint' command is a function I wrote to replace the JavaScript command to print something to the screen: document.write(). Yes, I'm lazy. You are welcome to use it yourself.

/* JS print short-cut */
var Sprint = function(s) {
    document.write(s);
}

Here are some points for them:

Iterating through that object:

<script>
for (let i = 0; i < NumBooks; i++) {
	Sprint(books[i].title+'<br/>'
	+books[i].author+'<br/>'
	+books[i].pubyear+'<br/>'
	+books[i].keywords+'<br/>======================<br/>');
}
</script>

Note that the indexing variable i is checked for a value less than NOT less than or equal to NumBooks. Otherwise you will get a JavaScript error:
TypeError: undefined is not an object (evaluating 'books[i].title')

This is because the loop is trying to access a parameter outside the loop range.

What is 'this'

If you've been reading JavaScript books or online material you might have come across some code with a line referring to something as 'this'.

It appears to be some kimd of variable, and I'm sure you looked at that twice trying to sort out exactly where 'this' was defined or initialized with a value.

Fear not - 'this' is actually a keyword (reserved) that refers to the object that is executing the current function. Its value is determined by how a function is called, not where it is defined.

There are a few common places it is used:

Global Context
If used outside a function or object directly in a script, it refers to a global object. In a browser, that is usually the window object.
```
Sprint(this+'<br/>');
```
Regular Functions
Here it also refers to the global object
```
function WhoDunIt() {
	Sprint(this+'<br/>');
}
WhoDunIt();
```
Constructor Function

constructor

function Book=(Title,PubYear) {
	this.Title = Title;
	this.Pubyear = PubYear;
}
const myBook = new Book("Steal This Book",1974);
console.log(myBook.Title);
Sprint(myBook.Title+" - "+myBook.PubYear+"<br/>");

Object Method
If a function is a method of an object, called using that object, it refers to the object.
```
const Friend={
	name: "Terry",
	HeyYou: function() {
		console.log(`Hey ${this.name}`);
		Sprint("How ya doin' "+this.name+"<br/>");
	}
};
Friend.HeyYou();
```

Event Handler
If you need to get information back from an event (mouseclick,etc.) this (no pun) is the one to use.
```
const MyButton=document.getElementById('myButton');
MyButton.addEventListener('click',function() {
	const Msg="Ouch! Not so hard eh!";
	this.textContent=Msg;
	this.style.backgroundColor="#ff6701";
});
```