please dont rip this site

Object Oriented JavaScript Tutorial

FIRST: Nearly everything in Javascript is an object. Almost all of it. Variables, functions, everything. But Object Oriented Programming is a way of thinking, not a type of language. You can orient your JavaScript programming around the objects with methods, prototypes, messages, etc... or ignore objects and do function based sequential programming. You can also do object oriented programming in languages that don't have objects (although it can be quite difficult and may not be worth the effort). The orientation doesn't depend on the language, but languages that support objects nicely are really nice. JavaScript supports object oriented programming; it does NOT require it, nor is it a true Object Oriented language. JavaScript is flexible.


Programming is first seen as writing a list of instructions. Like a recipe or assembly instructions for a toy or furniture. Once we start actually writing programs, we pretty quickly see the need for variables; labeled or "named" boxes to store data which we act upon with the instructions.

Then we see that the data is every bit as important as the instructions. Maybe it isn't a set of instructions that changes data, but data that learns to change via sets of instructions? It is simply a shift in point of view.

Often, the data is a model of something in the physical world. The application we are writing is keeping track of real world things. Cars, or cards, or cannons. As we model those things in the computer, it feels natural to focus on the objects as collections of attributes, along with programs that define their behavior. Car.color = "red". Car.fuel=10%, Car->start(), Car->turn(20), Car->accelerate(10), Car.speed?, etc...

Another area where this makes sense is when we have many data types and need a different program to work on each different type. For example, if we need to find the square root of an integer (whole number, nothing right of the decimal point), the program we write to do that is much shorter and simpler than the one we need to find the square root of a floating point number. So should we have a different name for each program; sqrt_int, sqrt_float, etc... or should we teach each data type how to find it's own square root? 123->sqrt, 123.45->sqrt. We ask the data, or rather the object (a collection of related data and methods), to perform an operation on an attribute of itself.

Objects in JavaScript

JavaScript makes objects easy by allowing us to put variables inside other object type variables. And variables can contain programs, as well as numbers, strings, and other objects. However, "primitive objects", like strings or numbers can't be assigned new attributes; they can only be assigned new values. They have "hardcoded" attributes like their value, length, or methods.

var myvar = 123+"4"
myvar.length //tells us how long the value in myvar is. 
myvar.toString //contains a program that will convert myvars value to a string.
myvar.toString() //gives us the result of calling that program; the value as a string

JavaScript doesn't call these "primitive" variables objects, although they really are, the word "object" is used for objects you can add things to. The curly brackets "{}" are used to initialize these (like the quote marks around a string, or the [] around an array) and the "dot" syntax is used to access those elements. Inside the {} we can use labels, followed my a colon ":" and values after that to setup attributes. So we can collect up all the attributes and programs that define an object under one label:

let my_car = { 
   color: "red", 
   paint: function(color) {this.color = color} //1

In this simple example, my_obj.color is "red" and if we enter my_obj.paint("green") then my_obj.color will become "green".

Object Namespace / Scope

One advantage to being able to put named variables inside objects is that we can re-use names. Image we want to keep track of Cars and Planes. Each can have a color. We could use variables named car_color and plane_color or we could make a Car object and a Plane object, each with a variable called color inside, but Car.color and Plane.color are now 2 different things, despite having the same name.

To put it another way, quoting C. Fry of MIT: "A namespace is a context whereby in THIS context "foo" means 2 but in this OTHER context, "foo" can mean 3. English has words with multiple meanings and we (humans) figure out which meaning is relevant by the context. When you're in a supermarket, "produce" means fruit and vegetables, but in a factory "produce" is not a noun, its a verb for making (the things the factory makes)."

Note that methods as well as data can have the same name and still work differently:

let model_t = { 
   color: "black", 
   paint: function(color) {this.color = "black"} //1, 2
   year_introduced: 1908

Notice that model_t seems to have a great deal in common with Car.

Prototypes: Special objects are templates for making new objects with the new keyword. By convention, these "prototypical" objects are named with a single capital letter followed by lower case, and the objects created from them are all lower case. The document object has a prototype called Document. A more useful example is let my_array = new Array.

Functions: Functions take in parameters, (which automatically have local scope) then do stuff to them with a program and return values. Functions are also just objects like anything else, and can be stored in other objects, or have other objects or variables stored in them. For example:

let myprog = function(myparm){return "you said:"+myparm}
console.log(myprog) //prints out 'ƒ (myparm){return "you said:"+myparm}'
console.log(myprog("Hello")) //prints out 'you said:Hello'

It's critical to understand that a function is just a string that follows a specific format. The addition of () after the function name causes the language to interpret that string as a program. The "()" with or without a value inside is what causes the function to actually run.

Variables declared in a function have local scope. var makes one for the entire function, let for the local block.

Methods: You can put a Function inside an Object, with special access to the other junk in the object, and then call it a Method. It's a nice way of organizing things; all the stuff related to the object is in the object: Data, Functions, other objects, everything. The methods (functions in the object) can even be used to change things inside the object that we can't otherwise change; variables which are out of scope. This can be really good because the methods can check the changes we ask for and make sure they are valid. For example, Arrays know how to sort their elements.

See also:


Putting boxes inside other boxes.
Information Hiding
Making the inner boxes invisible so they don't clutter up the view.
Copying the layout of a box and filling the spaces with new data
Re-using the layout of one box and extending it into a more complex layout
file: /Techref/language/java/script/objects.htm, 10KB, , updated: 2020/2/19 09:36, local time: 2020/2/21 05:08,

 ©2020 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?
Please DO link to this page! Digg it! / MAKE!

<A HREF=""> Object Oriented Javascript Tutorial</A>

After you find an appropriate page, you are invited to your to this massmind site! (posts will be visible only to you before review) Just type in the box and press the Post button. (HTML welcomed, but not the <A tag: Instead, use the link box to link to another page. A tutorial is available Members can login to post directly, become page editors, and be credited for their posts.

Link? Put it here: 
if you want a response, please enter your email address: 
Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.
Did you find what you needed?


Welcome to!


Welcome to!