Steve Carroll
2025-01-29 21:37:55 UTC
Simply put, an object in JavaScript is a collection of 'key: value' pairs.
Objects can store all kinds of data and they're a great choice for grouping
related info:
let truck = {
color: 'Blue',
make: 'Toyota',
model: 'Tacoma '
msrp: 28999,
year: 2025,
isElectric: false
}
The name of that object is 'truck' and it has 'properties' (color, make, etc.)
for which the term 'keys' is often used (they're the 'keys' in 'key: value'
pairs... in JS properties and keys can be thought of as one and the same).
To 'access' the 'value' held in the 'color' property, you start with the name
of the object, follow that with bracket or dot notation and then you use the
'key' (the property name):
truck['color'] // bracket notation (note the use of quotes... a string)
truck.color // dot notation (no quotes, just the key 'as is')
Both of the above output: 'Blue'
The bottom line is, when you want a 'value', you use the property name
associated with that value (the 'key' to obtaining the 'value').
Using dot notation is easy but there are times where brackets are required. For
example, if the key is stored in a variable...
let key = 'make'; // key is a string
console.log(truck[key]); // Outputs: 'Toyota'
... brackets are the choice. Same goes if a key has spaces in it, which would
mean it's also a string...
let truck = {
'the color': 'Blue'
... etc.
}
... so you'd need brackets and quotes around the key:
console.log(truck['the color'])
How can you loop over the items in an object? Using a 'for... in' loop
structure is one way:
for (let key in truck) {
console.log(key + ': ' + truck[key]); // Outputs 'key: value' // using concatenation ('+'), look it up!
}
Suppose you only want the values?
for (let key in truck) {
console.log(truck[key]); // Outputs values
}
What's happening there? It's using 'truck[key]', not 'truck[value]', yet, it
outputs values, not keys!
Change the word 'key' to the letter: 'i':
for (let i in truck) {
console.log(truck[1]); // Still outputs values!
}
NOTE: The word 'key' (which we just changed to 'i') up above is not the same as
the reserved JS word 'key'... which, if you have a good code editor you'll be
able to tell the difference via coloring.
OK, back to our issue: It's using 'truck[key]', not 'truck[value]' !
When you do this (away from the loop):
truck['color']
What did you get? The value, right? Same thing applies in the loop, the 'key'
(the property name) is what 'accesses' the associated 'value'... in a loop, or
not.
Suppose one of the properties of an object is an array?
let truck = {
color: 'Blue',
make: 'Toyota',
model: 'Tacoma',
msrp: 28999,
year: 2025,
isElectric: false,
features: ['Bluetooth', 'Backup Camera', 'Heated Seats', 'Navigation']
}
How do you access the 'features' array? Just as you have been...
console.log(truck.features)
Suppose you just wanted to 'access' the third array element? // see the doc on
Arrays/looping
truck.features[2] // arrays are zero indexed, so [2] is the third element
Suppose you wanted to print out a list of just the features?
Being it's an array (even though it lives in an object) you can use a 'for...
of' loop:
for (let feature of truck.features) {
console.log(feature); // Outputs each feature in the array
}
If you wanted to put numbers in front of each item, you might find an 'old
school for loop' a good way to go:
for (let i = 1; i < truck.features.length; i++) {
console.log(i, truck.features[i]); // Outputs the index number ('i') and the feature
}
So, we have 'for... in' loops for objects, and 'for... of' loops for arrays.
Confused yet? If not, this may do it... basically everything in JS that isn't a
primitive (see Reference doc) is... an Object (with a capital 0)!
For more on objects, research these:
Object.keys(), Object.values(), and Object.entries()
Start in your dev console:
Object.keys(truck)
(7) ['color', 'make', 'model', 'msrp', 'year', 'isElectric', 'features']
Object.values(truck)
(7) ['Blue', 'Toyota', 'Tacoma', 28999, 2025, false, Array(4)]
Object.entires(truck)
(7) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
--
Reference page:
<vmekhl$74sp$***@fretwizzer.eternal-september.org>
Setup:
<vmgi9e$u5m6$***@fretwizzer.eternal-september.org>
Variables:
<vmh41h$u5m6$***@fretwizzer.eternal-september.org>
Functions:
<vmh7ln$u5m6$***@fretwizzer.eternal-september.org>
Arrays/looping:
<vmmi7n$3edp3$***@fretwizzer.eternal-september.org>
Calculator project - Part 1
<vmjd3a$2bdqi$***@fretwizzer.eternal-september.org>
Calculator project - Part 2
<vmrch2$14j7l$***@fretwizzer.eternal-september.org>
DOM - Part 1
<vmubfb$1pvlc$***@fretwizzer.eternal-september.org>
Text generator project - Part 1
<vmug55$1pvlc$***@fretwizzer.eternal-september.org>
Text generator project - Part 2
<vn66pb$36go$***@fretwizzer.eternal-september.org>
Text generator project - Part 3
<vn69if$56c0$***@fretwizzer.eternal-september.org>
Programming vs Code
<vn8vtp$192cl$***@fretwizzer.eternal-september.org>
Objects can store all kinds of data and they're a great choice for grouping
related info:
let truck = {
color: 'Blue',
make: 'Toyota',
model: 'Tacoma '
msrp: 28999,
year: 2025,
isElectric: false
}
The name of that object is 'truck' and it has 'properties' (color, make, etc.)
for which the term 'keys' is often used (they're the 'keys' in 'key: value'
pairs... in JS properties and keys can be thought of as one and the same).
To 'access' the 'value' held in the 'color' property, you start with the name
of the object, follow that with bracket or dot notation and then you use the
'key' (the property name):
truck['color'] // bracket notation (note the use of quotes... a string)
truck.color // dot notation (no quotes, just the key 'as is')
Both of the above output: 'Blue'
The bottom line is, when you want a 'value', you use the property name
associated with that value (the 'key' to obtaining the 'value').
Using dot notation is easy but there are times where brackets are required. For
example, if the key is stored in a variable...
let key = 'make'; // key is a string
console.log(truck[key]); // Outputs: 'Toyota'
... brackets are the choice. Same goes if a key has spaces in it, which would
mean it's also a string...
let truck = {
'the color': 'Blue'
... etc.
}
... so you'd need brackets and quotes around the key:
console.log(truck['the color'])
How can you loop over the items in an object? Using a 'for... in' loop
structure is one way:
for (let key in truck) {
console.log(key + ': ' + truck[key]); // Outputs 'key: value' // using concatenation ('+'), look it up!
}
Suppose you only want the values?
for (let key in truck) {
console.log(truck[key]); // Outputs values
}
What's happening there? It's using 'truck[key]', not 'truck[value]', yet, it
outputs values, not keys!
Change the word 'key' to the letter: 'i':
for (let i in truck) {
console.log(truck[1]); // Still outputs values!
}
NOTE: The word 'key' (which we just changed to 'i') up above is not the same as
the reserved JS word 'key'... which, if you have a good code editor you'll be
able to tell the difference via coloring.
OK, back to our issue: It's using 'truck[key]', not 'truck[value]' !
When you do this (away from the loop):
truck['color']
What did you get? The value, right? Same thing applies in the loop, the 'key'
(the property name) is what 'accesses' the associated 'value'... in a loop, or
not.
Suppose one of the properties of an object is an array?
let truck = {
color: 'Blue',
make: 'Toyota',
model: 'Tacoma',
msrp: 28999,
year: 2025,
isElectric: false,
features: ['Bluetooth', 'Backup Camera', 'Heated Seats', 'Navigation']
}
How do you access the 'features' array? Just as you have been...
console.log(truck.features)
Suppose you just wanted to 'access' the third array element? // see the doc on
Arrays/looping
truck.features[2] // arrays are zero indexed, so [2] is the third element
Suppose you wanted to print out a list of just the features?
Being it's an array (even though it lives in an object) you can use a 'for...
of' loop:
for (let feature of truck.features) {
console.log(feature); // Outputs each feature in the array
}
If you wanted to put numbers in front of each item, you might find an 'old
school for loop' a good way to go:
for (let i = 1; i < truck.features.length; i++) {
console.log(i, truck.features[i]); // Outputs the index number ('i') and the feature
}
So, we have 'for... in' loops for objects, and 'for... of' loops for arrays.
Confused yet? If not, this may do it... basically everything in JS that isn't a
primitive (see Reference doc) is... an Object (with a capital 0)!
For more on objects, research these:
Object.keys(), Object.values(), and Object.entries()
Start in your dev console:
Object.keys(truck)
(7) ['color', 'make', 'model', 'msrp', 'year', 'isElectric', 'features']
Object.values(truck)
(7) ['Blue', 'Toyota', 'Tacoma', 28999, 2025, false, Array(4)]
Object.entires(truck)
(7) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
--
Reference page:
<vmekhl$74sp$***@fretwizzer.eternal-september.org>
Setup:
<vmgi9e$u5m6$***@fretwizzer.eternal-september.org>
Variables:
<vmh41h$u5m6$***@fretwizzer.eternal-september.org>
Functions:
<vmh7ln$u5m6$***@fretwizzer.eternal-september.org>
Arrays/looping:
<vmmi7n$3edp3$***@fretwizzer.eternal-september.org>
Calculator project - Part 1
<vmjd3a$2bdqi$***@fretwizzer.eternal-september.org>
Calculator project - Part 2
<vmrch2$14j7l$***@fretwizzer.eternal-september.org>
DOM - Part 1
<vmubfb$1pvlc$***@fretwizzer.eternal-september.org>
Text generator project - Part 1
<vmug55$1pvlc$***@fretwizzer.eternal-september.org>
Text generator project - Part 2
<vn66pb$36go$***@fretwizzer.eternal-september.org>
Text generator project - Part 3
<vn69if$56c0$***@fretwizzer.eternal-september.org>
Programming vs Code
<vn8vtp$192cl$***@fretwizzer.eternal-september.org>