8 JavaScript Tips & Tricks That No One Teaches

JavaScript is without a doubt one of the coolest languages in the world, and its popularity is growing by the day. After using JS for a while, the developer community has discovered a few tricks and tips. I’m going to share 8 tips and tricks with you today!

So let’s get started

Functional Inheritance

The practice of receiving features by applying an augmenting function to an object instance is known as functional inheritance. You can use the closure scope provided by the function to keep some data private. The enhancing function employs dynamic object extension to add additional properties and methods to the object instance.

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"

.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 empty 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 allows you to extract values from arrays or properties from objects and store them in separate variables. We can also use it to quickly swap values, like in:

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 is a very basic trick. Let’s imagine I’ve created an array with integers, strings, and booleans, but the values are repeating themselves, and I’d like to get rid of the duplicates. So here’s what I can do:

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.`);

Thank you very much for reading this article. Comment any tricks & tips you know!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *