2018-09-30 23:01:58 +01:00
---
id: 56533eb9ac21ba0edf2244c9
title: Accessing Object Properties with Variables
challengeType: 1
2019-02-14 12:24:02 -05:00
videoUrl: 'https://scrimba.com/c/cnQyKur'
2019-07-31 11:32:23 -07:00
forumTopicId: 16165
2018-09-30 23:01:58 +01:00
---
## Description
< section id = 'description' >
Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.
Here is an example of using a variable to access a property:
2019-05-17 06:20:30 -07:00
```js
var dogs = {
Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
};
var myDog = "Hunter";
var myBreed = dogs[myDog];
console.log(myBreed); // "Doberman"
```
2018-09-30 23:01:58 +01:00
Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows:
2019-05-17 06:20:30 -07:00
```js
var someObj = {
propName: "John"
};
function propPrefix(str) {
var s = "prop";
return s + str;
}
var someProp = propPrefix("Name"); // someProp now holds the value 'propName'
console.log(someObj[someProp]); // "John"
```
2018-09-30 23:01:58 +01:00
Note that we do < em > not< / em > use quotes around the variable name when using it to access the property because we are using the < em > value< / em > of the variable, not the < em > name< / em > .
< / section >
## Instructions
< section id = 'instructions' >
2020-09-02 12:41:59 -05:00
Set the < code > playerNumber< / code > variable to < code > 16< / code > . Then, use the variable to look up the player's name and assign it to < code > player< / code > .
2018-09-30 23:01:58 +01:00
< / section >
## Tests
< section id = 'tests' >
```yml
2018-10-04 14:37:37 +01:00
tests:
- text: < code > playerNumber</ code > should be a number
2019-07-13 00:07:53 -07:00
testString: assert(typeof playerNumber === 'number');
2018-10-04 14:37:37 +01:00
- text: The variable < code > player</ code > should be a string
2019-07-13 00:07:53 -07:00
testString: assert(typeof player === 'string');
2018-10-04 14:37:37 +01:00
- text: The value of < code > player</ code > should be "Montana"
2019-07-13 00:07:53 -07:00
testString: assert(player === 'Montana');
2018-10-04 14:37:37 +01:00
- text: You should use bracket notation to access < code > testObj</ code >
2019-07-13 00:07:53 -07:00
testString: assert(/testObj\s*?\[.*?\]/.test(code));
2018-10-04 14:37:37 +01:00
- text: You should not assign the value < code > Montana</ code > to the variable < code > player</ code > directly.
2019-07-13 00:07:53 -07:00
testString: assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
2018-10-04 14:37:37 +01:00
- text: You should be using the variable < code > playerNumber</ code > in your bracket notation
2019-07-13 00:07:53 -07:00
testString: assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
2018-09-30 23:01:58 +01:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'js-seed' >
```js
// Setup
var testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};
2020-03-02 23:18:30 -08:00
// Only change code below this line
2018-09-30 23:01:58 +01:00
2020-03-04 13:08:54 -06:00
var playerNumber; // Change this line
var player = testObj; // Change this line
2018-09-30 23:01:58 +01:00
```
< / div >
### After Test
< div id = 'js-teardown' >
```js
2018-10-20 21:02:47 +03:00
if(typeof player !== "undefined"){(function(v){return v;})(player);}
2018-09-30 23:01:58 +01:00
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
var testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};
var playerNumber = 16;
var player = testObj[playerNumber];
```
< / section >