Date:

Share:

8 JavaScript Tips & Tricks That No One Teaches 🚀

Related Articles

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

so lets start

Functional inheritance

The practice of obtaining attributes by applying a magnification function to an object instance is known as a functional inheritance. You can use the scope of the closure provided by the function to maintain certain privacy of data. The enhancement function uses dynamic object expansion 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"

.from here() replacement

.map() There is also a substitute we can use that 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 number

Typically, 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 encode fast is:

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

Use length to Resize and empty array

In javascript, we can bypass 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 to empty an array, such as:

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); 
// []

Replace values ​​with Array destruction

God Syntax Allocation of the structure 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 change values, as 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 created an array with integers, strings and booleans, but the values ​​repeat themselves, and I want 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);

Performence

In JS you can also get the time the code was activated as 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 so much for reading this article. Comment on all the tricks and tips you know!

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles