DEV Community

loading...
Cover image for 8 JavaScript Tips & Tricks That No One Teaches 🚀 + Giveaway

8 JavaScript Tips & Tricks That No One Teaches 🚀 + Giveaway

garvitmotwani profile image Garvit Motwani Updated on ・4 min read

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 11 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"
Enter fullscreen mode Exit fullscreen mode

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”]
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

let num = "4"
let stringNumber = Number(num);
Enter fullscreen mode Exit fullscreen mode

but what we can use to code fast is:

let num = 15;
let numString = num + ""; // number to string
let stringNum = +s; // string to number
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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); 
// []
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Performance

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

google example

It looks like this:

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

⚡️ 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


You Should also check

by my friend @devlorenzo

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

Discussion (78)

pic
Editor guide
Collapse
devtalhaakbar profile image
Muhammad Talha Akbar • Edited

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.

Collapse
ztratify profile image
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 :)

Collapse
arealsamurai profile image
An actual, Real Samurai • Edited

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

Thread Thread
killshot13 profile image
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)
Enter fullscreen mode Exit fullscreen mode

OR

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

🤔🤔🤔

Thread Thread
arealsamurai profile image
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.

Collapse
garvitmotwani profile image
Garvit Motwani Author

Noted! and thanks for reading the article!

Collapse
mzzfederico profile image
Federico Muzzo • Edited

I honestly think that .map is a lot easier to wrap your head around, specially when learnt together with the other methods to iterate on arrays.

Array.from is notable for its intended use of making Array-like data iterable with array methods, such as strings. Lots of people try to use array methods on strings without realizing they're not the same or even related (though some methods are similar).

Collapse
peerreynders profile image
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);
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
mzzfederico profile image
Federico Muzzo

Hmm sweet trick... :)

Collapse
lkarabeg profile image
lkarabeg

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

Thread Thread
peerreynders profile image
peerreynders

With

const array = (new Array(length)).fill().map(init);
Enter fullscreen mode Exit fullscreen mode

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;
});
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

... but that's just me.

Collapse
garvitmotwani profile image
Garvit Motwani Author

It varies from person to person like you like it but I personally find it sometimes complicated so I listed it in but thanks for the suggestion!!

Collapse
sonterix profile image
Nick • Edited

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

const num = 32
const str = `${32}`
Enter fullscreen mode Exit fullscreen mode
Collapse
aalencar profile image
Alexandre Alencar

or

num + ''

Collapse
sonterix profile image
Nick

This method described in the article :/

Collapse
garvitmotwani profile image
Garvit Motwani Author

That is interesting and thanks for sharing!!

Collapse
ztratify profile image
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
Enter fullscreen mode Exit fullscreen mode

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

Collapse
parkgateio profile image
Christopher Bathgate

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

Collapse
garvitmotwani profile image
Garvit Motwani Author

Thanks for sharing! 🙏🙏

Collapse
ychanov profile image
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);?

Collapse
garvitmotwani profile image
Garvit Motwani Author

Welcome and Noted!!

Collapse
yobretyo profile image
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

Collapse
killshot13 profile image
Michael R.

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

Collapse
vicropht profile image
Vicropht

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

Collapse
garvitmotwani profile image
Collapse
lmorchard profile image
Les Orchard • Edited

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
)
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
g0d profile image
George Delaportas (ViR4X)

G R E A T work...

There are also many other great tricks you can do to optimize code, add quality and also provide C#-like or JAVA-like paradigms to JavaScript.

Check my web framework and especially the JS extensions for more cool ideas.

github.com/g0d/micro-MVC
github.com/g0d/micro-MVC/tree/mast...

Collapse
crimsonmed profile image
Médéric Burlet

for performance you use dates but since you are using console.log you could use console.time()

console.time("track");
// do stuff
console.timeEnd("track")
Enter fullscreen mode Exit fullscreen mode
Collapse
macnick profile image
Nick Haralampopoulos

Nice article Garvit! I usually use the .map() substitute when creating arrays with pre-filled values. One little mistake though. array.length is a property in JavaScript not a method. It is a method in Java, C++ and others but not in JavaScript.
developer.mozilla.org/en-US/docs/W...
Thank you again for the nice article.

Collapse
rohitw3code profile image
RohitW3code

Very nice , I have a request for you can you publish you articles on our Codeddit Programmer Community it would be a great help to everyone on Codeddit app platform.
play.google.com/store/apps/details...

Collapse
kasia99472765 profile image
Kasia

it`s ok

Collapse
mliakos profile image
Emmanouil Liakos

Another nice tip is that arrays passed to template literals get coerced to comma-separated strings like this:

const fruits = ['apples', 'oranges'];
console.log(${fruits}); // 'apples,oranges'

Collapse
cubiclesocial profile image
cubiclesocial

We can also use that to swap values fast

Swapping variables with an array isn't going to be faster (performance-wise) than just swapping the variables with the traditional method of using a temporary variable.

stackoverflow.com/questions/162016...

One of the first comments on using a temporary array is that it is roughly two times slower than a variable swap.

Javascript processes most accesses by reference. So assigning to a temporary variable doesn't copy anything but a memory address. Creating an array, on the other hand, is almost certainly going to: Hit the memory allocation pool, add two variables to the array, update the length of the array (for no good reason), then immediately extract them back out of the array, and release the array back into the memory pool. Without even having to test that, the former is obviously faster than the latter. Swapping vars happens often in software, and usually in a loop, so writing performant code vs. one-liners is more important here.

Collapse
geminii profile image
Jimmy

Really nice tips.
Question : what is the best option between using performance.now() and console.time() 🤔

Collapse
sebring profile image
J. G. Sebring

console.time will be limited to output in console, hence it is more suitable for temporary debugging/test situations.

Any other cases I'd use performance.now, like displaying time in html, sending to backend etc.

Collapse
geminii profile image
Jimmy

Good to know thanks for this tip 😀👍

Collapse
garvitmotwani profile image
Garvit Motwani Author

I usually use performance.now() so I would recommend that but console.time() is also good!!

Collapse
pinkra profile image
Giovanni Bezicheri

Thanks for the article! Anyway some of those are just tricks that could sacrifice code readibility :)

Collapse
garvitmotwani profile image
Garvit Motwani Author

Ya some of them! Thanks for reading tho!

Collapse
bacchusplateau profile image
Bret Williams

Removing duplicates is a good trick. I'll put that one in my back pocket for later.

Collapse
garvitmotwani profile image
Garvit Motwani Author

Yep! Thanks For Reading the article🙏

Collapse
jpotts7 profile image
jpotts7

Great tips - thanks for sharing!

Collapse
garvitmotwani profile image
Garvit Motwani Author

Welcome bro!!

Collapse
jasonf profile image
Jason F

Great article. I'm particularly fond of the map without map.

Collapse
garvitmotwani profile image
Garvit Motwani Author

Ya I use that at often nowadays

Collapse
thangdangblog profile image
thangdangblog

Thank you for sharing! Your post helps me improve my skills in Javascript!

Collapse
iqseviyesi profile image
IQ Seviyesi

Perfect tricks :)

Collapse
buriti97 profile image
buridev

awesome bro, thanks for sharing

Collapse
garvitmotwani profile image
Garvit Motwani Author

Welcome Bro!! 🙏

Collapse
filatovv profile image
Yuri Filatov

This is an amazing job!

Collapse
tryhendri profile image
tryhendri

Thanks for sharing Garvit
It seems a typo on Map an array without .map(), it should return dogsNames rather than friendsNames.

Collapse
garvitmotwani profile image
Garvit Motwani Author

Noted! Thanks!

Some comments have been hidden by the post's author - find out more