1 00:00:02,270 --> 00:00:04,300 So we all want to get started with that app here now 2 00:00:04,310 --> 00:00:05,180 and so do I, 3 00:00:05,360 --> 00:00:11,070 just one more thing I want to get out of the way so that it's not confusing if we then later use it. 4 00:00:11,180 --> 00:00:16,940 We had a look at this square bracket notation, to access key names which we couldn't access with the dot 5 00:00:16,940 --> 00:00:18,200 notation, 6 00:00:18,200 --> 00:00:22,010 you actually can do more with the square brackets. 7 00:00:22,010 --> 00:00:27,180 One cool feature is that you can also dynamically access properties with this notation. 8 00:00:27,260 --> 00:00:29,690 Here I hardcoded first name in here, 9 00:00:29,690 --> 00:00:35,120 now what if that would be stored in some constant, key name or whatever you want to name that constant? 10 00:00:35,120 --> 00:00:37,030 So this constant holds a string 11 00:00:37,160 --> 00:00:43,360 and now I know I want to access the property with that constant value, 12 00:00:43,400 --> 00:00:45,890 so with this string, in person. 13 00:00:45,950 --> 00:00:51,980 Well with the square bracket notation, you can access key name, now without quotes around it because 14 00:00:51,980 --> 00:00:55,050 I'm not looking for a property name key name in here 15 00:00:55,190 --> 00:01:00,190 but instead I want to look for a property with the value inside of key name, 16 00:01:00,200 --> 00:01:03,530 so this here, in person. 17 00:01:03,620 --> 00:01:05,030 So that's also something you can do and 18 00:01:05,060 --> 00:01:10,880 that wouldn't work with the dot notation because with the dot notation, Javascript would always search 19 00:01:11,120 --> 00:01:14,600 for a property with the name, key name in person, 20 00:01:14,600 --> 00:01:20,210 so not with the value stored in key name but with key name as a name in person 21 00:01:20,210 --> 00:01:21,780 and that of course doesn't exist here 22 00:01:21,800 --> 00:01:29,060 so we would get undefined. With square brackets, we can dynamically look up values and we can work with 23 00:01:29,270 --> 00:01:35,150 key name values which are actually stored in other constants or the result of any other expression, could 24 00:01:35,150 --> 00:01:37,600 be a function call, could be a ternary expression, 25 00:01:37,700 --> 00:01:41,400 anything that yields a value can be inserted here to 26 00:01:41,450 --> 00:01:46,110 then access a key with that yielded value. 27 00:01:46,130 --> 00:01:51,080 Now of course in this little example here, it's still the same as if I would have hardcoded first name 28 00:01:51,080 --> 00:01:54,070 here because I hardcoded it into this constant 29 00:01:54,260 --> 00:02:00,050 but you will have cases in this little demo app we're going to build in this module already actually 30 00:02:00,470 --> 00:02:04,830 where this is derived dynamically and then this is really useful. 31 00:02:04,850 --> 00:02:12,170 Now speaking of dynamic, there is another dynamic feature or thing you can enable with the square brackets 32 00:02:12,200 --> 00:02:16,280 and objects and that's when you define the properties. 33 00:02:16,280 --> 00:02:19,940 Now here, we know all property names in advance, 34 00:02:19,940 --> 00:02:24,770 now what if that's not the case and we'll see an example for that in this app we're about to build too. 35 00:02:25,640 --> 00:02:36,350 Let's say we got some user input, user chosen key name, which is level, anything like that, was entered 36 00:02:36,350 --> 00:02:37,710 into an input by the user, 37 00:02:37,730 --> 00:02:41,890 so we as a programmer don't know this in advance when we write the code, 38 00:02:41,960 --> 00:02:46,090 keep in mind I'm just hardcoding this here as a dummy, as an example 39 00:02:46,310 --> 00:02:49,590 but let's assume we got this from a dynamic input by the user, 40 00:02:49,640 --> 00:02:54,530 so we don't know it in advance and now we want to add a property with that name 41 00:02:54,540 --> 00:03:02,870 to this object. Now of course here or wherever you want, you could think I just add user chosen name 42 00:03:02,870 --> 00:03:05,750 here and then store whichever value I got. 43 00:03:05,750 --> 00:03:12,640 The problem with that is this would add a property with the name user chosen key name, not with the value 44 00:03:12,640 --> 00:03:16,520 stored in the equally named variable. To do that, 45 00:03:16,520 --> 00:03:20,660 you use square brackets here, a place where we haven't used them before, 46 00:03:20,660 --> 00:03:27,740 so on the left side of the colon where you set your key name and you then reference that variable. 47 00:03:27,740 --> 00:03:33,100 Now what Javascript will do is it will not take this as a key name 48 00:03:33,110 --> 00:03:35,040 it adds to the object, 49 00:03:35,180 --> 00:03:42,590 instead it will search for a variable of that name and take the value stored in that variable or constant, 50 00:03:42,590 --> 00:03:48,830 so in this case this string here as a key name which it adds to person and then again, you can assign 51 00:03:48,860 --> 00:03:56,510 any value you want here. So you can not only use square brackets to dynamically access properties but 52 00:03:56,540 --> 00:04:01,010 also to dynamically set them, which is of course really powerful 53 00:04:01,040 --> 00:04:05,860 and again a concrete example will be shown in this little app we're building. 54 00:04:05,900 --> 00:04:07,850 And with that I'd say let's get started and 55 00:04:07,880 --> 00:04:08,840 let's work on this app.