1
00:00:00,000 --> 00:00:09,411
[MUSIC]

2
00:00:09,411 --> 00:00:13,370
Hey everyone, I'm Guil, a developer and
instructor here at Treehouse.

3
00:00:13,370 --> 00:00:17,200
I'm happy that you've joined me here to
continue your JavaScript learning journey.

4
00:00:17,200 --> 00:00:19,920
Now, it's time to learn
about JavaScript objects.

5
00:00:19,920 --> 00:00:22,120
Objects are a really big subject.

6
00:00:22,120 --> 00:00:27,080
In fact, JavaScript is often referred to
as an object-based programming language,

7
00:00:27,080 --> 00:00:30,870
which means that the language is made
up of different types of objects.

8
00:00:30,870 --> 00:00:35,270
You've learned that many core JavaScript
features, strings, arrays, numbers,

9
00:00:35,270 --> 00:00:40,650
and Boolean, for example, are either
an object or can be treated as an object.

10
00:00:40,650 --> 00:00:42,940
But what exactly is an object?

11
00:00:44,990 --> 00:00:49,130
One of the simplest ways to think of
an object is something that has properties

12
00:00:49,130 --> 00:00:50,240
and methods.

13
00:00:50,240 --> 00:00:53,800
A property is like a variable
that belongs to the object.

14
00:00:53,800 --> 00:00:58,290
And a method is something that object can
do or that can be done to the object.

15
00:00:59,300 --> 00:01:00,630
You've already worked with or

16
00:01:00,630 --> 00:01:05,090
seen examples of objects like
the built in map and console objects.

17
00:01:05,090 --> 00:01:09,430
An array for example, is also an object
and it has a property named length.

18
00:01:09,430 --> 00:01:13,180
It also has many methods that let
you do something to the array or

19
00:01:13,180 --> 00:01:15,050
with the elements in the array.

20
00:01:15,050 --> 00:01:18,890
For example, the push method adds
an element to the end of an array.

21
00:01:18,890 --> 00:01:22,360
There are even programming patterns
that are object oriented, or

22
00:01:22,360 --> 00:01:26,680
that specifically use objects as
a flexible way of developing applications.

23
00:01:26,680 --> 00:01:29,280
But that's part of more advanced
JavaScript programming,

24
00:01:29,280 --> 00:01:31,580
which you'll learn about
in a later course.

25
00:01:31,580 --> 00:01:35,010
In this course, you're going to
focus on one specific use for

26
00:01:35,010 --> 00:01:38,750
objects, storing and
accessing related data.

27
00:01:38,750 --> 00:01:42,260
You've already worked with two ways
of storing data with JavaScript,

28
00:01:42,260 --> 00:01:47,400
assigning a value to a variable and
storing a list of values in an array.

29
00:01:47,400 --> 00:01:52,170
JavaScript objects let you store data
as what are called key value pairs or

30
00:01:52,170 --> 00:01:53,860
property value pairs.

31
00:01:53,860 --> 00:01:56,980
A key, or a property name,
is like a variable name, and

32
00:01:56,980 --> 00:02:00,200
a value is like the value
of that variable.

33
00:02:00,200 --> 00:02:00,860
In other words,

34
00:02:00,860 --> 00:02:05,690
you might think of an object as the single
item that holds multiple variables.

35
00:02:05,690 --> 00:02:08,020
Let's look at how to create an object.

36
00:02:08,020 --> 00:02:12,520
You start by assigning what's called
an object literal to a variable.

37
00:02:12,520 --> 00:02:17,020
The curly braces assigned to the variable
name represents an object literal.

38
00:02:17,020 --> 00:02:20,800
You can't do much with an empty object, so
you'll usually add data inside the object.

39
00:02:21,940 --> 00:02:26,740
Within the braces, you add a property name
also called a key, followed by a colon and

40
00:02:26,740 --> 00:02:29,100
a valid value, like a string.

41
00:02:29,100 --> 00:02:33,780
Notice that in this example, the property
name, or key, is not within quotes.

42
00:02:33,780 --> 00:02:35,890
The key acts like a variable name.

43
00:02:35,890 --> 00:02:38,290
So the rules of variable
names apply to it.

44
00:02:38,290 --> 00:02:42,470
Only use letters, numbers,
a dollar sign, and underscore and

45
00:02:42,470 --> 00:02:44,340
don't start the name with a number.

46
00:02:44,340 --> 00:02:47,091
The colon separates the property
name from its value.

47
00:02:47,091 --> 00:02:51,325
And the value can be any of the valid
JavaScript values you've learned about

48
00:02:51,325 --> 00:02:54,914
a string, number, Boolean,
array, or even another object.

49
00:02:54,914 --> 00:02:57,892
You separate each property
value pair with a comma,

50
00:02:57,892 --> 00:03:01,422
similar to how you separate
elements in an array with commas.

51
00:03:01,422 --> 00:03:03,669
To make object literals more readable,

52
00:03:03,669 --> 00:03:07,100
developers place each key
value pair on its own line.

53
00:03:07,100 --> 00:03:11,040
In addition,
each line is indented inside the object.

54
00:03:11,040 --> 00:03:15,490
This makes it easier to see that
those lines belong to the object.

55
00:03:15,490 --> 00:03:18,600
Now you might understand why
they're called object literals.

56
00:03:18,600 --> 00:03:22,930
You literally write out the object and
the contents inside it in one statement.

57
00:03:22,930 --> 00:03:26,660
This is compared to other built
in objects like map, console,

58
00:03:26,660 --> 00:03:30,160
and document, and
primitive types like strings, numbers, and

59
00:03:30,160 --> 00:03:34,200
Booleans, which are treated
as objects behind the scenes.

60
00:03:34,200 --> 00:03:37,950
Up next, you'll start creating objects,
adding data inside them,

61
00:03:37,950 --> 00:03:40,805
then learn how to access and
manipulate that data in your program.