WEBVTT

1
00:00:00.320 --> 00:00:03.740
Hi and welcome to this video
about JavaScript arrays.

2
00:00:03.770 --> 00:00:06.980
Arrays are an essential data
structure in JavaScript.

3
00:00:07.010 --> 00:00:09.140
They allow us to store and manipulate

4
00:00:09.170 --> 00:00:14.380
multiple data types such as strings,
numbers, booleans, and even objects.

5
00:00:14.410 --> 00:00:19.380
An array is defined using square brackets
and can contain any type of data.

6
00:00:19.400 --> 00:00:24.420
You can mix text numbers and other
data types within the same array.

7
00:00:24.450 --> 00:00:26.460
So let's see an example.

8
00:00:26.490 --> 00:00:32.860
I'm just going to clean up my editor and
then I'm going to create hobbies array.

9
00:00:32.890 --> 00:00:38.060
And this array will contain
sports string, cooking string,

10
00:00:38.090 --> 00:00:40.260
let's just give it a number as well.

11
00:00:40.290 --> 00:00:44.380
You can contain a boolean value,
so let's just give it true.

12
00:00:44.410 --> 00:00:50.660
It can also contain any kind of objects,
such as baking, for example.

13
00:00:50.680 --> 00:00:58.820
And it can also contain an array
within it like reading and traveling.

14
00:00:58.850 --> 00:01:04.100
So if we just quickly run this and see
the values of hobbies,

15
00:01:04.130 --> 00:01:09.570
we're going to see that we get no error
and all of the elements are in our array.

16
00:01:09.600 --> 00:01:14.290
To loop through an array,
we can use the for of loop.

17
00:01:14.320 --> 00:01:16.290
It allows us to access each element

18
00:01:16.320 --> 00:01:20.540
of the array one by one
and perform operations on it.

19
00:01:20.570 --> 00:01:30.420
For example, for let hobby of hobbies,
console log hobby.

20
00:01:30.450 --> 00:01:32.980
Great, let's run this.

21
00:01:33.010 --> 00:01:38.660
And now we're going to see the individual
items from an array outputted

22
00:01:38.690 --> 00:01:43.460
here. You can also use
hobby and in, for example.

23
00:01:43.480 --> 00:01:45.020
And this way you're just going to grab

24
00:01:45.050 --> 00:01:52.980
an index of the array and you can do
this to achieve the same result.

25
00:01:53.010 --> 00:01:57.420
Let's run this and we see
that we have the same output.

26
00:01:57.450 --> 00:01:59.780
JavaScript also provides a variety

27
00:01:59.810 --> 00:02:02.900
of built in methods
that we can use on arrays.

28
00:02:02.930 --> 00:02:05.100
Some of the most commonly used methods

29
00:02:05.130 --> 00:02:10.730
include map, which allows us to transform
the values of an array, and Filter,

30
00:02:10.760 --> 00:02:14.170
which allows us to select
a subset of the array.

31
00:02:14.200 --> 00:02:16.300
So let's experiment on this.

32
00:02:16.330 --> 00:02:20.580
Let's create another hobbies array.

33
00:02:20.610 --> 00:02:26.580
And here we're going to put sports
cooking and painting.

34
00:02:26.610 --> 00:02:32.980
Now let's create a subset
such as hobbies subset.

35
00:02:33.010 --> 00:02:39.220
And you can use a slice function
to grab a subset of this array.

36
00:02:39.250 --> 00:02:42.540
So let's say zero to two.

37
00:02:42.570 --> 00:02:45.140
This way we're going to be grabbing zero

38
00:02:45.170 --> 00:02:52.700
and one, and the two is going
to be excluded from our subset.

39
00:02:52.730 --> 00:02:55.180
So let's check this out.

40
00:02:55.210 --> 00:02:59.100
I'm just going to comment
out the console locks here.

41
00:02:59.130 --> 00:03:02.140
Let's run this and that's it.

42
00:03:02.170 --> 00:03:07.580
We see the first and second
element from our hobbies array.

43
00:03:07.610 --> 00:03:13.260
You can also do the filtering
of the array if you'd like.

44
00:03:13.290 --> 00:03:17.860
So let's create filtered hobbies.

45
00:03:17.890 --> 00:03:20.740
And let's say that we want to get

46
00:03:20.770 --> 00:03:28.180
everything from the hobbies array
that is not equal to sports.

47
00:03:28.210 --> 00:03:34.100
So if value is not equal to sports,
we want to see the values in our array.

48
00:03:34.130 --> 00:03:37.100
So let's see filtered hobbies.

49
00:03:37.130 --> 00:03:42.020
Now let's run this and great.

50
00:03:42.050 --> 00:03:46.740
Now we're getting cooking and painting
because they're not equal to sports.

51
00:03:46.770 --> 00:03:50.980
Map method returns a new array that is
derived from the original array

52
00:03:51.010 --> 00:03:53.260
by transforming each element.

53
00:03:53.290 --> 00:03:55.220
It takes a function as an argument

54
00:03:55.250 --> 00:03:59.860
that defines how to transform the element,
and then it returns a new array.

55
00:03:59.890 --> 00:04:01.780
We can use the arrow function within

56
00:04:01.810 --> 00:04:06.610
the map method to add, remove,
or modify elements of the array.

57
00:04:06.640 --> 00:04:10.260
For example, let's update
our hobbies array.

58
00:04:10.290 --> 00:04:13.140
Let's create updated Hobbies,

59
00:04:13.170 --> 00:04:19.740
and then let's loop through
the Hobbies array with a map function.

60
00:04:19.770 --> 00:04:30.300
Let's get the value of each element
and then return hobby plus value.

61
00:04:30.320 --> 00:04:33.540
Great.
Now, if we were to see the updated

62
00:04:33.570 --> 00:04:40.420
hobbies, we're going to see that we added
a string to each of the values here.

63
00:04:40.450 --> 00:04:43.700
In conclusion, arrays are crucial
data structures in JavaScript.

64
00:04:43.720 --> 00:04:45.380
By using built in methods like Map,

65
00:04:45.410 --> 00:04:49.060
we can manipulate arrays and create
new ones based on our needs.

66
00:04:49.090 --> 00:04:52.060
For more information on arrays and other
built in methods,

67
00:04:52.090 --> 00:04:59.340
please see the description where I'm going
to link the documentation to MDN website.

68
00:04:59.360 --> 00:05:01.760
Thanks for watching and see
you in the next video.