1
00:00:00,940 --> 00:00:05,820
This video I'm going to take a little bit of time to compare the syntax between arrays and objects and

2
00:00:05,820 --> 00:00:06,860
Javascript.

3
00:00:07,290 --> 00:00:09,700
So let's start by comparing them conceptually.

4
00:00:09,780 --> 00:00:15,240
Remember that an array is used to store a list of data and we add things to an array.

5
00:00:15,290 --> 00:00:17,900
There's a very specific and particular order.

6
00:00:18,360 --> 00:00:24,380
Every item is bound to an index that we refer to it by the first item is bound to index 0.

7
00:00:24,480 --> 00:00:27,070
The next item is bound to index 1 and so on.

8
00:00:27,450 --> 00:00:30,210
So an object on the other hand is not a list.

9
00:00:30,210 --> 00:00:35,700
There is no particular order I'd like to imagine objects is just a gelatinous blob with a bunch of things

10
00:00:35,700 --> 00:00:37,250
floating around inside.

11
00:00:37,260 --> 00:00:39,990
So key value pairs that's really important.

12
00:00:40,200 --> 00:00:43,500
And in some languages objects are called dictionaries.

13
00:00:43,500 --> 00:00:47,770
And the reason that I bring that up is that I think the idea of a dictionary is helpful here.

14
00:00:48,090 --> 00:00:51,600
If you think of a dictionary it has a bunch of key value pairs.

15
00:00:51,840 --> 00:00:55,150
It has words and then corresponding definitions.

16
00:00:55,170 --> 00:00:59,510
So if I want to know the definition of a word let's say I'm helping my grandma out.

17
00:00:59,640 --> 00:01:01,630
She doesn't know what l o l means.

18
00:01:01,920 --> 00:01:08,030
But we can open up the dictionary find L-O and I can finally help my grandma understand that Ella well

19
00:01:08,040 --> 00:01:11,950
doesn't mean leg of lamb but it instead means laugh out loud.

20
00:01:11,970 --> 00:01:14,430
So again dictionary if that helps you remember it.

21
00:01:14,610 --> 00:01:18,650
We'd look something up based off of a key and we get a corresponding value.

22
00:01:18,660 --> 00:01:23,910
Let's now start comparing the syntax so I'm going to go over to the array's window and make a new array

23
00:01:24,270 --> 00:01:26,660
of what else but dugs.

24
00:01:27,180 --> 00:01:33,090
So var dogs equals an empty array and I'm going to just fill in some data here so we'll go with Rustie

25
00:01:33,090 --> 00:01:39,330
of course lucky and Bubba and I hit enter.

26
00:01:39,570 --> 00:01:42,910
And that makes me an array with three items in it.

27
00:01:43,980 --> 00:01:46,220
Let's compare that to making an object.

28
00:01:46,260 --> 00:01:54,570
So to make an object we will make a single dog represented in an object and we can do this all in one

29
00:01:54,570 --> 00:01:56,240
line like we did with the array.

30
00:01:56,700 --> 00:02:01,620
But it gets very long so the convention and what you see most often is that people break it up into

31
00:02:01,620 --> 00:02:03,160
separate lines.

32
00:02:03,240 --> 00:02:05,490
Our dog will just have two pieces of information.

33
00:02:05,490 --> 00:02:07,030
Name and breed.

34
00:02:07,110 --> 00:02:08,960
So let's add name.

35
00:02:09,060 --> 00:02:14,440
Name will be Bhabha and breed will be lab.

36
00:02:15,270 --> 00:02:21,490
Hit enter and we can retrieve dog and we see that we have name as Bubba breed as lab.

37
00:02:21,690 --> 00:02:25,250
So again the syntax a key without quotes.

38
00:02:25,350 --> 00:02:32,250
We can have quotes there but you almost never see that Colon a value which can be a string but remember

39
00:02:32,250 --> 00:02:37,260
it can be anything can be a number it can be another object you can be an array a boolean undefined

40
00:02:37,310 --> 00:02:40,120
no any possible value can go here.

41
00:02:40,170 --> 00:02:43,630
So next I'd like to compare the syntax to access data out.

42
00:02:43,740 --> 00:02:50,550
So let's go to the array and let's say I want to retrieve the second item I want to get lucky out of

43
00:02:50,550 --> 00:02:51,330
theory.

44
00:02:51,600 --> 00:02:56,400
So to do that I need to know has index 0 1 index of 1.

45
00:02:56,760 --> 00:03:04,650
So dogs square bracket 1 and I got lucky and I didn't even have to stay up all night.

46
00:03:05,400 --> 00:03:10,140
So let's contrast that with how we access an individual property out of an object.

47
00:03:10,140 --> 00:03:12,490
Remember there are two different ways we can do it.

48
00:03:12,540 --> 00:03:13,940
Let's access Bubba.

49
00:03:14,220 --> 00:03:21,180
So I need to type name and the first one which is most array like at square brackets with a property

50
00:03:21,840 --> 00:03:22,740
name.

51
00:03:23,220 --> 00:03:30,210
And that's going to give me bubba but the other version is to use the dot notation dog name and I get

52
00:03:30,230 --> 00:03:30,820
Bubba.

53
00:03:30,930 --> 00:03:32,700
So both of them do the exact same thing.

54
00:03:32,700 --> 00:03:38,520
Remember either one comparison that I think helps here is that an array is just a very special type

55
00:03:38,520 --> 00:03:41,860
of an object where the keys are always numbers.

56
00:03:42,180 --> 00:03:49,490
So it is still a key value pair are key value pairs between 0 and Rustie one and lucky two and baba

57
00:03:49,510 --> 00:03:49,900
.

58
00:03:50,100 --> 00:03:56,100
Over here we have key value pairs where we have name as the key and Baba is of value freed as the key

59
00:03:56,100 --> 00:03:57,830
and lab as a value.

60
00:03:57,840 --> 00:04:03,570
So again you can think of an array as just a special version of an object and actually behind the scenes

61
00:04:03,570 --> 00:04:06,220
it actually is an object which we'll see later on.

62
00:04:06,780 --> 00:04:09,700
Next let's talk about adding new data in after the fact.

63
00:04:09,750 --> 00:04:15,990
I can use methods like push or shift or I can do it manually by figuring out what index I want to add

64
00:04:15,990 --> 00:04:16,760
something to.

65
00:04:16,940 --> 00:04:27,300
Let's just use push so I'll do dogs up push and I'll push in a dog Wyatt and we look at dogs and we've

66
00:04:27,300 --> 00:04:33,140
added in a new element to do that to our dog object if we want to add in the property age.

67
00:04:33,270 --> 00:04:39,060
I don't need a special method like push or upshift because the whole point of those array methods is

68
00:04:39,060 --> 00:04:43,680
to work with the order of the array to add something to the end or to the beginning.

69
00:04:43,950 --> 00:04:49,830
But because there is no end or beginning in an object all you have to do is say dog and I can use this

70
00:04:49,830 --> 00:04:50,950
syntax.

71
00:04:51,420 --> 00:04:55,520
Age equals six.

72
00:04:55,800 --> 00:04:58,190
Or I can do dog dog.

73
00:04:58,230 --> 00:05:00,290
Age equals six.

74
00:05:00,450 --> 00:05:05,030
And I look at dog and we get this object with name Bubba breed lab.

75
00:05:05,130 --> 00:05:07,400
In the last key value pair that we just added.

76
00:05:07,530 --> 00:05:09,110
Age 6.

77
00:05:09,360 --> 00:05:10,840
So this is a big difference.

78
00:05:10,920 --> 00:05:12,040
To add something in.

79
00:05:12,210 --> 00:05:18,660
I just can do it arbitrarily assign any key that I want and any value that I want and they'll automatically

80
00:05:18,660 --> 00:05:21,230
be added in for me on an array.

81
00:05:21,240 --> 00:05:25,340
I need to specify exactly where it's added in at the end of the array.

82
00:05:25,380 --> 00:05:28,340
The beginning the middle index 1000.

83
00:05:28,410 --> 00:05:29,430
It's up to me.

84
00:05:29,430 --> 00:05:31,720
Lastly let's talk about updating items.

85
00:05:31,740 --> 00:05:35,900
Let's take our array and change lucky to Lucy to do that.

86
00:05:35,910 --> 00:05:43,860
I just need to find a lucky first which is dogs one that gives me lucky and then I reassign the value

87
00:05:43,860 --> 00:05:48,630
of dogs one to Lucy on an object.

88
00:05:48,630 --> 00:05:49,860
It works very similarly.

89
00:05:50,040 --> 00:05:52,420
Let's change the breed to black lab.

90
00:05:52,530 --> 00:06:00,940
So I first need to retrieve dog dog breed and then reset it to be black lab just like that.

91
00:06:01,050 --> 00:06:05,610
And if I look at dog now we see breed has a value of black lab.

92
00:06:06,350 --> 00:06:08,370
So let's sum up the big differences here.

93
00:06:08,370 --> 00:06:14,820
Both of them are arrays and objects use key value pairs but arrays are a special subset of key value

94
00:06:14,820 --> 00:06:20,330
pairs where the keys are always numbers and they're always an order an object.

95
00:06:20,340 --> 00:06:21,630
The key can be anything.

96
00:06:21,660 --> 00:06:25,190
It doesn't matter if it's a number or if the key is name or breed.

97
00:06:25,320 --> 00:06:28,030
It's arbitrary and there is no special order