You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: javascript/organizing_your_javascript_code/objects_and_object_constructors.md
+14-14Lines changed: 14 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -52,7 +52,7 @@ This section contains a general overview of topics that you will learn in this l
52
52
53
53
You've already been introduced to the basic use of a JavaScript object- storing related information with key/value pairs. This is one of the simplest ways you can begin to organize your code! Take these examples from a 'tic tac toe' game:
54
54
55
-
```js
55
+
```javascript
56
56
// example one
57
57
constplayerOneName="tim";
58
58
constplayerTwoName="jenn";
@@ -71,31 +71,31 @@ const playerTwo = {
71
71
};
72
72
```
73
73
74
-
At first glance, the first doesn’t seem so bad.. and it actually takes fewer lines to write than the example using objects, but the benefits of the second approach are huge! Grouping related data together into objects allows you to pass the data around easily. Let me demonstrate:
74
+
At first glance, the first doesn't seem so bad.. and it actually takes fewer lines to write than the example using objects, but the benefits of the second approach are huge! Grouping related data together into objects allows you to pass the data around easily. Let me demonstrate:
75
75
76
-
```js
76
+
```javascript
77
77
functionprintName(player) {
78
78
console.log(player.name);
79
79
}
80
80
```
81
81
82
-
This is something that you just could NOT do with the example one setup. Instead, every time you wanted to print a specific player’s name, you would have to remember the correct variable name and then manually console.log it:
82
+
This is something that you just could NOT do with the example one setup. Instead, every time you wanted to print a specific player's name, you would have to remember the correct variable name and then manually console.log it:
83
83
84
-
```js
84
+
```javascript
85
85
console.log(playerOneName);
86
86
console.log(playerTwoName);
87
87
```
88
88
89
89
Again, this isn't *that* bad... but what if you *don't know* which player's name you want to print?
90
90
91
-
```js
91
+
```javascript
92
92
functiongameOver(winningPlayer){
93
93
console.log("Congratulations!");
94
94
console.log(winningPlayer.name+" is the winner!");
95
95
}
96
96
```
97
97
98
-
Or, what if we aren’t making a 2 player game, but something more complicated such as an online shopping site with a large inventory? In that case, using objects to keep track of each particular item’s name, price, description and other things is the only way to go. You will continue to use and see objects used in this way throughout the curriculum.
98
+
Or, what if we aren't making a 2 player game, but something more complicated such as an online shopping site with a large inventory? In that case, using objects to keep track of each particular item's name, price, description and other things is the only way to go. You will continue to use and see objects used in this way throughout the curriculum.
99
99
100
100
### Objects as a design pattern
101
101
@@ -111,7 +111,7 @@ Nearly *anything* you can think about can be described as an object. To do so, a
111
111
112
112
Let's take an example of some thing- we'll choose a lightbulb. A lightbulb can have a color, and it can be in either an 'on' state, or an 'off' state. These might be expressed as properties of a lightbulb object:
113
113
114
-
```js
114
+
```javascript
115
115
constlightbulb= {
116
116
lightColor:'fluorescent white', // this lightbulb is white,
117
117
lit:false// and is currently 'off'
@@ -124,7 +124,7 @@ The easiest way to get started creating methods to interact with your objects mi
124
124
125
125
The following is an example of using the `this` keyword to add two methods to our object, `switchOn`, and `switchOff`:
126
126
127
-
```js
127
+
```javascript
128
128
constlightbulb= {
129
129
lightColor:'fluorescent white',
130
130
lit:false,
@@ -168,9 +168,9 @@ And might also include a couple nice-to-haves
168
168
- The ability to determine the current winning player
169
169
- The ability to restart the game
170
170
171
-
So, at it's most basic, an object that represents the game might look something like this (assuming we're playing against a comuter player):
171
+
So, at it's most basic, an object that represents the game might look something like this (assuming we're playing against a computer player):
172
172
173
-
```js
173
+
```javascript
174
174
constrps= {
175
175
playerScore:0,
176
176
computerScore:0,
@@ -182,7 +182,7 @@ const rps = {
182
182
183
183
And if we fleshed it out, our object may come out to look something like this:
184
184
185
-
```js
185
+
```javascript
186
186
constrps= {
187
187
playerScore:0,
188
188
computerScore:0,
@@ -242,7 +242,7 @@ But, there is no rule saying that you can't add those functions to your object a
242
242
243
243
Let's see what that looks like!
244
244
245
-
```js
245
+
```javascript
246
246
constrps= {
247
247
_options: ['rock', 'paper', 'scissors'],
248
248
_getRandomChoice() {
@@ -611,7 +611,7 @@ This section contains helpful links to related content. It isn't required, so co
611
611
-[The Principles of Object-Oriented JavaScript](https://www.amazon.com/Principles-Object-Oriented-JavaScript-Nicholas-Zakas/dp/1593275404) book by
612
612
Nicholas C. Zakas is really great to understand OOP in JavaScript, which explains concepts in-depth, which explores JavaScript's object-oriented nature, revealing the language's unique implementation of inheritance and other key characteristics, it's not free but it's very valuable.
613
613
- The first answer on this StackOverflow question regarding [defining methods via the prototype vs in the constructor](https://stackoverflow.com/questions/9772307/declaring-javascript-object-method-in-constructor-function-vs-in-prototype/9772864#9772864) helps explain when you might want to use one over the other.
614
-
-[A Beginner’s Guide to JavaScript’s Prototype](https://medium.com/free-code-camp/a-beginners-guide-to-javascript-s-prototype-9c049fe7b34) and [JavaScript Inheritance and the Prototype Chain](https://medium.com/free-code-camp/javascript-inheritance-and-the-prototype-chain-d4298619bdae) from Tyler Mcginnis has great examples to help you understand Prototype and Prototype Chain better from the beginner's perspective.
614
+
-[A Beginner's Guide to JavaScript's Prototype](https://medium.com/free-code-camp/a-beginners-guide-to-javascript-s-prototype-9c049fe7b34) and [JavaScript Inheritance and the Prototype Chain](https://medium.com/free-code-camp/javascript-inheritance-and-the-prototype-chain-d4298619bdae) from Tyler Mcginnis has great examples to help you understand Prototype and Prototype Chain better from the beginner's perspective.
615
615
- This video from Akshay Saini is an easy way to understand the [concept of Prototype, Prototype Chain and prototypal inheritance.](https://www.youtube.com/watch?v=wstwjQ1yqWQ).
616
616
-[Interactive Scrim on objects and object constructors.](https://scrimba.com/scrim/co2624f87981575448091d5a2)
617
617
- Check out this video explanation on the [`this` keyword from DevSage](https://www.youtube.com/watch?v=cwChC4BQF0Q) that gives a different perspective on how its context changes, as well as scenarios in which `this` behaves unexpectedly.
0 commit comments