Tech Talk: "Supercharge your JavaScript" mit Nico Reindl

Tech Talk: "Supercharge your JavaScript" mit Nico Reindl

Welcome to „Supercharge your JavaScript“, I’m Nico Reindl, one of the founders of myregionalfood. Today I will introduce you to about fifteen tips which will supercharge your JavaScript – all those tips, some of them are a bit confusing, so please don’t get frustrated. Initially I planned to do some livecoding, but then I thought I would just put some screenshots in, because when I do livecoding, you will look at me coding for about 2/3 of the talk and compiling the code – which is kinda boring. So I took the essence of the code and also highlighted which of the tips is the most important part in the code.

So, without further ado – let’s get started! The first tip is about the spread operator. The spread operator can be very useful – the spread operator is by the way these three dots, you will see in about a minute. So, for example you have an object, which is a pet, which has the name Henry. So you want to set the type and the size of the pet – type is cat and the size is 60, whatever, it’s 60. So you could do it this way, or you could use the spread operator, which is underlined in red – by the way all those essences are underlined in red. So you have the pet Henry and you can now reassign the object, use the spread operator to spread out the pet and then use it this way for the type cat and size. This becomes very useful, because for example you have two objects – pet and pet attributes. You want to combine them and you could do it this way, when you set the pet.type to the petAttributes.type, but this gets very tedious, because for example you have an object with about 80 or more values – it kinda gets a bit dirty in programming sometimes, you know – you just take those two objects and assign it to the pet again and spread out both values. A very good lifesaver if you have huge objects, which is great!

You can also – maybe some of you already know – deconstruct objects, you have the pet and on the object is the value name. In curly brackets you extract the name or the type and when you combine it with the spread operator – which becomes very cool – you have the pet, then you deconstruct size and color and with the spread operator, when you use it in this deconstructing, you get all those values which are left on the object. In this case name: 'Henry' and type: 'Cat'. Which becomes very useful, because you can use it to delete some values of the object. Use it all the time, it's amazing!

You can also use it to put together two arrays or more. So for example you have banana types. By the way, bananas actually have different kinds, I googled it, it's amazing. There are red bananas, which are – obviously – red, cool! So, you can iterate over the array of more bananas and for each banana you push it to the other banana types, which is already a bit simplified than the usual loops, but you can also just use the spread operator and spread out both arrays into a new array – also very cool! You can now put values at the start of the array or at the back of the array or you can shuffle them around, it's very flexible. Pretty cool!

Next tip on the spread operator – you have a function, which has three arguments x, y and z, which the function just multiplies together and you can call it with three numbers. But what if you want to add more numbers or just two numbers? You can use the spread operator and use the argument ...numbers and in the argument you can now have the numbers as the array of all the numbers here. You have to rewrite the function a bit, but now you can add to the multiply function three, five, or more, two, you can even put a hundred values in. Now what's very cool is you have an array with a lot of numbers and you don't want to type each number in or iterate over it – or whatever crazy stuff you want to do – you just use the array and spread it into the arguments, which is very handy and saves you a lot of time! So that's for the spread operator.

The next one is not a curse word – might look like it – but it's the ternary operator, the logical AND and the logical OR operator. So the ternary operator – the question mark – you can use it to substitute the IF statement. You can use: if the size is greater than ten then you call the function console.log('Big') and if it's false, then it's console.log('Small'), which is pretty cool because you can also write it that way – console.log(size > 10 ? 'Big' : 'Small'). This becomes quite handy, because you save a lot of if statements and that reduces your code size and is for better readability. You can also use it for assigning values, for example. You have the nameOfSize and if the size is greater than ten, it's 'Big', if it's not greater than ten it's 'Small', quite useful.

So, you have the logical AND operator, you have a function which plays the batman theme and you have a variable if batman is coming – it's always true, constant – and if batman is coming, you want to play the batman theme. If not, then well... undefined? It's not that clean. So, what you can do is just us the logical AND operator and if batman is coming, you play the theme – if he's not coming, don't play the theme.

To assign values – for example you want to assign a value to another value, if it is not undefined you check if it's not undefined, the value, if not, then you use some fallback value. So the thing here is, it kinda looks a bit... well, not so clean. What you can do is, you can use the OR operator. If that value is undefined, just use the fallback value. Looks a bit cleaner in my opinion.

One of the biggest cleanup tricks I do all the time now, which I can't live without – use the ternary operator to cut those undefined check chains by a lot. So, you see you have for example when you want to check a very deeply nested field if it's greater than ten – you have to check all those values in front if this is not undefined and this is not undefined and this, it gets very tedious. I even cut the code a bit on the last field I did not even write the second subfield, because it gets so long! It even gets more ridiculous when you start to nest if-else statements – don't do it, please! What you can do is just use the ternary operator, write a question mark and the code gets a lot smaller and it's very readable. Pretty cool!

Now I'm coming to some useful tricks.

The first useful trick is when you have an array of numbers, you want to get the first few numbers. What you can do is just adjust the size of the array to three – now the array is 0, 1 and 2. Pretty useful. By the way, the array now gets edited, so the new array is now smaller. What can you do when you want to get the last one? 7, 8 and 9. What you can do is you slice the array with a negative number, so it gets 7, 8 and 9, which is pretty useful, because now they are the last values. One thing to note here is you have to assign those results of the slice method to a new value, because a numbers array doesn't get reassigned. So, getting the first and last elements: easy!

The next one is: dynamic object, dynamic values. You have an object, which is doge, the name is 'Doge', the crypto is 'DogeCoin' and you have a dynamic value which is above, very dynamic and the value is 'wow much dynamic'! So what can you do with it? For example, you can use the reduce operator – by the way the reduce operator, you can use it for example for you have again a lot of numbers and you use the reduce operator to sum up those values. So, what you can do is use the reduce operator for much fancier stuff. You have an array of fruits, objects, the type is 'melone' and you have a price and you have a big array of that. What do you need to do when you – for example – want fruit prices. So for example the melon is now with the value 34. So what you now can do, instead of writing a lot of huge complex code, which is error prone, you just use the reduce operator and you now can create with dynamic values a map. So you can result in melon is 34. By the way how reduce works is you have the value a and v. a is the starting value which is defined after the second argument, which is the empty curly braces, which is an empty object. a is in the beginning an empty object. In this empty object, the first dynamic value is the type – which is 'melone' – and v.price, which is the price, which is 34. Then you return a, now a becomes an object, which is melon: 34. Then you add the next one, which is kiwi and then Z I T R O N E. So, pretty useful.

The last tip, which is also pretty nice – you have an array, which is maybe pretty huge, which is users and you have a lot of values in it. Now you want to only have unique values in it, so there's not a lot of John in there. So what you can do is either go to Stack Overflow and copy some code and you don't quite know what it does, but it works. But what you also can do, you can use how collections work. And now you make use of the property of a set – a set collection is a collection where no value is duplicate in it. So out of this big array you create a new set, which gets rid of all these duplicate values. Then from the set you make an array again – now you have removed all those duplicate values and you have all unique values. It's just one line of code and it's very readable.

So, these are all the tips, I hope you enjoyed it. And I hope I have supercharged your JavaScript!


Technologien in diesem Artikel