Manipulating variable data - AT THE GATES OF ENLIGHTENMENT - JavaScript in Plain Language (2015)

JavaScript in Plain Language (2015)

PART I: AT THE GATES OF ENLIGHTENMENT

1.5 Manipulating variable data

When we store a value in the computer’s memory under JavaScript supervision, this value inherits some properties and methods characteristic of the type of data the value represents.

Where do these properties/methods come from?

They exist in the JavaScript library located in your browser. When we create a new instance of one of the common types, our instance immediately inherits lots of tools we can use to help us program outcomes.

Methods and Properties

Properties are qualities the new data inherits from its data type. It will make more sense later.

Methods are functionality that creates actions upon the data.

· There is no need to memorize these terms. They will be repeated so many times that you will know them by heart before you finish reading the book. Just read along and understand the concepts. However, if you’re curious, each term has a link to Wikipedia where you can read to your heart’s delight.

To see an example of a property in action let’s declare a new variable of the string type:

var myName = "Tony";

Since "Tony" is of type string, there are things I can do with this type of data, or things I can find out about string data, such as its length in characters:

myName.length;

The Console will display 4 and it means that the value of variable myName which is "Tony", is 4 characters long.

length is one of the properties inherited from the type string. Other types of data also use this property because it comes very handy in decision making as you will see over and over again.

Did you notice the dot between myName and length?

The DOT operator

The dot in myName.length glues variable myName to its property length.

The Dot operator connects the variable to its property, or the parent to the child. We place the root first, or the owner of the property. Then map its members or children by using dots:

parent.child.grandchild;

or in a more explicit example:

window.myName.length;

window is actually the parent of variable myName. We will come back to it in a while.

It’s almost like saying “What is the person’s name?”, Do you see the ‘s? That ties the name to the person. The dot notation works under the same principle.

In this case it is pretty simple: we start at the variable name and go down one level to its property length. Other times the targeting address may become more complex, perhaps another term or two down the pipe. We will have a chance to work with the dot operator throughout the book.

When working with the dot operator we are using what is called Dot Notation, but there is another alternative syntax which is called Bracket Notation.

Please refer to the next page for a brief introductory explanation of bracket notation.

The Bracket notation

I don’t mean to confuse you by mentioning two different notations at the same time. We will be using bracket notation extensively later. Consider this as a primer about it.

Instead of instead of: myName.length;
Type in your console the following:

myName["length"];

It displays the number 4, just like it did with Dot Notation. Notice how length is wrapped in quotes inside of that bracket. We are passing "length" as a string, or as a label, and JavaScript will reconvert it back to its rightful rank of a property from its library. There are advantages of using Bracket Notation because it is more versatile, but don’t break your head over it just yet. We will use both Dot Notation and Bracket Notation. Bracket Notation is mostly used in dynamic situations. You will see later that Dot Notation is “hard wired” and Bracket Notation is “soft wired” (when we don’t know the real value at the time of writing the code).

Sometimes we go out on the sedan, and other times we take the pickup truck! It is the same thing with notation syntaxes.

An example of a method

The string data also inherits methods such as .toUpperCase():

myName.toUpperCase();

It displays "TONY" instead of "Tony".

Was the variable myName changed to uppercase?

No, it wasn’t. It only displayed it in upper case mode, but the value remains as it was originally declared.

We could however convert the original value to uppercase by reassigning the variable myName to itself as it gets transformed:

myName = myName.toUpperCase();

Now myName contains "TONY" as its value. The original Tony was discarded. Do you see how it happened? We assigned the original variable to its own transformation. It’s almost like the dog that was able to catch its own tail.

What’s with the parentheses ( ) ?

toUpperCase is a method, it processes some action. That sounds like a function, which we haven’t covered yet. The ( ) represents action, or function processing, or evaluation.

Whenever you see a pair of parentheses think of something being evaluated by JavaScript, from which a result will be returned back. In this case the data is being converted to uppercase; that’s the result of the evaluation.

More about the parentheses later. Don’t worry about it for now, juts acknowledge it and move forward.

Here’s another method: toLowerCase():

myName.toLowerCase();

Now the value of myName is "tony". Did you notice the T is in lowercase? To transform a string to lowercase except the first character would be called capitalizing. Unfortunately there is no direct method in JavaScript to capitalize. It’s either all lower case or all uppercase. We can do it with a combination of methods but that is a bit advanced for now. Also, if you know CSS and you are displaying the result in an HTML page you can always use the CSS text transformation property capitalize.

· Note: both words toUpperCase() and toLowerCase() have certain characters capitalized and others characters in lowercase, right? JavaScript is case sensitive, it sees A and a as two different characters.

The reason why I wrote toUpperCase and toLowerCase in this way was not because camelCase is my preferred writing style; it is because that is the correct name given to these methods by JavaScript itself. If we write tolowercase, it will not work. As you remember, typeof was all in lowercase, we couldn’t do typeOf. That would not work. This is one of the reasons why the automatic completion feature on the Console is very helpful: it takes the spelling doubts out of the equation.

When you are finished with this book, if you want to study all the properties and methods of all the types in JavaScript, you may consider my other eBook which is a JavaScript follow up from this one:

JavaScript Objects Functions and Arrays Explained.

There are plenty of exercises and projects in there.

Speaking of exercises, let’s do some more lab work.