8 JavaScript Tips & Tricks That No One Teaches 🚀

JavaScript is no doubt one of the coolest languages in the world and is gaining more and more popularity day by day. So the developer community has found some tricks and tips after using JS for quite a while now. Today I will share 8 Tips & Tricks With You!

So let's get started

Functional Inheritance

Functional inheritance is the process of receiving features by applying an augmenting function to an object instance. The function supplies a closure scope which you can use to keep some data private. The augmenting function uses dynamic object extension to extend the object instance with new properties and methods.

They look like:

// Base function
function Drinks(data) {
  var that = {}; // Create an empty object
  that.name = data.name; // Add it a "name" property
  return that; // Return the object
};

// Fuction which inherits from the base function
function Coffee(data) {
  // Create the Drinks object
  var that = Drinks(data);
  // Extend base object
  that.giveName = function() {
    return 'This is ' + that.name;
  };
  return that;
};

// Usage
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Output: "This is Cappuccino"

Credits to @loverajoel for explaining this topic in depth here - Functional Inheritance on JS Tips which I've paraphrased above

.map() Substitute

.map() also has a substitute that we can use which is .from():

let dogs = [
    { name: ‘Rio’, age: 2 },
    { name: ‘Mac’, age: 3 },
    { name: ‘Bruno’, age: 5 },
    { name: ‘Jucas’, age: 10 },
    { name: ‘Furr’, age: 8 },
    { name: ‘Blu’, age: 7 },
]


let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames); // returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

Number to string/string to number

Usually, to convert a string to a number, we use something like this:

let num = 4
let newNum = num.toString();

and to convert a string to a number, we use:

let num = "4"
let stringNumber = Number(num);

but what we can use to code fast is:

let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number

Using length to resize and emptying an array

In javascript, we can override a built-in method called length and assign it a value of our choice.

Let's look at an example:

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8  
array_values.length = 5;  
console.log(array_values.length); 
// 5  
console.log(array_values); 
// [1, 2, 3, 4, 5]

It can also be used in emptying an array, like this:

let array_values = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8  
array_values.length = 0;   
console.log(array_values.length); 
// 0 
console.log(array_values); 
// []

Swap Values with Array Destructuring.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. We can also use that to swap values fast, like this:

let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // result -> 2
console.log(b) // result -> 1

Remove duplicates from an Array

This trick is pretty simple. Let's say, I made an array that is containing numbers, strings, and booleans, but the values are repeating themselves more than once and I want to remove the duplicates. So what I can do is:

const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

Short For Loop

You can write less code for a loop like this:

const names = ["Kio", "Rio", "Mac"];

// Long Version
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// Short Version
for (let name of names) console.log(name);

Performance

In JS you can also get the time that the code was executed in like Google does:

It looks like this:

const firstTime = performance.now();
something();
const secondTime = performance.now();
console.log(`The something function took ${secondTime - firstTime} milliseconds.`);

⚡️ Giveaway ⚡️

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

---

Thank you very much for reading this article.

Comment any tricks & tips you know!

PLEASE LIKE, SHARE, AND COMMENT

Follow me on Dev and Twitter

Comments

[Muhammad Talha Akbar]

Great, Garvit! It's always great to know the language so well and bring about these unconventional ways to solve problems. However, it's always recommended to write code that is self-explanatory. And, I find majority of these tricks to be confusing (to an average eye). Use them when you really have to and leave a comment to make your intention clear.

[Strat Barrett]

On that note – which I completely agree with – it's interesting how readable this is Array.from(dogs) compared to dogs.map() if map wasn't so widely adopted :)

[An actual, Real Samurai]

On that note, I'd love to see how performant Array.from() is compared to .map() that I know doesn't perform very well

[Michael R.]

Now you've inspired a more ambitious project. Building a custom standalone performance measurement tool for Javascript.

It could be something similar to Runkit, but strictly for benchmarking the various methods and approaches to the same end goal. Like which is faster?

capsLockNames = names.map(capitalize)

OR

capsLockNames= []
for x = 0; x < names.length; x++
  capsLockNames[x] = capitalize(names[x]))

🤔🤔🤔

[An actual, Real Samurai]

I can tell you for sure that the for loop is way more performant than map. But if you do compare everything, I'm definitely interested to read.

[Garvit Motwani]

Noted! and thanks for reading the article!

[David Sanwald]

Map an array without .map()

Pick one. You can't say one is difficult and complicated and nobody will understand it.
And the other one is surprising, rarely taught or known but way easier to understand?

[Garvit Motwani]

Actually, I really like that method and it is way easier than .map(), that's why I recommended that, but noted! Thanks for reading the article

[Nick Morton]

Please explain how your method is "way easier than .map()"?

I just don't understand your thinking here, the concepts are exactly the same, the syntax is almost exactly the same (actually longer), and you're introducing a somewhat unfamiliar syntax to most to achieve something that everyone likely understands already with .map().

[shadowtime2000]

8 JavaScript Tips & Tricks That No One Teaches 🚀

This title makes it seem like these are tips and tricks worthwhile to use that are not that popular but extremely useful.

Most of these tips are actually well known among JS developers and aren't ones "That No One Teaches", such as the performance tip, the short for loop, using sets to remove duplicates from arrays, and swapping values with destructuring. The only ones that aren't as known are the first couple, which don't seem to be that useful.

Sorry, if that sounds rude because that isn't my intention. I am just trying to point out that most of these tips are either well known or not useful and the title is pretty misleading then.

[johannchopin]

You're right and I like your avatar👍

[Garvit Motwani]

Thanks! I don’t remember how I created that

[Garvit Motwani]

Noted

[Nick]

Also, u can convert number to string in this way:

const num = 32
const str = `${32}`

[Garvit Motwani]

That is interesting and thanks for sharing!!

[Alex Alencar]

or

num + ''

[Nick]

This method described in the article :/

[Vladimir C]

I believe you meant

const str = `${num}`

[peerreynders]

Array.from is notable for its intended use of making Array-like data iterable with array methods, such as strings.

There's another case where it is extremely handy - creating a fresh array with elements initialized from a function.

const init = (_value, index) => (index + 1) * 3;
const length = 4;
const array = Array.from({ length }, init); // [3, 6, 9, 12]
for (let i = 0; i < length; i += 1) console.assert(array[i] === (i + 1) * 3);

The issue with Array.prototype.fill() is that:

• it requires an existing array (to modify)
• it only places a single constant value into all the elements it replaces.

And Array.prototype.map() requires an already initialized array.

With Array.from() an array can be created and initialized with element content that varies by index in one fell swoop.

[lkarabeg]

I kind of disagree, finding map much more readable.
Array.from({length: 4}).map((_value, index) => (index + 1) * 3)

[peerreynders]

With

const array = (new Array(length)).fill().map(init);

it always ground my gears that to arrive at the desired array another disposable array had to be created and "filled" just to convey that I want length elements. And

const array = (new Array(length)).fill();
array.forEach((_v, i, a) => {
  a[i] = (i + 1) * 3;
});

was clunky enough to make me want to use a for loop.

So if I'm are already using Array.from() I might as well use the optional mapFn and thisArg parameters.

function init(_value, index) {
  return (index + 1) * this.factor;
}

const config = { length: 4 };
const two = { factor: 2 };
const three = { factor: 3 };
const array2 = Array.from(config, init, two);
const array3 = Array.from(config, init, three);

const checkArray = (expected, actual) => {
  const actualMatches = (value, index) => value === actual[index];
  console.assert(
    expected.length === actual.length && expected.every(actualMatches),
    'array mismatch - expected: %o actual: %o',
    expected,
    actual
  );
};
const TWOS = [2, 4, 6, 8];
const THREES = [3, 6, 9, 12];
checkArray(TWOS, array2);
checkArray(THREES, array3);

... but that's just me.

[Les Orchard]

I'd say that Array.from() isn't the most handy as a substitute for Array.map(). Rather, it's handy for transforming iterables that aren't already arrays.

Like, to get the names of commenters on this page, try this in the dev tools console:

Array.from(
  document.querySelectorAll('.js-comment-username'),
  el => el.textContent
)

The NodeList returned from document.querySelectorAll isn't an array, but this lets you convert it to an array while performing a transformation at the same time.

[Bret]

The problem with JavaScript is that.... it’s not taught “in context”, it’s mainly always a “console.log” that is used for the answer, instead of truly implementing it into real examples.... it’s been tough for me to learn it

[Michael R.]

Liquid syntax error: Tag '{%' was not properly terminated with regexp: /\%\}/

[Vicropht]

Make projects to learn it! Helps a lot!!!

[Garvit Motwani]

Ya

[Strat Barrett]

I'm a big fan of !! which gets the boolean value of (pretty much) anything:

let truthiness = !!12       //=> true
let truthiness = !!0        //=> false
let truthiness = !!'string' //=> true
let truthiness = !!''       //=> false
// BUT LOOK OUT FOR OBJECTS... 👀
let truthiness = !![]       //=> true
let truthiness = !!{}       //=> true

! is the opposite so !! becomes the boolean value !! 😄

[Chris]

The Boolean() constructor is another great way to interpret falsey values.

[Garvit Motwani]

Thanks for sharing! 🙏🙏

[Yavor Chanov]

Hi, thanks for the article.
I think there is a small mistake in the "Number to string/string to number" part...
The example for converting string to number is:
let num = "4"
let stringNumber = Number(s); //doesn't that have to be Number(num);?

[Garvit Motwani]

Welcome and Noted!!

[Danny Engelman]

Interesting to learn that:

let dogsNames = Array.from(dogs, ({name}) => name);

is not as complicated as:

let dogsNames = dogs.map( ({name}) => name );

BUT..
the documentation says the y parameter in Array.from(x,y,z) IS a mapFn
So yes, you do not type those 3 letters... but you still have to understand you are mapping an Array.

Since you mention the Performance API; this gives a very interesting result:

let dogs = [
    { name: "Rio" , age: 2 },
    { name: "Mac", age: 3 },
    { name: "Bruno", age: 5 },
    { name: "Jucas", age: 10 },
    { name: "Furr", age: 8 },
    { name: "Blu", age: 7 },
];

function performance(method) {
  const firstTime = performance.now();
  let dogsNames;
  for (let i = 0; i < 10000; i++) {
    if (method == 1) {
      dogsNames = Array.from(dogs, ({name}) => name);
    } else {
      dogsNames = dogs.map(({name}) => name);
    }
  }
  const secondTime = performance.now();
  console.log(`The something function took ${secondTime - firstTime} milliseconds.`);
}
performance(1);
performance(2);