1. JavaScript Design Patterns

1.1 Introduction

Hi there and welcome to JavaScript Design Patterns. My name is Jeremy McPeak and for the next couple of hours I will teach you some of the fundamental design patterns, using the JavaScript language. Design patterns are proven and reusable solutions to issues we face when developing applications. You might have heard of the Gang of Four. Well, they wrote this book, Design Patterns Elements of Reusable Object-Oriented Software. This is the book on design patterns. But, of course, it doesn't teach you how to implement those patterns in JavaScript, and that's what we're going to do in this course. Now be aware, this is not a beginner's course. I assume that you have some understanding of JavaScript and Object-Oriented JavaScript. And if you find this course to be a little too advanced, feel free to browse the other JavaScript offerings that we have here at tuts+. We have just about everything that you need to get started and learn JavaScript. Then, be sure to come back and restart this course. So if you're ready, queue up lesson one and we'll get started.

2. Creational Patterns

2.1 Creating Objects with Literals

Many design patterns in JavaScript revolve around objects. So we're going to spend these first few lessons focusing on the creational patterns, those patterns that we use to create objects. We can create very complex objects with many lines of code, or we can create a very simple object with just one line of code. Simply create your variable and set it to an object literal. An object literal is a pair of curly braces, an opening and a closing curly brace. And, of course, you can new up object, if you wanted to do that. But you really don't want to do that. This is the code that we used to write, but now we just use an object literal. It is, of course, less typing, but it's also less bytes, so it transmits faster over the network. Now, an object in and of itself isn't very helpful. It becomes helpful when it starts to contain data. And we store data in an object using properties. We can assign properties in four different ways. The first way is to use the dot syntax. So you use the name of your object, followed by a dot, and then whatever property that you want to create. Let's say that we want to create a first name property. And since the name is firstName, it implies that this is going to contain a string, a person's name. So I'm going to set it to my first name. So we can use the dot operator to create a property. We can also use the square brackets to create a property. You use a string as a key. So if you wanted to create a lastName property, then you would just use the string lastName and then assign it a value. So it's very much like a key value pair. And for the most part, these two styles of syntax are interchangeable. Let's say we wanted to retrieve the firstName property. We could use the square bracket syntax and use firstName as the key. Then if we wanted to retrieve the lastName property, we could use the dot operator. To retrieve that value. Now, I did say that they are mostly interchangeable. The thing is, the square bracket syntax gives us more flexibility. For example, we can use characters in our key that would normally be considered invalid characters for a JavaScript identifier. For example, we could put a space between last and Name. And while this would be considered an invalid identifier, we could still create a property with that space. We can also use reserved words as keys. So, for example, if we wanted a property called new, we could just pass the string new in between the square brackets. We could also do something like false or true or any other reserved word. But you typically don't want to do that. If you find yourself using a reserved word as a property name, then you need to rethink what it is that you are actually doing. Of course, there are some times you can't get away from that. Like, for example, you might be consuming a JSON structure that uses a reserved word as a property, and you really can't do anything about that. But if you are writing your own code, avoid abnormal property names. It just makes your lives and the lives of the developers, who are maintaining your code, a lot easier. The third way that we can create properties uses the Object.defineProperty method. This was introduced with ECMAScript 5, but you can find support in older browsers. For example, Internet Explorer 8 does not implement ECMAScript 5, but it does support defineProperty. This method accepts three arguments. The first is the object that we want to create a property on. The second is a string containing the name of our property. So this is going to create a property called country on our object. And then the third argument is a descriptor object. The descriptor object gives us a variety of options that we can use to set the value of a particular property. For example, we could make it writable or we could make it read-only. We could also make it innumerable or configurable. We can also use getters or setters. We're not going to go into all of these different features. If you want to dive deeper into object-oriented programming in JavaScript, there is a course on object-oriented JavaScript here at Tuts+. We can give our country property a value by using the value option in our descriptor object, and then we use whatever value that we want to set for this property. I live in the USA, so that will be the value of the property. The fourth way that we can create properties is very similar to defineProperty except that it is called defineProperties. As its name implies, it allows us to define multiple properties on an object. The first argument is the object that we want to create these properties on, and then the second argument is another object that contains multiple object descriptors. For example, let's create a property called twitter that will contain my Twitter handle. So we would use the name of our property and we would set this to an object descriptor. So the value is jwmcpeak, because that is what my Twitter handle is. We could do another property called email, where once again we set the value to my email address, jwmcpeak@wdonline.com. And, of course, we could create as many properties as we needed. Now, the defined property and defined property methods give us a lot of control over the creation of our properties. So if you wanted to create a read-only property, or a property with getters and setters, then by all means use define property and define properties. However, a lot of times we just want to create a property and assign it a value, in which case the dot syntax and the square bracket syntax work really well. But it really only makes sense to use the dot and the square brackets only whenever we need to create a property after the object is created. Many times we want to create an object and we want to go ahead and populate its properties with some values. We probably already have those values. And in those types of cases, it makes sense to do everything inside of the object literal. It's more concise and it also keeps the object and its data together. So if you know that you want to create an object and you know the values that you want to assign to its properties, use an object literal. But, of course, this isn't the only way to create an object. You could also create an object with the Object.create method, and we will look at that in the next lesson.