tag: Javascript

Operator precedence includes unary, increment, basic arithmetic, logical and assignment operators - roughly in that order. The precedence can be remembered by BEUDMASLAS. brackets exponent unary & prefixed increment / decrement division multiplication addition subtraction logical assignment suffixed increment / decrement Not quite exciting as BODMAS or PEDMAS (math, anyone?) and as it turns out - you would not even have to remember it :). An outline with examples is below. ...

New operator is used to initialize objects and create a new instance of the object. You would have seen new used in the object context in an earlier post. The usage is something like the below - let worldExists = new Boolean(false); console.log(worldExists); // [Boolean: false] worldExists is an object that has a value of type ‘boolean’. Refer the post linked above to know the difference. Since everything (almost) is an object, new works very similarly in its use cases. ...

Rest parameter enables you to signify an ‘infinite’ parameter to a function. ... serves two purposes in Javascript - Spread operator - know what spread operators can do Rest parameter for a function Rest parameter just tells Javscript that there can be zero or infinite parameters for the function. The elements are available as an array within the function. const getSum = (...nums) => { console.log(nums); // [ 2, 3, 6 ] }; getSum(2, 3, 6); Or, you could do partial parameters.. ...

assign method of an object allows us to merge two objects quickly. const name = { name: "earth" }; const position = { position: 3 }; const planets = Object.assign(name, position); console.log("planets: ", planets); // { name: 'earth', position: 3 } You can also use Object.assign to quickly copy objects. const third = { name: "earth", position: 3 }; const livePlanet = Object.assign({}, third); console.log("livePlanet: ", livePlanet); third.position = 3.14; console.log("third: ", third); // { name: 'earth', position: 3.14 } console.log("livePlanet: ", livePlanet); // { name: 'earth', position: 3 } If you do not provide the empty object to assign, only a reference is copied and not the object itself.

Property descriptors define property behaviour. They are attributes of the property. Everything is an object in Javascript. Yes, I know - except those pesky things called primitives on which objects are built. We saw some (quick discussions on objects and properties)[/objects-and-props-in-javascript/] before - but I wanted to outline the descriptors further. You can see it yourself using a simple statement. let apple = { color: "red", size: "big" }; console.log(Object.getOwnPropertyDescriptor(apple, "color")); // { value: 'red', writable: true, enumerable: true, configurable: true } This is telling me what I could potentially do with color property other than seeing the value. ...

Currying is a technique of splitting functions with one or more arguments into a sequence of functions that are invokable with predefined arguments. In other words, you can split fn (a,b,c) into fn(a)(b)(c). That was not quite helpful - let us see an example. let getSquared = (x, y) => { return x * y; }; let getSquared = getProduct.curry(2); console.log(getDouble(3)); // 9 Before you rush to your editor to introduce this in your project know this - it may not work as-is in your JS installation. Either you need to install a package that supports currying or write one yourself. ...

Did you know how to use comma operator in Javascript? A simple , can separate expressions in the same statement, evaluate left-to-right in the expression, pick the right most valid value as the result, and confuse other developers - all within the blink of an eye. We have discussed about operators when discussing operator precedence. But the no. of uncommon operators are more than the typical bunch. Oh, and btw, comma has the lowest precedence amongst all operators. ...

typeof is useful but has inherent issues. There are gaps between what a developer expects in terms of consistency and what typeof delivers. Let us look at a few examples - const i = 1; console.log(typeof i); // number typeof is a unary operator, and does not require brackets. If you indeed put the brackets around the input, they just group the input and nothing more. More examples - console.log(typeof (1 + 2)); // number console.log(typeof ""); // string console.log(typeof undefined); // undefined console.log(typeof { fruit: "apple" }); // object console.log(typeof ["apple"]); // object console.log(typeof new Date()); // object console.log(typeof null); // object You may observe that - ...

You must have seen the copyWithin() method for an array, and surely wondered what it can do. copywithin copies elements from one position to another position in the same array. (Just kidding about the wondering thing - no one ‘wonders’ today, they just Google). const fruits = ["apple", "orange", "grapes", "banana"]; fruits.copyWithin(2, 0, 2); // copy 2 ele from [0] to [2] console.log("fruits: ", fruits); // [ 'apple', 'orange', 'apple', 'orange' ] copyWithin has the below syntax. array.copyWithin(target, start, end) It copies the elements from start to end to the target position. ...

Use set and filter to find the difference between two arrays. let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; let difFruits = [...new Set(fruits1)].filter((item) => !fruits2.includes(item)); console.log(difFruits); // [ 'orange', 'grapes' ] Similarly if you want to find the elements common in both arrays, you could employ a slightly different strategy. let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; let commonFruits = [...new Set(fruits1)].filter((item) => fruits2.includes(item) ); console.log(commonFruits); // [ 'apple' ] Traditionally, you would have executed two loops to find differences between arrays. Something like - let fruits1 = ["apple", "orange", "grapes"]; let fruits2 = ["banana", "mango", "apple"]; const difFruits = []; for (fruitOne of fruits1) { let found = false; for (fruitTwo of fruits2) { if (fruitTwo == fruitOne) { found = true; break; } } // fruits2 loop if (!found) difFruits.push(fruitOne); } // fruits1 loop console.log(difFruits); // [ 'orange', 'grapes' ] We live in exciting times for sure.