The 10 Days of JavaScript: Day 7 (Returning vs Mutating)

by birtanpublished on July 3, 2020

[Music]

hello everyone welcome back to the ten

days of JavaScript here we are in day

number seven and in this lesson we are

going to talk about the difference

between returning and mutating now don't

worry I do not expect you to know what I

mean by those two words right now and

before we try to jump right into the

concepts let's first begin by just

giving ourselves a bit of sample data to

work with or experiment with and I want

you to type this out with me so let's

create a variable and name it pets and

I'm gonna set it to equal an array so

square brackets and I actually want each

item in this array to be an object so to

create an object we include curly

brackets let's give this first object a

property of name and then colon and then

give it a value I'm gonna name this

first pet meows a lot right after the

quotes for that name value I'm gonna

include a comma and then give it another

property of species and give it a value

of cat and then finally comma one more

property I'm going to give it an age of

two okay so we've got one object that

represents a cat now I want to create

additional objects within this array but

just for the sake of staying organized I

don't want this line of code to become

super long and difficult to read so what

I'm going to do is right in between the

beginning square bracket and curly

bracket here I can just drop down and

then it right after the closing curly

bracket for our object I can drop down

again okay and now we can just add a

comma at the end of this line and we can

include another pet object so then we

can have one per line so it's easy to

read so let's create a dog this time I'm

gonna give it a name of barks-a-lot

species should be dog and let's say age

is three and while we're at it let's

create one more animal object so name

I'm gonna name this one purrs loud give

it a species

of cat and I will say that it's eight

years old okay now if you want to pause

the video lesson right now to give

yourself a minute to type this out

that's okay and next let's do a quick

review so two or three lessons ago we

learned that we can programmatically add

on to the end of an array by using the

method named push so we could start with

our variable pets and then in JavaScript

arrays have access to a method so dot

push and then let's imagine that we want

to add on a dog to the array so curly

brackets to create an object let's give

it a name of pupster let's give it a

species of dog and I'll give it an age

of one okay now let's test this out

let's log out the pets array to the

console and see if the new dog was

successfully added and just to be clear

you want to open your console by

right-clicking down in the preview area

of code pen and then choose inspect and

then click on to the console tab okay so

back in our code we could say console

dot log and then just log out our pets

variable so if I check the console we

see an array with four items if I expand

it awesome we see the final object is

that new pupster dog cool now this is

not new we already learned about the

push method several lessons ago the

reason I'm showing it again right now is

because it's a great example of

understanding the difference between

mutating and returning so in this

context the word mutating just means

changing or modifying what I mean by

this is when we call the push method on

this array it's going to modify or

change or mutate that original array

right after this line of code runs the

pets array has changed however that's

not all that the push method does it

also returns a value it returns the

number of items

that are now in the array so in this

case it would return a value of the

number four however we are not seeing

that value of four because we didn't

store this in a variable nor did we log

it out to the console nor did we output

it on to the webpage so right now the

value that this push method is returning

is just sort of sitting in outer space

sort of in no-man's land now just as a

test we can see the value that it

returns by maybe logging this entire

line to the console so check this out I

want you to cut this entire pets thought

push line into your clipboard I'm gonna

select this cut it and then let's write

out console dot log and then in the

parenthesis just paste in your clipboard

okay now if I check the console there we

see that value that the push method is

returning so it returns a simple number

value but the line of code also still

ran and mutated the array because when

we logged out the array we see that

there are still four items and the

pupster object was successfully pushed

on to the array so we could almost say

that the push method lives a double life

on the one hand it performs an action on

the array right it changes or mutates

the array and then on the other hand it

returns a value now the real question

here is why is this interesting

well the reason this distinction between

mutating and returning is important is

because there are other array methods

that do not mutate or change the array

and they only return a value now up

until this point the array methods that

we've seen like push and splice well

really the main reason you would use

these methods is to mutate or change the

array and the values that these

functions return almost seems like a

weird side effect that would never be

very useful however

right now I want to show you two array

methods that are extremely useful even

though all they do is return a value

right they do not mutate the original

array and those two methods that I want

to show you our map and filter so let's

do this I'm going to erase this console

dot log pets line at the very bottom

okay below this on a new line of code I

want to show you the map method but

first let's give ourselves a goal to

work towards so let's imagine that we

want to create a new array of these same

pets except in the new array instead of

each animal being represented as an

object with these different properties

like name and species and age maybe in

this new array we only want the name of

each animal so we would literally want

an array that just said meows a lot and

then the next item is barks-a-lot and

the next item was pers allowed and

pupster so how can we achieve this

well luckily the map method is perfect

when you want to create a new array that

is based on another array let me show

you what I mean so down on this new line

of code let's begin with our pets array

and then say dot map so in JavaScript

every array has access to a method named

map and map is a higher order function

it accepts a function as an argument now

before we pass a function into these

parentheses here let's talk a little bit

about what map is actually going to do

so the map method does not mutate or

change the array that you call it from

instead it simply returns a new value

and the value that it returns is a brand

new separate array let's include a

function within the parentheses here and

then I will explain how the map method

really works so I'm going to make up a

function name let's call it name only

okay then on a new line let's create a

matching function with that

new name so function name only

parentheses curly brackets and now what

the map method is going to do is call

this function once for each item in the

pets array so it's going to loop through

the array in our case our array has four

items so it's going to call this

function four times but if your array

had 500 items it would call the function

500 times now ultimately the map method

returns a brand new array and how it

works is each time it calls our function

whatever this function returns is what's

going to get added on to the brand-new

array now don't worry I do not expect

this to make sense just yet I think in

about 60 seconds from now it's gonna

start making sense just as a test within

the body of our function here

let's return a string of text that

simply says hello now ultimately on this

line of code the map method is going to

return a brand new array that simply

contains the word hello four times but

as of this moment that array value that

the map method is going to return is

going to get returned into outer space

or no-man's land

so instead why don't we save this into a

new variable so at the beginning of this

pets thought map line let's say let and

you can make up any variable name I'm

going to call it our test let it equal

whatever pets dot map is going to return

now just as a test down here let's log

out to the console the our test variable

so we can say console dot log our test

and if we check the console we do indeed

see an array with four items and it's

simply hello hello hello hello this is

where things might start to make sense

for you there are four items in the pets

array and because the function that we

provided the map method simply always

returns a value of hello that's what

gets added on to the brand-new array

that map is creating now let's get back

to the goal at hand

remember we wanted to create a brand new

array that was simply the name of each

pet so check this out when map calls the

function that we provided it passes into

the function the current item that it's

looping through so down in our function

inside the parentheses right after our

function name let's include a parameter

I'm just gonna say X because it's easy

to type but you could call it pet or

animal or item the name of the parameter

does not matter the idea though is that

the first time the map method calls our

function X or this parameter would

represent the meows a lot object and

then the second time map calls our

function X would represent the

barks-a-lot object so instead of

returning the word hello let's get rid

of the quotes hello and if X represents

the current pet object that's being

passed into our function we know that

you can look inside an object with the

dot and we are interested in the value

of the name property so we can just say

X dot name and if we check the console

awesome we see an array with four items

and it is simply the names of each

animal now let's change gears so we just

saw the map method in a nutshell and

before we finally get to the fun part or

the aha moment part of this lesson I

want to show you one more array method

that is named filter let's give

ourselves a quick goal let's imagine

that we want to create a new array that

only contains the dogs from the pets

array so no cats only dogs how can we

achieve this well luckily in JavaScript

all arrays have access to a method named

filter so check this out we can go ahead

and get rid of this console dot log our

test line and let's say pets dot filter

is very similar to the map method so it

does not mutate or change the array that

we call

from it simply returns a value that is a

brand-new array and it's also a higher

order function so let's try this at the

beginning of this line let's save this

into a variable so let's say let dog's

equal whatever pets dot filter is going

to return now within these parentheses

let's pass filter a function I'm gonna

make up a function name let's call it

only dogs okay and now let's actually

create a function with that matching

name so function only dogs parentheses

curly brackets and just like with map

filter is going to call our function

once for each item in the pets array the

difference is that with filter our

function doesn't specify exactly what

should get added to the new array

instead we simply return either true or

false let me explain what I mean by this

so within the parentheses for our only

dogs function let's include X as a

parameter right and the first time that

filter calls our function X the X

parameter is going to represent the

first item in our array which happens to

be the meows alot object so down in our

brand-new function if we return a value

of true that meows a lot object will be

added to our brand-new filtered array if

we return false that item will be

skipped and it will not be added to the

new array so since we learned about true

and false values in an earlier lesson

check this out if we only want dogs we

can simply say X dot species equal sign

equal sign dog the double equal sign

comparison operator is going to boil

down to either true or false based on

the values to its left and to its right

so in other words this is only going to

return true if the item is a dog so

let's test this out down here let's log

out to the console our dog's array

so we can say console dot log dogs if we

check the console we see an array with

two items if I expand it awesome it only

contains barks-a-lot

and pupster now really quick I just want

to do one more thing before we finally

get to the aha moment of this lesson

back in our code right beneath our only

dogs function why don't we create a

brand new function and call it only

babies it's a function only babies

parentheses curly brackets and we could

use this function if you imagine that we

only wanted an array of pets that were

younger than the age of three so within

the parentheses let's include a

parameter to work with the current item

and let's say only return true if X dot

age is less than three okay now this is

finally the aha moment of the lesson

down here let's get rid of the console

dot log dogs line and check this out

let's imagine that we want to create a

new array that is simply the names of

the dogs that are under the age of three

so we could create a variable and say

let baby dog names equal and then we

could begin with our pets array and call

the filter method and filter out for

only dogs and now this is the cool part

because this highlighted section of code

is going to return an array well we can

just look inside that array that it's

going to return and filter it again now

what we just did is super important in

terms of understanding JavaScript so

you've already heard me say this about a

hundred times but when I say that all

arrays have access to these methods I

literally mean all arrays not only

arrays that have been already saved into

a variable but even arrays that are just

sort of floating in outer space or in

no-man's land

so as soon as this highlighted part

returns its value or its array that

array is just sort of floating in memory

or floating in outer space but then we

can tack on to it and say hey that's an

array just like any other array it must

have access to these array methods so

another dot filter and this time we can

filter for only babies and finally if we

want this array to only contain the name

property and not the age or species well

we know that this is going to return an

array so we can just look inside that

array and call the map method and

remember our old function was named name

only and it also returns an array and

that is what we can finally let get

saved into our variable let's go ahead

and test things out by logging this to

the console so console dot log baby dog

names and if we check the console

awesome it's an array with just one item

and it's only the name the big takeaway

point for this lesson is that even

though these methods do not mutate or

change the original array they are still

incredibly powerful they are powerful on

their own but then once we realize that

we can chain together multiple actions

like this we begin to see the true

nature of JavaScript and how creative we

can get with our code chaining together

actions like this is not limited to only

arrays we can do this with basically any

data type in JavaScript if it's not

crystal clear do not worry because this

is a concept that we are going to

practice again and again throughout the

course that's going to bring this lesson

to a close in our next lesson we are

going to learn about scope and context

so what in the world do those words mean

in relation to JavaScript

well let's keep things rolling and let's

find out in the next lesson

the ten days of javascript is the first

chapter from my upcoming premium course

full stack javascript from scratch I'm

making these first 10 or 11 videos

freely available on YouTube and so for

the next 10 days I'm going to upload one

new video each day so stay tuned or if

you're watching this in the future all

the lessons are up so feel free to binge

watch the full premium course is not

available just yet but if you subscribe

to this channel you'll be notified as

soon as it's out or you're watching this

video in the future it's already

available enjoy

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 7 (Returning vs Mutating)”

Your email address will not be published.

There are no comments yet.