Measure your Vue application performance in a standard and consistent way. Previously we have seen how we can quickly measure performance in Javascript. How about Vue? Vue is the right mix of UI and business logic, and cannot be tested with standard back-end script execution speed. On the other hand, standard UI testing tools may prove to be a bit of an overkill due to the effort required to develop and maintain them. ...
Finally overrides any return statement from the try/catch. We write try/catch/finally for error handling in Javascript - function tryTryTry() { try { return 4; } catch (e) { console.log(e); } finally { return 42; } } console.log(tryTryTry()); //42 The function returns 42 and not 4. Why? Because finally always gets executed - both for the normal execution flow and errors. In the above code block - try returns 4 control flow jumps to finally block finally returns 42 caller gets 42
tldr; There are no associative arrays in Javascript. But there is indeed a credible alternative. In PHP, we can do the following - var fruits={}; fruits[3]="apple"; fruits[2]="orange"; fruits[1]="pear"; Javascript does not have associative arrays. All you can do is - const fruits = ["apple", "orange", "pear"]; Yes, you can define props for the array itself, but that is an altogether different thing. fruits["grape"] = "white"; The above statement does not “modify the array elements”. It just adds a prop to the array object. So, you cannot iterate and the length of array stays the same as before. ...
Allow a function to be called once and only once. We have previously seen an example where debounce can be used to call a function once and can ignore subsequent calls. There is a shorthand way to allow a single function call that if you are not interested in the debounce part of the problem. function getSum(x, y) { arguments.callee.count = arguments.callee.count || 0; arguments.callee.count++; console.log(arguments.callee.count); // 1 2 3 if (arguments.callee.count <= 1) { console.log("sum", x + y); return x + y; } } getSum(4, 2); // 6 getSum(1, 2); // no sum getSum(0, 1); // no sum This is cool, right? Ok then, here’s what you do for homework - discover a way to allow calling any given function twice and only twice.
You can easily use switch to check whether a number is in specified range. We have seen the advantages of using switch instead of if/else. const num = 1; switch (num) { case 1: console.log("one"); break; case 2: console.log("two"); break; case 5: console.log("five"); break; default: console.log("none"); } You are sold by now, but there is this problem - how will you use switch if you need to check whether num < 10 and num > 5. You may have missed this from our date validation logic, but switch can do the range checks well. You just have to change the conditions a bit. ...
Negative number indexes do not countdown in an array in Javascript. There was this forum post that asked about why negative numbers do not work “as expected” in an array. The logic of the question is - const nums = [1, 3, 5]; console.log(nums[-1]); // should have been 5, but returns undefined I fondly remembered my good ol’ days with Python, and then thought about two things - Why do people not use Google? Why do I exist in this universe? The second question was more philosophical in nature, is persistent, and has nothing to do with the question. ...
Check whether a given value is an array before subjecting it to array methods. Loose typing can be a pain when your methods are being called from other methods / external modules. It is a good idea to check for valid types to avoid throwing runtime errors that are difficult to understand or parse. Using type checks is one such practice. As seen earlier, type checks is easily done for primitives. ...
Get a random unique value from a specified array. You can use one of the hundred ways to get values at a specific index, or iterate over an array and get values in sequence. const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(nums[0]); // 1 nums.forEach(val => console.log(val)); // 1 2 3 4 5 6 7 8 9 But, what if you want to randomly get values from the array? That is easy too. console.log(nums[Math.floor(Math.random() * nums.length)]); console.log(nums[Math.floor(Math.random() * nums.length)]); console.log(nums[Math.floor(Math.random() * nums.length)]); However, you will see more repeating values than expected in the above logic (especially if you have a small array). To avoid repetitions, you can compare your current random index with previous random index, and change it if equal. ...
Use this shortcut to do multiple checks in one go. You have seen an or condition a billion times before, haven’t you? const fruit = "apple"; let shape; if (fruit == "apple" || fruit == "orange" || fruit == "water melon") { shape = "round"; } console.log(shape); // round We use or conditions quite a bit, and there is a way to streamline that code. const fruit = "apple"; let shape; if (["apple", "orange", "water melon"].indexOf(fruit) >= 0) { shape = "round"; } console.log(shape); // round Or, you could use an object. const fruit = "apple"; let shape; if ({ apple: true, orange: true, "water melon": true }[fruit] >= 0) { shape = "round"; } console.log(shape); // round These methods are particularly useful when you have to run your values through a set of validation rules. Instead of using nested if or switch statements, you can use a simple array or object to make your code more readable.
You can get a bundle size report just by using Vue CLI and nothing else. Keeping track of bundle sizes is a best practice. You need to know what gets delivered to users so that you can try to optimize stuff and take corrective steps to decrease chunk sizes, tree-shake where you can etc. All these steps will hopefully lead to smaller bundles or smaller incremental files that should speed up your application (at least in perception!). ...