8 JavaScript tips and tricks for old drivers

JavaScript is undoubtedly one of the coolest languages ​​in the world, and it is becoming more and more popular. So the developer community discovered some tips and tricks after using JS for a while. Today I will share 8 tips and tricks with you!

1. Function inheritance

Function inheritance is the process of receiving features by applying extended functions to object instances. This function provides a closure scope, you can use it to protect the privacy of certain data. Extensions use dynamic object extensions to extend object instances with new properties and methods

// 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"

2. .map() instead

.map() There is another alternative that we can use, it 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”]

3. Number and string conversion

Number to string

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

Convert string to number

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

Fast conversion

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

4. Use length adjustment and empty array

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

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]

Empty array

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

5. Exchange values ​​with array destructuring

The destructuring assignment syntax is a JavaScript expression, which makes it possible to decompress the value from the array, or from the attribute of the object, to different variables. We can also use it to quickly exchange values ​​as shown below

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

6. Remove duplicates from the array

This technique is very simple. For example, I created an array containing numbers, strings, and Boolean values, but these values ​​are repeated more than once, and I want to delete 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"]

7. Short For Loop

You can write less code for such loops

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

8. Performance

In JS, you can also get the code execution time like Google

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