Knowing objects instead of conditions
Your grasp and capabilities when working with objects and arrays can save you a lot of code and time. The best developers don't have pages full of if conditions. The more you lean on objects and arrays the less conditions your page and applications need. Less conditions usually translates into faster code and more readable code in the long run. As you develop this skill, your coding will becomes a lot more clean and simple.
Video Transcript
00:00The main reason why I kept if-conditions for such a late stage is mainly because I don't want you to use them too often.
00:09And it's very, very often where developers will lean too heavily on conditions.
00:13What happens when you lean too much on conditions is your code becomes very complicated.
00:19And if it's complicated for you, it's complicated for other people.
00:22And really, this isn't the perfect example where we're going to show you now, but
00:26the more you lean on objects and arrays, the more simple your code is and easier for you to digest and to do.
00:35So let's start doing it.
00:37Let's do the exact same thing that we did in the last few lessons, only this time more using heavily objects.
00:44What I want to do in this lecture lesson is I want to continue.
00:48I'm just going to copy that function.
00:50And instead of switching using our fade and switch, what I want to do is I want to animate using objects as much as we can,
00:57and kind of finding a way to showcase how could we reduce the amount of if-conditions or switches in our code in general.
01:05So when we look at this and we look, we'll see that first of all, we have our colors.
01:09And we have here about six colors, if I'm not mistaken.
01:12One, two, three, four, five, six.
01:14We have six colors and we have 12 cases.
01:17And we could use a more efficient way of trying to come up with a way to use it without using conditions.
01:22And I want to show you an example.
01:24So let's start with that.
01:25The first step is I want to create an array and it's just going to contain all of our colors.
01:30And the idea behind it is that I won't have to reference those colors more than once.
01:35So let me just copy all those colors here for a second and put them into our array.
01:40And I'm going to go ahead and just make sure that they're string value because that's not valid in JavaScript.
01:47And I'm just going to also make sure that I add the two extra colors which were completely white.
01:52One, two, three, four, five, six.
01:54And completely opaque, completely black, which was one, two, three, four, five, six times zero.
02:02All right. So we have our eight colors.
02:04The next step what I could do is I could create here basically a swatch of like eight hours.
02:09And in my eight hours, what I could do is literally just create here values and just set here
02:15the twelve values that are possible.
02:17What I'm basically going to try to do is because from zero all the way to five,
02:22we want to use the first color.
02:24And by the way, the order is completely wrong.
02:26This is actually really important.
02:28So I'm going to go ahead and, you know, let me just delete this because it's so important
02:32that we put the items here in the right order.
02:36So I'm just going to go ahead and just copy them one by one really quickly.
02:39We just have another four, I believe.
02:43So like one, two, three, four, five.
02:47Oh, yeah, another another two, I believe.
02:49Right. So that was two.
02:51This is three.
02:52And this is four.
02:57I'll just make sure that I have the ampersand before each of these numbers.
03:02OK, so back to what I was talking about.
03:04So what I want to do is I want to basically have your an array with twelve items
03:08and each item will just direct to the position in our eight colors that matches
03:13to the color that should be in that hour.
03:15So for example, for the first five items, actually for six items,
03:19we want to go out to position to this position in time,
03:23which in this case would be position zero because that's position zero.
03:28So what I would do is I'll just put your position zero, zero, zero, zero, zero,
03:33zero, one, two, three, four, five, six.
03:36And literally what I'm doing here is I'm basically setting for case zero,
03:40position zero, which is that color.
03:42And so forth for all the first six from zero through five.
03:46Next is we want to do for we want to set it for six and seven,
03:52the position number one.
03:54So for six and seven, we'll have position number one for eight, nine, ten.
03:58We want position two.
04:01Right. So that was for eight, nine, ten for twelve for ten.
04:09Oh, and I have your mistake because I use ten twice.
04:12I could delete that because we already have that case.
04:15It would never get there anyways.
04:17So we have your eleven, twelve, thirteen, fourteen, and all these items
04:21are going to go to position three.
04:22So we have their four items that would go to position thirteen.
04:25One, two, three, four.
04:27Okay. So we got that.
04:29And then we have your fifteen, sixteen, seventeen, eighteen,
04:33and that would be one, two, three, four.
04:35All right. So that we got four that would go to the next one,
04:39which would be one, two, three, four, one, two, three, four.
04:44And let's see if there's anything else.
04:46And then we have your five.
04:47And let me see.
04:48It seems like I'm missing a color here because I have your only four positions.
04:52Oh, it's actually six positions, right?
04:54Zero because we're including zero.
04:56And then we have the last one, which would be any other hour but that.
04:59So what I could do is or set the whole thing.
05:01So if we have your one, two, three, four, five, six, seven, eight,
05:04nine, ten, eleven, twelve, thirteen, fourteen, fifteen,
05:07fifteen, sixteen, seventeen, eighteen, nineteen.
05:10So we have your twenty, twenty one, twenty two, twenty three, twenty four,
05:13twenty five, twenty four, only twenty four hours a day.
05:16All right. And all I have to do now is I'm just going to copy that
05:19value from our tween max.
05:21And literally all I have to do is instead of setting that background
05:25color to starting color, I could literally just say, hey,
05:28take the a color, take the a color in position.
05:33In what position?
05:34In the position of our hour.
05:37In other words, a hours, hour.
05:42This is really, really sophisticated.
05:44So let's let's break a line here so it's so we can look at it more closely
05:48and just literally just focus on this.
05:50So we're saying, first of all, whatever hour is,
05:53let's say the hour now is midnight zero.
05:56If the hour is midnight zero, we're going to go to position
05:59to the eight hours, position zero, and we'll get zero back.
06:03And then we'll send that zero to eight colors.
06:05So we'll get this color.
06:06Let's say the time now is ten.
06:08If the hour is ten, we're going to go one, two, three, four,
06:11zero, one, two, three, four, five, six, seven, eight, nine, ten.
06:15And we'll get to position two.
06:17So we're going to get the value to come back from here.
06:20And then we'll go to zero, one, two.
06:21And this is going to be the color that we would get.
06:24So literally without using any if conditions,
06:27without using any switches,
06:29I got to switch my color back, my background's color.
06:32And if I save this and I go back to my application
06:34really quickly just to test it out, we'll see that first of all,
06:37oh, I have to first update the actual call.
06:40Instead of calling the switch, we're going to call the object.
06:44So now the time is, in two minutes,
06:46is going to be eight in the morning on this end.
06:48If I click on refresh your own, I see I have a little error here,
06:51missing before statement.
06:53So let's go right there and see, oh, we're missing an equal.
06:55And that's bad.
06:57So let's put there our equal.
06:59Because we want to assign this value into this array.
07:02And let's go back right in there and click on refresh.
07:05And now we'll see that we're getting, first of all,
07:07we're getting this really dark color.
07:08Question is why.
07:10And to be able to solve that question,
07:13we could go back into our code and see an hour.
07:16Because right now the time is seven.
07:19So it's still seven, it's not eight yet.
07:21So zero, one, two, three, four, five, six, seven.
07:25We should be getting the color that is this color.
07:28But let's test it out more closely.
07:30So I'm just going to take this object,
07:32and I'm just going to go into my code here,
07:34and I'm just going to call position zero.
07:36So for position zero, we would expect it to be completely dark.
07:40And it is.
07:41For position, let's see what's the next item in the queue.
07:44So that's for position zero, one, two, three, four, five.
07:50And then for six, we're going to get a different color.
07:52You know what?
07:53And this is the thing is I mixed the color combinations,
07:56I believe.
07:57But let's see, if I put here 10, we're getting lighter.
08:04If I put here 12, we're getting even lighter.
08:07If I put here four, we're getting really light.
08:10If I put here a darker nighttime, then we're going to go to black.
08:14So literally, we see the whole gamut is working.
08:16We're seeing that color variation changing,
08:18using this very smart, very simple.
08:22In many ways, it's simple because we're taking this
08:24and it's replacing all of this.
08:27The only thing missing for us is to fix our problem
08:30that we have for this tweener.
08:31And because both these tweens really are only in a scenario
08:35where we have six or 12, we could add here a small little
08:39if statement right underneath here asking if it's six
08:42or if it's 12.
08:43And that's exactly going to be the topic of our next lesson
08:46where we're going to talk about how could we create
08:49if they're a little bit smarter that will enable us to have
08:52both one and the second condition going on with it.
08:55So we're going to see in the next lesson where we finish up
08:57this fade in object, we're going to use if
08:59and a bit of a smarter if.
09:02If you move on to the next lesson.