All language subtitles for 132 Adding Elements and Intermediate Array Techniques.en_US

All right guys. Let's say that you've completed this course and you've built up a portfolio of web sites

that you have coded up and you're ready to get a job as a web developer.

Now one of the most common questions that you're going to encounter on any programming interview is something

called FizzBuzz, and it's a really simple problem and this is usually how they would define it.

So you have to write a program that prints the numbers from 1 to 100. But for multiples of three print

"Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both

three and five, for example fifteen, then print "FizzBuzz" instead of the number.

So it's pretty simple, but it's a really easy way of seeing how you solve problems and demonstrating

a candidate's programming skills.

And just the other day I came across a article on Coding Horror, which is one of my favorite blogs, about

why can't programmers program.

And the interesting thing that they talk about is what seems to be common knowledge amongst programming

recruiters, and the fact of the matter is that out of 200 applicants there's probably only one person

who can actually code.

And this is a really strange phenomenon.

Part of the reason is down to the fact that completing computer science degrees doesn't necessarily

enable people to code, and a lot of people will graduate from a computer science degree and they might

know how, say, compilers work or, you know, some aspects of computer history, but they might not actually

know exactly how to write good code.

One of the most interesting statistics I came across is that in the UK some of the most in-demand jobs

involve programming and software development,

and yet the university degree that has the highest unemployment rate happens to be computer science,

which is really really strange.

So I'm going to use this classic interview question and I'm going to make it even more difficult because

we're going to use it to learn all about arrays

but on a slightly deeper level.

So let's try and be better than 199 of programming interviewees, and let's look at this FizzBuzz problem

and use it to learn more about arrays.

So the problem is based on a game that children play in England in the UK which somebody at some point

thought was fun, but that really depends on your definition of fun.

So the idea is that you have a bunch of children in a circle and they will go in turn listing the numbers

in sequence.

So 1, 2, etc..

But if the number that you have to call out is divisible by three then you have to shout Fizz instead

of three.

And if it's divisible by five you have to shout Buzz instead of five.

And if your number is divisible by both then you have an even harder problem because you have to shout

FizzBuzz.

So, it's pretty simple given that kids can play it, so we can write a program that can simulate a child

who can play FizzBuzz.

So let's break down the problem. How can we write some code that prints out a sequence of numbers starting

from 1?

Clearly you can tell that, you know, these children are not going to be programmers because they start

counting from 1 rather than 0.

But this is how the game works

so let's do that.

We need to get our code to print out a sequence of numbers starting from 1 and, every single time we

run the code,

the next number gets called out.

So let's create a new array.

So let's create a new array,

and let's call it output. And we're going to set it to an empty array.

Now next,

now we can either create a new array by giving it values to begin with,

for example this is an array that contains 1, 2, 3, or

you can start off with an empty array and use something called push in order to add new items into the

array. So you can write output.push,

and inside the parentheses you can put whatever it is that you want to push onto the array.

So for example let's push number 1.

So now if you print out output, then it's an array with a single item that's the number 1. And you can

keep doing this output.push.

Let's add 2 to this array.

And now output is an array with two values that is 1 and 2.

Now the important thing to remember about push is that it always pushes the item that you have in the

parentheses to the end of the array.

It doesn't push it in randomly into the array or at the beginning, it's always tagged on at the end.

And this is a really easy way of adding new items into your array as needed,

so in our case adding first 1, then 2, then 3, then 4, etc.. And a related function is something

called pop.

So you can pop items off your array by using the name of the array.pop.

So in our case our array is called eggs.

So if we say eggs.pop,

then it will take the last item in the array and it will remove it from the array.

So what we've seen is that we can basically keep saying output.push, and, each time we run this,

our array gets a new number added to the sequence, and if we do this many many times then we end up with

our sequence of numbers, right?

1, 2, 3, then 4, then 5, then 6 etc..

Now, the thing is, we're programmers, and this is a little bit too manual for us.

And in life, whenever things get a little bit too tedious,

my first thought is, I should make a function.

Now that happens on a regular basis and sometimes I can and sometimes I can't.

For example, loading up the washing machine, really tedious, blow drying long hair is really really tedious,

to the point where I start thinking about making a drone that I could program to dry my hair,

it just flies around me and dries my hair.

Now, in the future, if you ever come across a picture of me with no hair,

then you'll know what happened.

So instead of writing output.push every single time and adding the next number on, let's create

a function instead.

So let's go into our Snippets inside our index.js, and let's create our output array here, and let's

set it to an empty array.

Now next I'm going to create a function called fizzBuzz, and this is going to have a console.log in

it so that it will print out the value of the output every single time it's run.

OK. So so far our function does absolutely nothing.

Now here's the challenge. I want you to complete this code so that every single time you run the function

fizzBuzz, it will add the next number in the sequence to the array called output.

So write your code here,

and once you've succeeded, you should be able to call the function fizzBuzz and it will print out the

array, and every single time you run this code it will add the next number in the sequence. So you can

do something like this where, every time you call fizzBuzz, it will keep going and adding new numbers

into the array and printing it out into the console.

So you'll need to think back about what we learned in this lesson about push and pop,

and also think about how you can keep track of those numbers, and figuring out how you can add it to the

array.

So pause the video now and see if you can complete this challenge.

All right.

So how did that go?

Well, the first problem we have is we need to add a number that increases by one every single time we

run the function.

So we need a variable to keep track of that number.

So let's create a container, or a variable rather, called count, and let's set it to equal 1 in the beginning.

Now what we can do is we can use our output.push in order to push the value of count onto the end

of our array

that's called output.

So, at this point, if we run our code, the output array gets created as an empty array,

and once we run this function fizzBuzz, then 1 will get added to the output array,

so we will end up with an array with a single value

that's just the number 1, because that's what we pushed onto it.

But at the moment, no matter how many times I run this, it will keep adding 1 to the end of the array,

which is not quite what we want.

We want to increase the sequence of numbers.

So in order to do that we have to increment count.

And, you might remember from previous lessons, we'll have to do that by saying count equals count plus

one, or more simply,

we can just write count++.

So now, if we run this snippet and I clear my console and let's run fizzBuzz, you can see that each time

I run this function it will add the next number in the sequence to our array.

So that is one of the solutions to this challenge.

Now what about the next step?

How do we get our code to, instead of putting 3 into our array,

put the word "Fizz", and instead of putting 5 we want it to write "Buzz".

Well, remember previously we learned about something called the modulo. And this allows us to check what

the remainder is.

So for example if we said 12 modulo 2 then it will divide 12 by 2 and it will print out the remainder

which is 0, because 12 is fully divisible by 2. 12 divided by 2 equals 6

and there is no remainder,

whereas something like 12 modulo 5, then you will get a remainder.

So 5 goes into 12 twice,

which gets us up to 10, and then there's a remainder of 2.

So a common way that programmers use the modulo is to check whether if a number is fully divisible

by another number.

So we can use the same concept in our code in order to check to see if the current value of count is

divisible by 3.

And when it is, then instead of pushing count, we're going to push "Fizz" into our output array.

Now if count is divisible by 5 then we're going to push "Buzz" into our output array instead of the number

5,

and similarly for the case of FizzBuzz, when the numbers are both divisible by 3 and 5.

Now here's the challenge.

You should be able to call the function fizzBuzz in the console,

and every time you do so it will push the word "Fizz" into the array instead of the number that was divisible

by 3, and it will add the word "Buzz" into the array instead of the number that's divisible by 5.

And if a number is divisible by both 3 and 5 then it will add the word "FizzBuzz" into your array.

And you can keep going calling fizzBuzz each time to get the next value pushed onto the array.

So, using what you've learned about arrays, and some of the things that we've learnt in previous lessons,

pause the video now and see if you can complete this challenge.

All right.

So let's break down this problem.

The first thing that we need to do is to check if the value of count is divisible by three.

So to do that we can use the if statement. So we can say if count modulo 3,

so the remainder of count divided by 3 is equal to 0,

then in that case count is divisible by three,

and instead of pushing count into the output, we should push the word "Fizz". But otherwise,

or else, then we should push count, which is the number, and then we increase count by 1 and we print out

the value of output.

So now let's run our snippet and call fizzBuzz.

So we start off with 1, 2, and then we get Fizz because three is divisible by three, 4, 5, six, six

is divisible by three,

so we also get Fizz.

So our code is working.

All right so now let's address the next problem, Buzz. How do we take into account when our number is divisible

by five that it should print "Buzz"?

Well if, instead of having an else straight away, if we had an else if here, and we checked to see if count

is divisible, or modulo, 5 and that equals 0,

then in that case at this moment in time count is divisible by five,

so instead of pushing count we will push "Buzz". So now let's run our snippet, clear our console, and call

fizzBuzz.

So 1, 2, three is Fizz, 4, five is Buzz.

So our code is now working for Fizz and Buzz.

Now there's just one last thing that it's not complying with, which is what happens when the current number

is divisible by both 3 and 5.

As you can see at this point the number is 15 and it's only printing Fizz because the code runs from

top to bottom, and the first thing that it'll encounter is this if statement, which says that if count is divisible

by 3 push "Fizz". And once that's done it skips all the other else and else if statements, and it doesn't

even check to see whether it's also divisible by 5.

So there's a few ways of addressing this but the easiest way is to first check if count is divisible

by three

and at the same time count is divisible by five.

And in this case we can push "FizzBuzz" onto the output. And then we have

else if it's only divisible by three, push "Fizz", else if it's only divisible by five then push "Buzz",

and in all other scenarios, or else, then just push the number value of count on to our array.

So now if we run our code and call fizzBuzz, then you can see that it works for both divisible by 5

and 3 as well as when it's divisible by both numbers.

So the order of your if statements matter a huge deal, and it's almost like a water flow, right?

The water, or the code, will flow into each of the conditions, and once it's found a condition that's true,

it will skip every other avenue.

So it's important to think about how you order your if and else if statements.

Now there's a few other ways of solving this problem and it doesn't matter if you chose

my way of solving it or another way.

The whole point is getting you to think about how you can use conditionals and arrays to structure a

sequence.

Now, in the next lesson, we'll look at taking this code even further and making it even more automated,

because remember, what are we? We're programmers. And what have we got?

We've got all the codes. And just to take that point a little bit further, as extra reading you might

be interested in the story of a Russian programmer.

Now if you speak or read Russian then you will be able to read the story in its original form, and if

you don't, then there's a link to what somebody has translated into English.

It's a really funny story of an engineer who basically automated his entire work life using code, and

it fits in with our current theme of trying to automate everything that we do using code.

So enjoy and I'll see you on the next lesson.