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.