Skip to content

Commit b5d2dec

Browse files
elfgoddelfgodd
committed
Section 6: Intro to objects, Creating object literals and Accessing object properties
1 parent b12f6da commit b5d2dec

4 files changed

Lines changed: 243 additions & 2 deletions

File tree

‎05-Capture-Collections-of-Data-with-Arrays/01/01.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,7 +379,7 @@ console.log('otherNums:', otherNums) */
379379
city = 'Barranquilla'
380380
console.log(city) */
381381
// Uncaught TypeError: Assignment to constant variable.
382-
382+
/*
383383
const foods = ['milk']
384384
foods.push('chocolate')
385385
console.log(foods)
@@ -415,4 +415,4 @@ const board = [
415415
['X', '0', null],
416416
]
417417
418-
animalPairs.splice([0][1], 1, ['raptor', 'venom'])
418+
animalPairs.splice([0][1], 1, ['raptor', 'venom']) */

‎06-Objects-The-Core-of-Javascript/01/01.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// Test the JS script before starting
2+
// alert("It's working!");
3+
4+
// ******************************
5+
// Creating Object Literals ******************************
6+
// Example 1
7+
/*
8+
const fitAppData = {
9+
totalSteps: 308727,
10+
totalMiles: 211.7,
11+
avgCalorieBurn: 5755,
12+
workoutsThisWeek: '5 of 7',
13+
avfGoodSleep: '2:13',
14+
45: 'forty five', // fitBitData[45]
15+
}
16+
console.log(fitAppData)
17+
console.log(fitAppData.length) // undefined
18+
console.log(fitAppData.totalMiles)
19+
console.log(fitAppData.avgCalorieBurn)
20+
console.log(fitAppData.avfGoodSleep)
21+
// console.log(fitBitData.45); ERROR!
22+
console.log(fitAppData[45])
23+
24+
console.log('\n')
25+
let data = { a: 1 }
26+
console.log(data)
27+
28+
let data2 = { a: 1, b: 2, c: 3, d: 4 }
29+
console.log(data2) */
30+
31+
// console.log('\n')
32+
// ******************************
33+
// Accessing Object Properties ******************************
34+
// Example 2
35+
36+
const numbers = {
37+
100: 'one hundred',
38+
16: 'sixteen'
39+
}
40+
// console.log(numbers.100); // Unexpected number
41+
console.log(numbers[100]);
42+
console.log(numbers['100'])
43+
console.log(numbers[16]);
44+
45+
console.log('\n')
46+
const numbers2 = {
47+
'100': 'one hundred',
48+
'16': 'sixteen',
49+
'76 trombones': 'great song!'
50+
};
51+
console.log(numbers2['100']);
52+
console.log(numbers2['16']);
53+
console.log(numbers2['76 trombones']);
54+
console.log(numbers2['10'+'0']); // '100'
55+
56+
console.log('\n')
57+
// Example 3
58+
const palette = {
59+
red: '#eb4d4b',
60+
yellow: '#f9ca24',
61+
blue: '#30336b'
62+
}
63+
64+
palette.red // '#eb4d4b'
65+
palette.blue // '#30336b'
66+
// palette[blue] // Uncaught ReferenceError: blue is not defined
67+
palette['blue'] // '#30336b'
68+
69+
let mysteryColor = 'yellow';
70+
// It would not work at all because now it's looking for a property
71+
// actually called mystery color and there isn't one
72+
// We only have red, yellow and blue those are the only keys
73+
// It doesn't throw an error, it just tells us undefined
74+
// Just like an array if you're trying to access something that
75+
// does not exist in that array
76+
77+
console.log([1, 2, 3][99]) // undefined
78+
console.log(palette.mysteryColor) // undefined property doesn't exist 'color'
79+
console.log(palette['123 hello hi']); // undefined
80+
console.log(palette.helloworld) // undefined
81+
console.log(palette[mysteryColor]) // '#f9ca24'
82+
console.log(palette['bl'+'ue']); // '#30336b'
83+
84+
// If i try to access

‎06-Objects-The-Core-of-Javascript/01/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JavaScript</title>
8+
</head>
9+
<body>
10+
11+
<!-- source attribute which corresponds to the path to our file -->
12+
<script src='01.js'></script>
13+
</html>

‎06-Objects-The-Core-of-Javascript/README.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
## 06-Objects-The-Core-of-Javascript
2+
3+
## 1. Intro to Objects
4+
5+
### How would you store this?
6+
7+
Health App, User dashboard
8+
- 308.272 total steps
9+
- 1.826 total floors
10+
- 211.70 total miles
11+
- 5.755 avg. daily calorie burn
12+
- 2312 total active minutes
13+
- 7 of 5 days exercising this week
14+
- 2 hrs 13 mins of restful sleep
15+
16+
If we used an array, we definitely could, It just would be confusing and we'd have to come up with some arbitrary rules.
17+
18+
### OBJECTS
19+
- Objects are collections of properties
20+
- Properties are a key-value pair
21+
- Rather than accessing data using an index, we use custom keys.
22+
23+
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
24+
25+
In objects we don't use a number to access our data out like we do with an array where we say, give me the index of one item instead, Example: give me city, please or give me zip or age and you get the corresponding value.
26+
27+
You have a key and it's kind of a one way relationship, you put the key in and you figure out the corresponding value.
28+
29+
### PROPERTY = KEY + VALUE
30+
31+
```
32+
username: '@ElfGodd',
33+
age: 36,
34+
city: 'Barranquilla',
35+
zip: 101001,
36+
text: 'great post!',
37+
upvotes: '7',
38+
isAdmin: true
39+
```
40+
41+
### AN OBJECT!
42+
```
43+
const fitAppData = {
44+
totalSteps: 308727,
45+
totalMiles: 211.7,
46+
avgCalorieBurn: 5755,
47+
workoutsThisWeek: '5 of 7',
48+
avgGoodSleep,: '2:13'
49+
};
50+
```
51+
ALL TYPES WELCOME!
52+
```
53+
let comment = {
54+
username: 'sillyGoose420',
55+
downVotes: 19,
56+
upVotes: 214,
57+
netScore: 195,
58+
commentText: 'Tastes like chicken lol',
59+
tags: ['#hilarious', '#funny', '#silly'],
60+
isGilded: false
61+
};
62+
```
63+
64+
## 2. Creating Object Literals
65+
66+
### VALID KEYS
67+
All keys are converted to strings, Except for Symbols
68+
`key: value === string: data`
69+
70+
## 3. Accessing Object Properties
71+
72+
### ACCESSING DATA
73+
74+
```
75+
// This is converted
76+
const numbers = {
77+
100: 'one hundred',
78+
16: 'sixteen'
79+
}
80+
// to this
81+
const numbers = {
82+
'100': 'one hundred',
83+
'16': 'sixteen'
84+
}
85+
86+
```
87+
88+
Why would you use square brackets aside from if you tried to store numbers as a key, Well sometimes you have property names that may not be valid JavaScript identifiers. Now, an identifier in JS is like the name of a variable.
89+
90+
```
91+
// invalid name variable
92+
// invalid indentifier or unexpected token
93+
// i cannot have a variable name, start with a number
94+
let my cat = 'Elf Cat'
95+
let 76games = 'NBA team'
96+
97+
// But that doesn't mean we can't do that as a key in an object
98+
object = {
99+
'76 trombones': 'great song!'
100+
}
101+
console.log(numbers2['76 trombones']); // 'great song!'
102+
```
103+
104+
Another reason sometimes you want to use a dynamic value like a variable to access data from an object.
105+
106+
```
107+
const palette = {
108+
red: '#eb4d4b',
109+
yellow: '#f9ca24',
110+
blue: '#30336b'
111+
}
112+
113+
palette.red // '#eb4d4b'
114+
palette['blue'] // '#30336b'
115+
116+
let color = 'yellow';
117+
palette.color // undefined property doesn't exist 'color'
118+
palette[color] // '#f9ca24'
119+
```
120+
121+
My general rule of thumb is to try and use the dot notation whenever
122+
possible. It is shorter and nicer to look, but when it's not possible, whether it's because you have a key name that is not valid
123+
as a identifier like **let 76games = 'NBA team'**
124+
125+
## 4. Adding and Updating Properties
126+
127+
UPDATING & ADDING PROPERTIES
128+
// Updating properties: fitBitData.workoutsThisWeek = '6 of 7'; fitBitData.totalMiles += 7.5;
129+
130+
// Adding a new property fitBitData.heartStillBeating = true;
131+
132+
ARRAYS + OBJECTS
133+
const shoppingCart = [ { product: 'Jenga Classic', price: 6.88, quantity: 1 }, { product: 'Echo Dot', price: 29.99, quantity: 3 }, { product: 'Fire Stick', price: 39.99, quantity: 2 } ]
134+
135+
const student = { firstName: 'David', lastName: 'Jones', strengths: ['Music', 'Art'], exams: { midterm: 92, final: 88 } }
136+
137+
Nested Arrays & Objects
138+
const game = { player1: { username: 'Blue', playingAs: 'X' }, player2: { username: 'Muffins', playingAs: '0' }, board : [ ['0', null, 'X'], ['X', '0', 'X'], [null, '0', 'X'] ] };
139+
140+
Objects and Reference Types
141+
Objects and Arrays are Reference types
142+
143+
Array Object Equality
144+
Arrays and Objects behave the same way when we checking for Equality We are comparing Reference Types Addresses

0 commit comments

Comments
 (0)