All language subtitles for 012 Arrays & Array Methods like map()_en

Now besides objects,

another crucial JavaScript value type are arrays.

Though, technically, arrays are objects,

but they are special kinds of objects.

Now, an array is created by using square brackets,

opening and closing square brackets.

And the idea behind an array

simply is that you can create a list of values.

So where objects allow you to group values together

with key-value pairs,

the idea behind arrays is to have just values,

which are stored in a certain order

and which can be accessed by their position in that list.

So for example here, if I have an array of hobbies,

let's say Sports, Cooking, and Reading,

if I have such an array, I can access the array values

by using square brackets after the name of the variable

or constant that stores my array.

So by using these square brackets here.

And then there, I use the index, as it's called,

of the element I want to output in this case.

Now the index starts at zero.

So Sports here has an index of 0,

Cooking has an index of 1, Reading has an index of 2.

If I wanna output Sports here,

I would dare for access hobbies, square brackets, 0.

With that, if we reload this and take a look at the console,

I would see Sports.

Now arrays are a super common value type and JavaScript

because it turns out that you quite often

need to store a list of values.

For example, in this demo React application

I showed you earlier in the course,

there also was a content array,

which actually contained more arrays as values

because that's all important to know,

arrays can contain any kinds of values.

They can contain other arrays, objects, numbers, strings,

whatever you want.

Here I have an array of more arrays,

and those inner nested arrays then actually contain strings.

Now when defining array, the individual values

that make up the array are separated by commas.

And then as mentioned, you access values by their index.

Now since arrays are such a super important,

very common value type in JavaScript,

there actually also are a couple of built-in utility methods

you can use on arrays to transform

or read the values stored in the arrays.

You can access these utility array methods

by using the array name and then the dot notation.

And then you should automatically get a suggestion

of the methods that are available here.

For example, there is the push method,

which allows you to add a new item to an array.

For example, Working.

If I add this here and I then console.log hobbies,

you will see that now,

hobbies here actually contains four elements,

therefore ending with the index 3,

since we start at the index 0.

And the last element is this Working string

I just pushed onto the array.

Now there, of course, are way more methods,

and I'm not going to explain them all here.

But, for example, a never method, which you should know,

which can be quite useful sometimes,

is the findIndex method.

This is a method that allows you to find the index

of a certain value.

For this, findIndex actually takes a function as an input,

and that's a great use case for using such a arrow function,

since it's super short to write

and not a lot of characters to type.

This arrow function, which you pass to findIndex

should accept at least one input parameter,

which could be called item,

because findIndex behind the scenes

will execute this function,

which you're passing to findIndex,

and will automatically provide a value

for this input parameter.

Therefore, of course, your function also must accept it

in order to then use it in this function body.

Now, in this function body, in case of findIndex,

you then should return true if you have the item

that you were looking for, and false otherwise.

For that, we can return item === 'Sports', For example,

if we were looking for the index of the item Sports.

So if we were looking for the index of this item.

What this code here does is

it executes this function automatically behind the scenes

for every item in this array, including this Working item,

which was pushed onto the array.

And then for every item, it compares that item.

So that text here to this text,

with help of this comparison operator,

which I mentioned before.

If the two are equal, this function here returns true,

and therefore findIndex knows

that I found the item I was looking for,

and it will then give me the index of that item.

Otherwise, this will return false,

and findIndex will do nothing.

So, therefore, here I could store that index in a constant

and then console.log it.

If I save that here, I get 0

because indeed Sports,

which is the item I'm looking for here, has the index 0

since it's the first item in that array.

Now this code can definitely be

a bit more challenging to understand

since we're passing a function to another function,

and that's also something i'll get back to a little bit

later in this section again.

But in the end, all that's happening here

is that findIndex needs a function,

which it can execute on our behalf,

and it will execute this function

for every item in this array.

It will pass that item for every execution

into that function.

And, therefore, of course, item will be different

for every execution.

It will be those items here.

And then we compare the item we're getting

to some value we are looking for.

So this value we're looking for, of course,

is defined by us, the developer.

That's how this function here works.

Now as a side note, if you have code like this,

an arrow function where all you do in the function body,

so between these curly braces, is return something,

you can even shorten this code

and get rid of the return statement

and get rid of these curly braces,

and write this code like this.

Also get rid of this semicolon here.

This is then the shortest possible way of writing this.

And another advantage of using such a arrow function,

because this is now a very short, concise piece of code

for defining a function that takes an input called item,

and then compares that input

to some other value to yield true if these are equal

or false, otherwise.

Now, another very useful utility method

you'll see a lot throughout this course is the map method.

Map allows you to transform every item in an array

to another item.

for that map, just like findIndex,

takes a function as an input,

typically such an arrow function

since this is such a short and concise way of writing this.

And like this arrow function for findIndex,

this arrow function here

also will receive every item in the array as an input

because this function also will be executed automatically

by map for every item in the array,

and every item off the array will then be provided

as an input value to this function when it's being executed.

And then here you return the value

this item should be transformed to,

For example, item + "!".

So that I add an exclamation mark to every string here.

This of course is just a dummy example.

But when working with React,

you'll use this map method a lot

for outputting list content,

for mapping data into such JSX elements,

but that is something I'll get back to later again.

Here I'm just mapping my items to strings

with an exclamation mark at the end.

And what map will do is it'll not edit the original array.

Instead, that array will stay unchanged.

And instead, map will return a new array,

which I'll name editedHobbies.

If I then console.log editedHobbies here

and I reload this page,

I, therefore, get my editedHobbies here,

with all these exclamation marks at the end.

So that's what map does.

And since we'll see map quite a bit throughout this course,

I definitely wanted to mention it here.

Now, what's important to note about map

is that you can really use it to transform any item

to any other kind of item.

For example, here, we don't have to convert our strings

to new strings.

Instead, I could also convert them to JavaScript objects.

For that, I would create an object

with opening and closing curly braces,

which here, however, would have to be wrapped

with parentheses since, otherwise, they would be treated

as the parentheses that wrapped the function body.

If, instead, wanna return a JavaScript object,

I have to wrap the curly braces with parentheses.

And this will tell JavaScript that these curly braces

will not define the function body of this arrow function,

but instead will define a new object

returned by that arrow function.

And then here, I could define any key of my choice.

And, for example, store the item,

which in this case will be such a string

as a value for that key.

Really, you can create any kinds of values here,

any objects of any shape, numbers, strings, booleans,

whatever you want .

Here in this example, I'll, in the end,

create a new array that's full of JavaScript objects,

where every object has a text key,

which value is the value from the old array.

So if we save this code and reload this,

I now have a bunch of objects in my array.

And if I expand those,

you see that I have this text key here,

and the value then is the value I had before in my array.

And that's, of course, the case for all these objects.