JavaScript and ES6 Challenges - Do you know JavaScript? | Bogdan Stashchuk | Skillshare

JavaScript and ES6 Challenges - Do you know JavaScript?

Bogdan Stashchuk

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (8m)
    • 1. 38 ✓ CHALLENGE 19 Iterate over Object SOLUTION

      7:39
    • 2. 39 CHALLENGE 20 Sum positive and negative numbers

      0:26
    • 3. 40 ✓ CHALLENGE 20 Sum positive and negative numbers SOLUTION

      5:07

About This Class

In this course you will get JavaScript challenges that you will need to solve.

Each challenge consists of the task and solution. In some cases you will be asked to fix existing code, in some cases you will need to write some additional code. I will explain each line of the solution and you will deeply understand what happens behind the scenes.

Topics of the challenges are following:

- Destructuring

- Array helper methods

- Variables hoisting

- Let, Var and Const

- Rest and Spread Operators

- Ternary Operator

- Default parameters

- Closures

- IIFE (Immediately Invoked Function Expressions)

- Classes

At the beginning of the course you will get source files for all challenges. They include start and finish states for each challenge.

You need to begin with "start" folder for each challenge.

Transcripts

1. 38 ✓ CHALLENGE 19 Iterate over Object SOLUTION: let's first create some object values function and then discuss how we can it right or object. So let's great function here. So function some object values. Then it will take an object. And here is a function of body. Let's save this and open up Terminal and B M Ron Deaf and open developer tools. So now in sick Also VC Undefined Because at the moment we don't have any contents off the some objective Ellis function. Okay, how can we it right over object in breathers challenges. We have iterated strings and arrays. Let's go back to the Council. So now we have a very bold cold numbs. It is an object and it is an instance off object. So Nam's instance off object. It is true. So I brought the type off. The Nam's is object. Let's greet one more variable here in the council called a and it will be an a rain. So borrow a equal empty array and let's get this variable So it is empty array on Did this prototype off the arena and this area a has method called symbol dot iterating and because off this it aerator, we are able to reiterate over a rain. Let's not create streak, but let's create it as an instance off the street object because otherwise we will get just playing string as a primitive variable type. So let's great string bar str equal new string and empty string legs is. And if I try to get this variable, it will tell us that this instance off the string object And if I will expand this string prototype, I will also see symbol dot it aerator method. It is possible to it right over strings and race because they have this beautiful symbol that it aerator method. Let's look at the object Nam's Once again it is instance off the object and let's expand this prototype. This object prototype doesn't have symbol Doctor Toretto. It means that you are not able to reiterate or object using this built in it aerator, and you cannot use, for example, for oval. But there is another iteration option for in group that will it rate over keys off the object and we're gonna use it here. So let's go to this some object bell dysfunction. And let's use this for in group for four. Let gay It is scheme in object. And let's simply lock escape, Consul. Okay, let's save and go back to Google Chrome. And here you see a, B, C, D. And those are keys off the Nam's object. If we want to get values off, sort and fuels, we can use syntax legs. This object square brackets cape so gay is a variable. That's why we need to access certain field off the object using square bracket syntax. If I will add quote here, I will try to access field with the name K that is absent in this object. That's why you need to delete those schools and access field by the variable name. So let's say this comment s and go back to Google Chrome. So now I get values off the fuels, then 20 string and 12. Now we can proceed with the task and some overlays off the fuels that the numbers. Okay, let's do this. Let's delete council. Look, statement. We don't need it anymore. Let's at variable, cold total and initially it will be zero. And in the four in group we need to check where's our field value is. Number or not, we can do this legs this You've dive off or project okay, equal to number. Then we will increment total by object value. So total plus equal object gay legs is And at the end of the function, let's return total. That saves us coming s aunt, Let's go back to Google Chrome. So now is the result 42. So result matches this council look output there is one more soon left. We need to ensure that iteration is performed on lee our own properties off the object and not properties off its prototype. What does it mean? I will show you know So numbs is instance off the object What's verifies us again? Nam's instance off object and its broader type is object. Here it is. I will expend it and he was prototype and this prototype may have certain properties off course. This JavaScript object doesn't have any properties by default it because only methods. But let's at one more property. So this global object Let's just like this object. Don't prototype and property name, for example, new and well you will be 500. What saves us and go back to the council. I see 542 instead of 42. Let's look at the Nam's object again. Let's expand it and let's look as a prototype. And now you see, the prototype has its own property new with a value 500. And it means is that now, in this foreign look iteration is done over all properties off the object into a big properties off its prototypes. That's why, as a result, I get 542 I some all those numbers and number that is value off the new property off the object prototype. In order to fix this, I need to add one more condition here and or project has own property. Okay, I will ensure that this property K is own property off the object. What saves us Common s and let's go back to Google Chrome. Now I see 42. It means now, with this condition in place, I am iterating on lee our own properties off the object. And of course, we need to delete this line where we have created this new property off the global object. You should never do like this because in this case, all objects in your coat will automatically get this property. Okay, let's delete it and let's saves us. Let's go back again. And very fight. That result is 42. Okay, now this challenge is sold. 2. 39 CHALLENGE 20 Sum positive and negative numbers: In this challenge, you should create a function called Sam plus miners, that you will take an array off numbers like this and that will some positive and negative numbers. And this function should return an object with two fields last and miners where plus, is a some off old positive numbers and minus is some off old negative numbers. Good luck. 3. 40 ✓ CHALLENGE 20 Sum positive and negative numbers SOLUTION: Let's solve this challenge using reduce array method. So let's write some plus minus function here. Function Some plus miners This function will take an array are and here is a function body . This function will return result off the reduced method so return are don't reduce This reduced method needs to arguments go back function with accumulator entering element and second argument that is optional. It is initial value off the accumulator. And of course, let's use arrow function to construct this callback function, so function with two arguments are come later and right element. Zenefits, Aero and Body of the Function. Second argument should be initial value off the accumulator. Some plus minus function need to return an object with two fields last and miners. Let's use the structure for our calculator. I will add maligns here in orderto make it more visible for you and here will be object with two fields blast with initial value zero and minus with initial value zero like this. So this object is initial value off the accumulator and now Cisco back function should return new value off the simulator each time as the troops through the array. Let's do this Let's at here New line and left return. New object. This object will have to field loss and minus, and we can use ordinary operator in order to construct values off plus and minus fields. So if element is greater than zero, then we will add value to the class field. If element is less than zero, then we will add value to the miners field. Let's do this. If element is greater than zero, then we will add this element to the previous value. Off the plus seem to legs this arc. Don't gloss Blas Ellen. Otherwise, we will leave our glass unchanged. So let's do the same for the minus field off girls and two comma here based here. And let's modify this tannery operator if element is you as, um zero, the Ark Miners los L'm otherwise OC minus and that's it. Let's verify this common as and let's Ron's this cold. Open up New Terminal and and B M Ron Deaf. Let's open up developer tools and in the council you see a norm eject with two fields minus and plus minuses minus 54 glasses 74. Let's go back to the task this exactly what was requested here. There was one place where we can simplify our court, uses it. Here is a block off statements off the arrow function. If there is just one statement, weaken, Delete those cruelly braces who s believed them legs is. And let's delete baritone statement. But now here is an object with two key value. Pales but JavaScript. We'll try toe Paris it as a block off statements because cruelly braces represent block. That's why we need toe turn this object into the expression. So simply let's at horrendous is here and here and let's save this cold Common s Let's go back to Google chrome and nothing changed, so result is the same. Okay, let's summarize in the dusk it was needed to some positive and negative numbers off the array. And we have used reduce array method for this initial value of accumulator is this one. There's an object with two fields lost and minus, so reduce. We'll loop through the array and for each element, we perform this operation at this element to the previous value off the accumulator. That plus, if this element is greater than zero or if this lesson zero we added to the Ark miners. Otherwise we simply return Arctic blast or Arctic miners. That's a simple no, this jealousy is sold.