Showing Posts From

Javascript

Eric Stanley
06 Sep, 2020

Short circuit in javascript

Short circuit is an interesting concept in JavaScript where we make JavaScript to evaluate a typically unorthodox condition to human eye but make total sense to JavaScript typing engine So what do I mean my unorthodox anyway? Let’s take an if statement for example if (condition) { // do something if true } else { // do something else }If you look at the above statement from a layman perspective, he/she could still understand what the code does just by knowing a little english!! What that also means is that the code you see is as per the books and that’s how anyone teaches to code The above code can also be written using ternary operators like below (condition) ? // do something if true : // do something if falseHowever, the reason why ternary operator code is not traditional is because it does not have any keywords in it. Anyone could still understand the above syntax, but when it’s implemented in actual code like (a === b) ? x = y : x = zIt’s kinda hard for a newbie to understand what the code actually means or how it works. More about ternary operators hereNow, why am I taking about if statements and ternary operators when the heading says Short circuit in JavaScript!It’s because though there is no performance improvement by using ternary operators instead of traditional if else, it’s a little less to write. And if that makes you insane, get ready for obsession Short circuiting in JavaScript is all about how you play around logical operators with falsy and truthy values Before we move any further, let’s understand what falsy and truthy values areAny value that is considered false when expressed in boolean context is falsy. The value that I’m referring here could be anything. It could be a variable, array, object, condition, etc.Ok, so a boolean variable can be assigned a value of false and it becomes falsy. But how can I assign a value of false to an array. An array can be empty or undefined but definitely not false. That would make no sense! Good news is, JavaScript has some predefined values that are considered falsy The falsy values in JavaScript arethe number 0 the BigInt 0n the keyword null the keyword undefined the boolean false the number NaN the empty string "" (equivalent to '')The above values evaluate to false when coerced by JavaScript’s typing engine into a boolean value, but they are not necessarily equal to each other. And what are truthy values then? Everything else except falsy is truthy. Simple ❇️ Fun time!! Let’s start with an example again. Consider the following if statement if (condition) { // do something if true }If we use the ternary expression, the above if statement can be written as condition ? // do something if true : nullIf you notice closely, you might see that there is an unnecessary else condition in the ternary expression which basically does nothing. The problem is you can’t neglect it. A ternary expression should always have something to do for both true and false conditions which makes ternary expression not an optimal choice when there’s only if and no else Now, how can we rewrite this to make it smaller Time to get obsessed (condition) && // do something if trueLike I said, it’s basically how we play around with logical operators Before we dive into how the code works, it’s necessary understand how logical operators work. It works from left to right and short circuits What do I mean by short circuit here? When JavaScript evaluates an AND (&&) expression, if the first operand is false, JavaScript will short circuit and will not even look at what’s next in lineRemember, the logical AND returns true only if all conditions match. In other words, in a given sequence of conditions with logical AND operators will complete its execution successfully only if all conditions are true. The moment any of the condition is false, it just doesn’t matter whether or not the remaining conditions are true. The end result is gonna be falseSimply put, all conditions that comes after the false condition is not gonna affect the result. And if the result is clear even before evaluating all the conditions, it short circuits!It’s the same principle, JavaScript just short circuits once it encounters a false value and just ignores the remaining conditions and returns to the next line of code Before I close let’s just see a real example with logical AND (&&) and logical OR (||) let a, b, xa = 1 // b = undefined x = 'I am the default value'console.log(a && x) // prints 'I am the default value', since a is true console.log(b && x) // prints undefined, since b is false (short circuits and anything after false is not executed)console.log(a || x) // prints 1, since a is true (short circuits and anything after true is not executed) console.log(b || x) // prints 'I am the default value', since b is falseThat’s my best explanation of what short circuit is in JavaScript After all, no one said a bread board logic would NOT be helpful someday in the programming world 🙂

Eric Stanley
30 Dec, 2019

JavaScript: Array Manipulation

JavaScript offers different ways to manipulate arrays. However, there are methods that changes the original array and other methods that don’t. The methods that changes original array is called MUTATION. Let’s take a look at most common methods to manipulate arrays in JavaScript Now, that we know that there are methods that mutates the original array, it’s considered best practice to assign the array to const, if you know that the array that you use is not going to get mutated. It’s wise to use let otherwise. It is not a mandate that you need to use const to declare an array that will not be mutated, however, it’s easy for your colleague to understand that the array which is declared as const is not going to get changed anywhere in the code; which is why it’s considered best practice As usual, if you wanna try the examples in this post, I recommend codepen.io, but you are free to make your own choice. The most common interactions that we usually have with arrays areAdd item to array Remove item from array Update and item in the arrayAll the above mentioned actions can be done by both mutating and non-mutating methods. Instead of explaining each of the methods subjectively, I felt it would be better understood with a table. Here we go! testArray: [a, b, c, d, e, f, g, h, i];Code Original Array Processed Array Returned Val Is Mutated Action MethodtestArray.push('j') [a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i,j] 10 true add push()testArray.unshift('z') [a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] 11 true add unshift()testArray.concat('k') [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j,k] false add concat()['y', ...testArray, 'l'] [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i,j] [y,z,a,b,c,d,e,f,g,h,i,j,l] false add ...testArray.pop() [z,a,b,c,d,e,f,g,h,i,j] [z,a,b,c,d,e,f,g,h,i] j true remove pop()testArray.shift() [z,a,b,c,d,e,f,g,h,i] [a,b,c,d,e,f,g,h,i] z true remove shift()testArray.splice(0, 2) [a,b,c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [a,b] true remove splice()testArray.filter(a => a!== 'c') [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h,i] false remove filter()testArray.slice(1, 6) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [d,e,f,g,h] false remove slice()testArray.slice(2) [c,d,e,f,g,h,i] [c,d,e,f,g,h,i] [e,f,g,h,i] false remove slice()testArray.splice(2, 1,30, 31) [c,d,e,f,g,h,i] [c,d,30,31,f,g,h,i] [e] true update splice()testArray.map(x => x ==='d' ? 29 : x) [c,d,30,31,f,g,h,i] [c,d,30,31,f,g,h,i] [c,29,30,31,f,g,h,i] false update map()I hope the above table is self-explanatory, however if you need to check the values of the testArray with real code, feel free to visit programmatic output where the exact same table is derived programmatically. Codepen pin link

Higher order functions

I recently started learning JavaScript and I tumbled upon a concept called Higher Order Functions (HOF). There are quite a lot of documents in the internet that explains what an HOF is, and here is my thought. Before explaining what an HOF is, let’s see how a function looks like in JavaScript. Functions in JavaScript is not different from functions in any other programming languages, which means, I assume that you kinda know how a function generally looks like. Below is a function snippet in JavaScript. function myTestFunction() { alert("Thanks for clicking") }Now, that we know how a function looks like in JavaScript, let’s continue on knowing what HOF is and how is it different from a normal function. HOF is a concept in JavaScript where a function (say x) is passed as an argument to another function (say y) OR the calling function (say z) returns a function (say x) after execution Let’s take the above function for example (#1), and pass it into another function document.addEventListener("click", myTestFunction) function myTestFunction() { alert("Thanks for clicking") }Now, document.addEventListener is called whenever an event in the first parameter is triggered in the document, and the second parameter is a function that gets executed whenever the event is triggered In other words, the above function can also be written as document.addEventListener("click", function myTestFunction() { alert("Thanks for clicking") })And this works perfectly fine. So, if this works perfectly fine, why would I need to write another function and call it within the addEventListener instead of writing directly within the listener. The answer is, the function can be reused now, if it’s outside the listener. Kinda makes sense? Let’s take another step and look at another example (#2) which is a little more complex. function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)document.write(doubleMe(45) + " ") document.write(tripleMe(45) + " ") document.write(quadrupleMe(45) + " ")As you can see, the createMultiplier function returns a function here which can be used in different places. Let’s take a look at how the code looks without HOF function multiply(x, multiplier) { return x * multiplier }let doubleMe = multiply(45, 2) let tripleMe = multiply(45, 3) let quadrupleMe = multiply(45, 4)document.write(doubleMe + " ") document.write(tripleMe + " ") document.write(quadrupleMe + " ")Looks like, the code without HOF is still less number of lines and effective too! Until now, even I was not sure about the use of HOF. But let’s take 1 more step from here. Let’s parameterize the multiplier (#3) With HOF function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)for (i = 0; i < nums.length; i++) { document.write(doubleMe(nums[i]) + " ") document.write(tripleMe(nums[i]) + " ") document.write(quadrupleMe(nums[i]) + " ") }Without HOF function multiply(x, multiplier) { return x * multiplier }let nums = [41, 42, 43, 44, 45, 46]for (i = 0; i < nums.length; i++) { let doubleMe = multiply(nums[i], 2) let tripleMe = multiply(nums[i], 3) let quadrupleMe = multiply(nums[i], 4) document.write(doubleMe + " ") document.write(tripleMe + " ") document.write(quadrupleMe + " ") }As you can see, the numbers 2, 3 and 4 are constants and we are not making any changes to those parameters within the loop. However, we cannot move them outside of the for loop since the resultant value is dependent on this constant. Whereas, in the code with HOF, we have moved the constants successfully outside of the loop. Now, why do we do that? Does it impact the performance? The answer in this case is, the code looks a little bit neat and NO it does not affect the performance. Here’s another example of HOF in JavaScript let myColors = ["red", "orange", "yellow", "green"] myColors.forEach(saySomethingNice) function saySomethingNice(color) { document.write("The color " + color + " is a great color. ") }The forEach method in the array object automatically loops thro’ every element in the array without using a loop, which means less code to do the same work. The code in example #3 looks like this now! function createMultiplier(multiplier) { return function(x) { return x * multiplier } }let nums = [41, 42, 43, 44, 45, 46]let doubleMe = createMultiplier(2) let tripleMe = createMultiplier(3) let quadrupleMe = createMultiplier(4)nums.forEach(num => { document.write(doubleMe(num) + " ") document.write(tripleMe(num) + " ") document.write(quadrupleMe(num) + " ") })In my personal terms, if you are a novice JS developer and if you copy and paste a code in JavaScript which you feel that it’s hard to understand, but still works the way you wanted it to, you are probably looking into a HOF. That’s my personal view of HOF though! Ending Note: The latest JavaScript ES6 standard, has tackled a lot of limitations that the ES5 standard had, and HOF is one of those.

Eric Stanley
21 Aug, 2019

Ternary Operators

The ternary operator is basically another way to implement the if-else statement. Now, if it’s just another way to implement the if-else statement, why can’t I use the same old if-else? Why would I need to take up something extra which I don’t need right now? As for any new change, the answer to the above question is simple. Kinda hard, but it’s worth it. It’s not absolutely necessary to learn it, as you can do anything and everything without it. However, considering the constant evolution of technology, it’s better to learn new things while we still can! After all, learning new things is always interesting. Let me put this straight. This post is not to blame on the good old if-else statement. If you are not clear on the if-else statement, I would recommend you to google it before you proceed further. Before we get into what a ternary operator is, let’s get a quick bite on what an operator and operand is, and different kinds of operators in general Operator: These are the symbols that we use in our calculations. Ex: + - / = * % Operand: These are the variables or constants the are being used with the operator for calculations There are 3 different types of operatorsOperator DescriptionUnary Operators Requires one operand. Ex: a++Binary Operators Requires two operands. Ex: a+bTernary Operators Ternary Operators: Requires three operands Ex: c ? a : bLet’s start with a simple example as usual. A typical if statement looks like below if (latitude > 0) { return 'summer' } else { return 'winter' }Let’s put the above statement in a function, so that we can see the actual working result function getSeason(latitude) { if (latitude > 0) { return 'summer' } else { return 'winter' } }document.write(getSeason(10))If you want to see how the above code works, I would recommend codepen.io, however if you already know how this works; or, you already are part of another online code editor community, good for you 🙂Moving on, the getSeason function takes one argument which is the latitude and returns a season string based on the latitude. Ternary operators are all about reducing the number of lines of code. So, before implementing the ternary operator, let’s see if we can reduce the number of lines without it. If the if-else statement has only one line of code to be executed, then the {} is actually not necessary. The above code can be written as function getSeason(latitude) { if (latitude > 0) return 'summer' else return 'winter' }document.write(getSeason(10))Not much of code reduction here, but the point is, you can avoid the {} in case of one statement within the if-else block Note: Anything more than one statement within the if-else would require the {} Time to implement ternary operator in our above example. function getSeason(latitude) { return latitude > 0 ? 'summer' : 'winter' }document.write(getSeason(10))Looks like the code is reduced a lot now, but how about nested if statements. Let’s take a look at a little more complex example by adding another variable called month to derive the season, like below function getSeason(latitude, month) { if (latitude > 0) { if (month >= 1 && month <=6) { return 'summer' } else { return 'winter' } } else { if (month >= 1 && month <=6) { return 'winter' } else { return 'summer' } } }document.write(getSeason(10, 5))As you can see, the code is a lot more complicated and the number of lines has significantly increased this time. Good news, is the ternary operator can be nested too. The above example can also be written as function getSeason(latitude, month) { return latitude > 0 ? (month >= 1 && month <=6) ? 'summer' : 'winter' : (month >= 1 && month <=6) ? 'winter' : 'summer' }document.write(getSeason(10, 5))Now, all the code in the nested if-else example can be written just in one single line. On a side note, we can get the current month and current latitude programmatically. The final code now looks like below function getSeason(latitude, month) { return latitude > 0 ? (month >= 1 && month <=6) ? 'summer' : 'winter' : (month >= 1 && month <=6) ? 'winter' : 'summer' }new Promise((res, rej) => navigator.geolocation.getCurrentPosition(res, rej)).then(pos => document.write(getSeason(pos.coords.latitude, (new Date().getMonth()+1))))Make sure to click on Allow when you get the prompt for requesting access to location. Now what is the new statement that I have written to extract the current month and latitude? Well, that is to be discussed in another post! Stay tuned!