Learning JavaScript
- Part 1: Creating and Using Variables
- Part 2: Data Types and Arrays
- Part 3: Functions
- Part 4: Objects
- Part 5: Document Object Model
- Part 6: Conditional Statements
- Part 7: Loops
JavaScript is an interpreted programming language commonly found in web browsers. First appearing in 1995, it has grown to be the de facto web programming language used in most websites and on many systems serving webpages.
Objects
JavaScript is a multi-paradigm language. This means that, among others, it supports a way of thinking about programming called object-oriented. In this paradigm, objects are at the center of how problems are solved using the language.
In order to represent a complex problem or system, it is broken into its objects and these are described by using properties. Similar to how an animal might have a name and height, for example, these would be properties of an animal object.
Object Literals
The easiest way to think about an object in JavaScript is something which is written literally. Known as an object literal, an object can be created by using a variable and giving it properties. Similar to an array and its indexes, the properties can be accessed through the name of the variable.
Unlike arrays that used square brackets and a number, using the object, a period, and then the name of the property, its value can be used.
Object Properties
All objects have something called this. In the scope of an object, the “this” keyword refers to itself. It can reference variables and other properties that it has through the reference to its this.
Similar to how a property was referenced using a period between the object and its property, a property can use the values of it sister properties through using this.
Functions, as another type of value, can also be used within objects. Using them with the keyword “this”, in fact, allows them to use other values and return data based on tasks or calculations.
Creating New Objects
Functions are objects. This is one of the more confusing aspects for some people as it come to understanding functions and objects. They are not separate things in JavaScript.
In the previous example of using a variable named animal, its properties could be referenced and functions could be added to it. However, to create a new animal, all of its code would have needed to be copied and pasted into a new variable to make a new animal. That is not very efficient when dealing with a large number of entities.
In JavaScript, then, it is possible to create what is known more generally as a class in the object-oriented programming paradigm. It is a generic model where data can be added and new versions made without needing to manually set the data or copy and paste code each time.
To create a new animal based on the class animal, the use of the keyword “new” is needed. This tells JavaScript to take the code and make a new copy of it for this variable.
The example is a function, and values can be passed as parameters. Because functions are also objects, the use of the “this” keyword can be used to save the values passed to it. As shown in an earlier example, functions can also be both inside other functions and as a property of objects.
Starting with a function as the basis, new objects can be created based on the model of an original, generic object. This is a core concept of the object-oriented programming paradigm, and something JavaScript easily supports for using functions as dynamic objects.
Codepen Example:
See the Pen Learning JavaScript: Part 4: Objects by Dan Cox (@videlais) on CodePen.
Digital Ephemera 