category: Javascript

Be wary of prototype naming that can cause potential conflicts with one of the named objects. I have talked about using a non-emumerable property when defining a prototype, but what will happen if your prototype name conflicts with a prop name? You will loose quite a bit of hair - that’s what happens. Object.prototype.color = () => { return "blue"; }; let apple = { name: "apple", color: "red" }; console.log("invoke color function ", apple.color()); // TypeError: apple.color is not a function console.log("invoke color function ", apple.color); // red I don’t know of any way of preventing this other than “being careful”. What we end up doing is to use a name space prefix if we define prototypes. By convention, name spaces are not used in the object props. ...

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.

Here’s a quick and more readable way to initialize objects from other variables. But, first - how do you normally define objects? const nums = {}; I mean.. initialize objects - from other variables. let x = 2; let y = 4; const nums = { x: x, y: y }; console.log(nums); // { x: 2, y: 4 } You can do the same without using named variables if you like. let x = 2, y = 4; const nums = { x, y }; console.log(nums); // { x: 2, y: 4 } The same holds true for more complex objects as well. ...