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

2
00:00:09,831 --> 00:00:13,920
Hi everyone, Guil here, a developer and
instructor at Treehouse.

3
00:00:13,920 --> 00:00:18,380
In this course, I'll teach you a really
important programming concept, arrays.

4
00:00:18,380 --> 00:00:21,240
An array is what's referred
to as a data structure.

5
00:00:21,240 --> 00:00:24,490
It's a way to store and
organize data in JavaScript.

6
00:00:24,490 --> 00:00:28,700
You already know how to store, track,
and update data with variables.

7
00:00:28,700 --> 00:00:31,340
A variable, as you've learned,
stores a value.

8
00:00:31,340 --> 00:00:34,350
So far you've used variables
to store primitive values or

9
00:00:34,350 --> 00:00:37,860
data types, like strings,
numbers, and Booleans.

10
00:00:37,860 --> 00:00:40,730
Assigning a simple primitive to
a variable is a bit limiting

11
00:00:40,730 --> 00:00:43,880
because primitives can
hold a single value only.

12
00:00:43,880 --> 00:00:47,130
Let's say that you want to keep track
of the item the user puts inside

13
00:00:47,130 --> 00:00:48,920
an online shopping cart.

14
00:00:48,920 --> 00:00:51,760
For each item you'd need
to create a new variable.

15
00:00:51,760 --> 00:00:56,690
If the user added 100 items to their cart,
you'd have 100 variables.

16
00:00:56,690 --> 00:01:01,300
Even worse, you have to declare variables
in your program before the program runs.

17
00:01:01,300 --> 00:01:05,670
So to prepare for a large order,
you need to create 100 variables

18
00:01:05,670 --> 00:01:09,150
just in case a user wanted to
add 100 items to the cart.

19
00:01:09,150 --> 00:01:12,180
Now, most users probably
wouldn't add that many items, so

20
00:01:12,180 --> 00:01:14,330
most of the variables would go unused.

21
00:01:14,330 --> 00:01:19,140
But if one shopper tried to add one
item more than 100 to the cart,

22
00:01:19,140 --> 00:01:22,170
they'd be out of luck because there'd
be no variable to store it in.

23
00:01:22,170 --> 00:01:25,460
There has to be a better way,
and there is, with arrays.

24
00:01:25,460 --> 00:01:29,470
An array is a way of storing more
than one value in a single place.

25
00:01:29,470 --> 00:01:32,680
Think of an array as a list of items,
like a shopping list.

26
00:01:32,680 --> 00:01:37,040
A shopping list might have one item,
ten, or even 100 items on it, but

27
00:01:37,040 --> 00:01:40,000
it's still always just
a single shopping list.

28
00:01:40,000 --> 00:01:44,100
An array is a flexible method
of storing sequences of values.

29
00:01:44,100 --> 00:01:46,360
It can hold a single string, 50 numbers,

30
00:01:46,360 --> 00:01:51,810
or any combination of data types, strings,
numbers, Booleans, and even other arrays.

31
00:01:51,810 --> 00:01:54,600
And you don't have to know ahead of
time how many items you're going to

32
00:01:54,600 --> 00:01:55,790
add to an array.

33
00:01:55,790 --> 00:01:58,740
You can add or
remove items as the program runs.

34
00:01:58,740 --> 00:02:01,460
For instance, at the beginning of
the program you might have just

35
00:02:01,460 --> 00:02:05,070
one item on the list, but
by the end there could be 100.

36
00:02:05,070 --> 00:02:07,870
Creating an array is
quite straightforward.

37
00:02:07,870 --> 00:02:11,990
You assign an array to a variable, so
you start by declaring a variable using

38
00:02:11,990 --> 00:02:14,830
the name you want to use
to reference the array.

39
00:02:14,830 --> 00:02:17,540
You follow the same rules you'd use for
naming variables.

40
00:02:17,540 --> 00:02:19,080
If you're not sure what those rules are,

41
00:02:19,080 --> 00:02:21,040
be sure to review the teacher's
notes with this video.

42
00:02:22,150 --> 00:02:25,840
Next, you add an equals sign,
followed by a pair of square brackets and

43
00:02:25,840 --> 00:02:27,060
a semi colon.

44
00:02:27,060 --> 00:02:29,210
The brackets represent an array.

45
00:02:29,210 --> 00:02:32,765
Inside the brackets you add
a comma-separated list of values.

46
00:02:32,765 --> 00:02:37,410
This could be strings, or numbers, or a
combination of different types of values.

47
00:02:38,560 --> 00:02:40,820
All right, now let's create an array.

48
00:02:40,820 --> 00:02:43,370
To follow along,
launch the workspace with this video or

49
00:02:43,370 --> 00:02:45,830
download the project files and
use your preferred text editor.

50
00:02:46,940 --> 00:02:53,800
Open the file array.js,
this file is already linked to index.html.

51
00:02:53,800 --> 00:02:55,940
I'll start by creating
an array of planet names.

52
00:02:56,970 --> 00:03:00,600
I'll declare a variable named planets,
using the const keyword, and

53
00:03:00,600 --> 00:03:02,000
assign it a pair of square brackets.

54
00:03:03,010 --> 00:03:06,960
These brackets indicate what's
called an array literal.

55
00:03:06,960 --> 00:03:10,080
Since there are currently no values
inside it, it's an empty array.

56
00:03:10,080 --> 00:03:13,100
It's like a blank list where
I can start to add my items.

57
00:03:13,100 --> 00:03:17,890
First, I'll add a string inside it,
Mercury.

58
00:03:17,890 --> 00:03:21,130
Now the array has one item in it,
a string.

59
00:03:21,130 --> 00:03:25,400
To add more items, you type a comma,
followed by another value.

60
00:03:25,400 --> 00:03:32,319
I'll add three more string values to
the array, Venus, Earth, and Mars.

61
00:03:36,302 --> 00:03:39,940
You'll often see arrays written
like this on a single line.

62
00:03:39,940 --> 00:03:44,513
But when you have dozens or more items in
an array, it's common to break an array up

63
00:03:44,513 --> 00:03:48,906
over multiple lines, with each item in
the array on a single line, like this.

64
00:03:50,511 --> 00:03:55,252
Notice that the first bracket stays with
the equals sign, the last bracket is on

65
00:03:55,252 --> 00:03:59,600
its own line at the end, and
each array item is on a separate line.

66
00:03:59,600 --> 00:04:02,860
JavaScript isn't too picky about
white space or line breaks, so

67
00:04:02,860 --> 00:04:04,270
this style works well.

68
00:04:04,270 --> 00:04:05,630
It's easier to read, and

69
00:04:05,630 --> 00:04:09,170
if you need to change items in the array,
it's easier to edit.

70
00:04:09,170 --> 00:04:12,400
You're starting to learn that
an array is really a list of items.

71
00:04:12,400 --> 00:04:15,610
Can you think of other data you
might organize as an array?

72
00:04:15,610 --> 00:04:20,130
How about a musical playlist, a to-do
list, or a list of students in a course?

73
00:04:20,130 --> 00:04:23,740
The more you program, the more you'll
notice that many things come in groups

74
00:04:23,740 --> 00:04:26,040
that you can represent using an array.

75
00:04:26,040 --> 00:04:29,680
Once you've created an array, you'll
want to start using it in your program.

76
00:04:29,680 --> 00:04:32,840
So how do you access the different
elements in an array?

77
00:04:32,840 --> 00:04:34,360
I'll teach you how in the next video.