JavaScript 101: JavaScript and OOP

  • Article

As I mentioned in the previous post, JavaScript 101: An Introduction, JavaScript is an Object Oriented Programming (OOP) language, and as such, it is comprised of objects. A bunch of objects bundled together is called an object model, also called an application programming interface (API). Each object in an object model has characteristics that describe it — properties, actions that you can take against it — methods, and actions that happen in response to other actions — events.

JavaScript is admittedly not as robust as most compiled OOP languages; the object model is simple by comparison, but in order to write, modify, or even reuse someone else's JavaScript code, you should understand the basics of an object model.

Properties — Properties describe the characteristics of an object. To use the car analogy that I used in the previous post, a car has characteristics, or properties, like make, model, and color. Often, properties have a single value. For example the make property of the car object might have a value of "Dodge"; the model property might have a value of "Durango"; and the color property might have a value of "Red." Properties can also be objects. These are called "accessor properties" because they access another object. In our car analogy, the car object might have a steeringWheel property that accesses a steeringWheel object, and the steeringWheel object may have its own set of properties, methods, and events.

Methods — Methods are actions that you can take against an object. To continue the car analogy, actions that you can perform with a car might be start, drive, and get a tune up. Some methods return values; other methods require values passed into them. For example, the start method of the car object might return a true or false (boolean value), and the tuneup method might require passing in a date for when the tune up occurs. The values that methods return are called return values; values passed into methods are called arguments.

Note   The term "parameters" is also often used to refer to the values passed into methods. The actual definitions of these two terms differ somewhat, but a complete discussion of these differences are beyond the scope of this discussion. I'll explain these terms a bit later.

Events — Events are actions that happen in response to other actions. The car analogy works here, also. For example, the car object might have an event named die to handle the possibility of the engine quitting unexpectedly, or it may have a crash event to handle the possibility if the car is involved in an accident.

Collections — Another part of an object model is collections. Collections are comprised of one or more instances, or copies, of the same object.  For example, in the car analogy, a car object might have a tires collection that has five instances of the tire object (with one tire object having the isSpare property set to true).

Don't worry if this all seems confusing. I'll explain properties, methods, events, and collections a bit more when I discuss specific objects in the JavaScript object model. However, before I describe the objects in the JavaScript object model, there are a few things you need to understand first. I will describe some of these in greater detail later, but you will need at least a general understanding of these before moving onto the specifics of the JavaScript object model.

Variables — In programming, variables are considered temporary storage. The can represent objects or data, such as strings or numbers.

Data types — Simply put, data type indicates the type of data in a variable. The three basic data types in JavaScript are strings, numbers, and booleans. String variables contain text, number variables contain ... well ... numbers, and boolean variables indicate true/false, on/off, and yes/no conditions.

Case sensitivity — JavaScript is case sensitive. This means that JavaScript considers the word "doc" and the word "Doc" as two different words and not the same word.

Arrays — Arrays are variables that contain multiple values of the same type. For example, an array of numbers could contain the values 1, 3, 45, 50, and 69 all within the same variable name. JavaScript programmers frequently use arrays to store multiple values.

So the things you learned about JavaScript in this post are

  • The JavaScript object model (or application programming interface) is comprised of objects, collections, properties, methods, and events.
  • Properties describe characteristics of an object.
  • Methods perform actions against an object.
  • Events handle actions that are performed against an object.
  • Variables are temporary storage.
  • Data types indicate the type of data contained in variables.
  • JavaScript is case sensitive.
  • Arrays contain multiple values of the same type.

This is a lot of information, but I think we're through with the basics. Next post, I'll diagram the specific objects in the JavaScript object model.