Skip to content

Commit b322fee

Browse files
author
jessicarush
committed
Docs: minor edits
1 parent 53c221d commit b322fee

File tree

1 file changed

+68
-25
lines changed

1 file changed

+68
-25
lines changed

objects.md

Lines changed: 68 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ In JavaScript, objects are compound values where you can set properties (named l
4242

4343
## Syntax
4444

45-
There are many, many ways to create an object. For example:
45+
There are many, many ways to create an object.
4646

47-
**literal notation**
47+
**Literal notation:**
4848

4949
```javascript
5050
const obj1 = {
@@ -54,7 +54,7 @@ const obj1 = {
5454
};
5555
```
5656

57-
**constructor notation (using built-in Object)**
57+
**Constructor notation (using built-in Object):**
5858

5959
```javascript
6060
const obj2 = new Object();
@@ -69,7 +69,7 @@ obj2.admin = true;
6969
// But, this leads us to the next example...
7070
```
7171

72-
**constructor function**
72+
**Constructor function:**
7373

7474
```javascript
7575
function Person(first, age, admin) {
@@ -86,7 +86,7 @@ const obj3 = new Person('Jessica', 43, true);
8686
// the new keyword is needed.
8787
```
8888

89-
**class**
89+
**Class:**
9090

9191
```javascript
9292
class Human {
@@ -100,7 +100,7 @@ class Human {
100100
const obj4 = new Human('Jessica', 43, true);
101101
```
102102

103-
**factory function**
103+
**Factory function:**
104104

105105
```javascript
106106
const personFactory = (first, age, admin) => {
@@ -114,7 +114,7 @@ const personFactory = (first, age, admin) => {
114114
const obj5 = personFactory('Jessica', 43, true);
115115
```
116116

117-
**create a new instance of an existing object with Object.create()**
117+
**Create a new prototype-linked object with Object.create():**
118118

119119
```javascript
120120
const personPrototype = {
@@ -133,18 +133,20 @@ obj6.admin = true;
133133
All the the methods above produce the same results:
134134

135135
```javascript
136-
console.log(typeof obj1, typeof obj2, typeof obj3, typeof obj4, typeof obj5, typeof obj6);
137-
// object object object object object object
136+
const allEqual = (arr) => arr.every(val => val === arr[0]);
138137

139-
console.log(obj1.age, obj2.age, obj3.age, obj4.age, obj5.age, obj6.age);
140-
// 43 43 43 43 43 43
138+
const types = [typeof obj1, typeof obj2, typeof obj3, typeof obj4, typeof obj5, typeof obj6];
139+
const ages = [obj1.age, obj2.age, obj3.age, obj4.age, obj5.age, obj6.age]
140+
141+
console.log(allEqual(types)); // true
142+
console.log(allEqual(ages)); // true
141143
```
142144

143145
While the first two don't pose too much of a question, We should be clear on the differences between the constructor, class, factory function and the `Object.create()` method. The main difference with a factory function is that, unlike constructor functions, there is no *prototype linkage* between it and the objects created from it. With a constructor function or `Object.create()`, I could add a new method to the constructor or prototype object, and that method would be available to all the objects that were created from it using the `new` keyword or `Object.create()` respectively.
144146

145147
In terms of the difference between constructor functions and `Object.create()`... `Object.create()` builds an object that inherits directly from the one passed as its first argument. With constructor functions, the newly created object is linked to the constructor function's *prototype* property. For more see [prototypes.md](prototypes.md).
146148

147-
From what I can tell so far, classes are very similar to the constructor functions. They're newer (ES6) and were added to the language because of how common they are in other languages. Constructor functions (and prototype inheritance) however have been in JavaScript for a long time. You will likely see classes being used more in the future but they mostly do the same thing. Beyond that here are the main differences:
149+
From what I can tell so far, classes are very similar to the constructor functions. They're newer (ES6) and were added to the language because of how common they are in other languages. Constructor functions (and prototype inheritance) however have been in JavaScript for a long time. You may or may not see classes being used more in the future but they mostly do the same thing. Beyond that here are the main differences:
148150

149151
- function declarations are hoisted, classes are not.
150152
- classes allow you to use keywords like `super` for extending other classes and `static` for creating static methods.
@@ -155,7 +157,7 @@ From what I can tell so far, classes are very similar to the constructor functio
155157

156158
Since we've used this keyword in two of the examples above, we should probably take a closer look at what `new` actually does. Pretty much any function (including built-in object functions like `Number()`) can be called with `new` in front of it. This makes the function call a *constructor call*.
157159

158-
When a function is invoked with as a constructor call, the following things are done automatically:
160+
When a function is invoked as a constructor call, the following things are done automatically:
159161

160162
1. A brand new object is created
161163
2. The newly constructed object is prototype-linked to the functions prototype property
@@ -177,7 +179,7 @@ console.log(foo.prototype);
177179
// foo {}
178180

179181
console.log(foo.prototype.isPrototypeOf(a));
180-
//true
182+
// true
181183
```
182184

183185
Bottom line is functions aren't constructors, but rather function calls are *constructor calls* if and only if `new` is used.
@@ -207,7 +209,7 @@ let p = prompt('firstname, age or admin?');
207209
console.log(obj[p]);
208210
```
209211

210-
In addition we must use bracket notation when accessing working with keys that have numbers, spaces, or special characters in them. Without bracket notation in these situations, our code would throw an error. For example, if we wanted an object to have properties names that are date strings:
212+
In addition we must use bracket notation when working with keys that have numbers, spaces, or special characters in them. Without bracket notation in these situations, our code would throw an error. For example, if we wanted an object to have property names that are date strings:
211213

212214
```javascript
213215
const heatmap_data = {
@@ -263,7 +265,7 @@ console.log(obj);
263265

264266
## Check if a property exists
265267

266-
The binary `in` operator, when applied to a string and an object, tells you whether that object or an object in its prototype chain has a property with that name. By contrast, the built-in method `hasOwnProperty()` lets you check if the object itself (not a prototype) has the property.
268+
The binary `in` operator, when applied to a string or an object, tells you whether that object (or an object in its prototype chain) has a property with that name. By contrast, the built-in method `hasOwnProperty()` lets you check if the object itself (not a prototype) has the property.
267269

268270
```javascript
269271
const obj = {
@@ -471,6 +473,9 @@ factoryObj.special = function () {
471473
console.log('special');
472474
};
473475

476+
// No point adding a method to the factory function since
477+
// there's no prototype link to the objects it returns
478+
474479
factoryObj.special(); // special
475480
```
476481

@@ -498,10 +503,12 @@ console.log(Object.values(spider));
498503
// [ 10, 'spider plant', 7, 'full' ]
499504

500505
console.log(Object.entries(spider));
501-
// [ [ 'age', 10 ],
506+
// [
507+
// [ 'age', 10 ],
502508
// [ 'name', 'spider plant' ],
503509
// [ 'waterFrequency', 7 ],
504-
// [ 'sunlight', 'full' ] ]
510+
// [ 'sunlight', 'full' ]
511+
// ]
505512
```
506513

507514
The `.assign()` method copies all properties from one or more source objects to a new target object. You pass two or more arguments: `Object.assign(target_object, source_object)`. The method copies properties from the source object(s) to the target object. Properties in the target object will be overwritten by properties in the source(s) if they have the same key. If the sources have the same keys, the last one in the argument list will be applied to the target.
@@ -526,6 +533,37 @@ console.log(Object.values(garlic));
526533
```
527534

528535

536+
## Passing objects as parameters
537+
538+
As a kind of a side note, you can also use destructing to pass objects as paramaters. For more, see destructuring below and in [destructuring.md](destructuring.md).
539+
540+
```javascript
541+
const plantFactory = ({name, age, waterFrequency, sunlight}) => {
542+
return {
543+
age,
544+
name,
545+
waterFrequency,
546+
sunlight
547+
};
548+
};
549+
550+
const data = {
551+
name: 'spider plant',
552+
waterFrequency: 7,
553+
sunlight: 'full'}
554+
555+
const spider = plantFactory({age: 15, ...data});
556+
557+
console.log(Object.entries(spider));
558+
// [
559+
// [ 'age', 15 ],
560+
// [ 'name', 'spider plant' ],
561+
// [ 'waterFrequency', 7 ],
562+
// [ 'sunlight', 'full' ]
563+
// ]
564+
```
565+
566+
529567
## Polymorphism
530568

531569
Polymorphism is a technique where you can define a common interface for many other different abstract types, provided they support the interface it expects. A simple example of this is:
@@ -555,14 +593,16 @@ console.log(j.toString());
555593
As of ES5 all object properties can be described in terms of a *property descriptor*. This data descriptor can be accessed using a built-in method that comes with `Object`, for example:
556594

557595
```javascript
558-
const plant = {name: 'plant', sunlight: 'full'}
596+
const plant = {name: 'bob', sunlight: 'full'}
559597
let desc = Object.getOwnPropertyDescriptor(plant, 'name');
560598

561599
console.log(desc);
562-
// { value: 'plant',
600+
// {
601+
// value: 'bob',
563602
// writable: true,
564603
// enumerable: true,
565-
// configurable: true }
604+
// configurable: true
605+
// }
566606
```
567607

568608
As we can see, there are three additional characteristics that describe each property. The default is for all of these to be true. If we wanted to change these characteristics, we can use `Object.defineProperty()`. With this method we can add a new property or modify an existing one.
@@ -572,7 +612,7 @@ As we can see, there are three additional characteristics that describe each pro
572612
`writeable` controls whether you can change the properties value.
573613

574614
```javascript
575-
const plant = {name: 'plant', sunlight: 'full'};
615+
const plant = {name: 'bob', sunlight: 'full'};
576616

577617
Object.defineProperty(plant, 'special', {
578618
value: 'something',
@@ -593,7 +633,7 @@ plant.special = 'other';
593633
`configurable` controls whether you can modify any these characteristics. Once you change this characteristic to false, you can't change it back. An interesting side-effect of making a value *unconfigurable* is that it can't be deleted with `delete`:
594634

595635
```javascript
596-
const plant = {name: 'plant', sunlight: 'full'};
636+
const plant = {name: 'bob', sunlight: 'full'};
597637

598638
Object.defineProperty(plant, 'special', {
599639
value: 'something',
@@ -614,7 +654,7 @@ delete plant.special
614654
`enumerable` controls whether the property will be included in enumerations such as the `for..in` loop. Interestingly, this means that the property will be hidden from some methods like `Object.keys()` but not `Object.getOwnPropertyNames()`.
615655

616656
```javascript
617-
const plant = {name: 'plant', sunlight: 'full'};
657+
const plant = {name: 'bob', sunlight: 'full'};
618658

619659
Object.defineProperty(plant, 'special', {
620660
value: 'something',
@@ -629,7 +669,7 @@ console.log(plant.special);
629669
for (let property in plant) {
630670
console.log('property: ' + property + ', value: ' + plant[property]);
631671
};
632-
// property: name, value: plant
672+
// property: name, value: bob
633673
// property: sunlight, value: full
634674

635675
console.log(Object.keys(plant));
@@ -981,6 +1021,9 @@ console.log(name); // bob
9811021
console.log(rest); // { list: [ 'a', 'b', 'c' ], id: 10 }
9821022
```
9831023

1024+
See [destructuring.md](destructuring.md)
1025+
1026+
9841027
## Spread operator
9851028

9861029
Not to be confused with the *rest destructuring*, the spread operator unpacks property value pairs from an object:

0 commit comments

Comments
 (0)