8 Useful Tips JS

1. Make sure the array of values

Grid use, need to recreate the original data, the length of each row and the column may not match, in order to ensure equal length mismatch between the rows may be used Array.fillmethods.

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]

2. Get an array of unique values

 

ES6 provides unique value extracted from the array of two very simple methods. Unfortunately, they can not handle non-basic types of arrays. In this article, we are focusing on basic data types.

 1 const cars = [
 2     'Mazda', 
 3     'Ford', 
 4     'Renault', 
 5     'Opel', 
 6     'Mazda'
 7 ]
 8 const uniqueWithArrayFrom = Array.from(new Set(cars));
 9 console.log(uniqueWithArrayFrom); // outputs ["Mazda", "Ford", "Renault", "Opel"]
10 
11 const uniqueWithSpreadOperator = [...new Set(cars)];
12 console.log(uniqueWithSpreadOperator);// outputs ["Mazda", "Ford", "Renault", "Opel"]

3. Expand the use and operation in line with the object and an array of objects

 

Object consolidation is a very common thing, we can use the new ES6 features to better, more concise process of merging process.

 1 // merging objects
 2 const product = { name: 'Milk', packaging: 'Plastic', price: '5$' }
 3 const manufacturer = { name: 'Company Name', address: 'The Company Address' }
 4 
 5 const productManufacturer = { ...product, ...manufacturer };
 6 console.log(productManufacturer); 
 7 // outputs { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" }
 8 
 9 // merging an array of objects into one
10 const cities = [
11     { name: 'Paris', visited: 'no' },
12     { name: 'Lyon', visited: 'no' },
13     { name: 'Marseille', visited: 'yes' },
14     { name: 'Rome', visited: 'yes' },
15     { name: 'Milan', visited: 'no' },
16     { name: 'Palermo', visited: 'yes' },
17     { name: 'Genoa', visited: 'yes' },
18     { name: 'Berlin', visited: 'no' },
19     { name: 'Hamburg', visited: 'yes' },
20     { name: 'New York', visited: 'yes' }
21 ];
22 
23 const result = cities.reduce((accumulator, item) => {
24   return {
25     ...accumulator,
26     [item.name]: item.visited
27   }
28 }, {});
29 
30 console.log(result);
31 /* outputs
32 Berlin: "no"
33 Genoa: "yes"
34 Hamburg: "yes"
35 Lyon: "no"
36 Marseille: "yes"
37 Milan: "no"
38 New York: "yes"
39 Palermo: "yes"
40 Paris: "no"
41 Rome: "yes"
42 */

4. The method of map array (without using Array.map)

 

Another array map to achieve the way, do not  Array.map.

Array.from can also accept a second parameter, the array acts like mapa method, for each element is processed, the value of the processed returned into the array. as follows:

 1 const cities = [
 2     { name: 'Paris', visited: 'no' },
 3     { name: 'Lyon', visited: 'no' },
 4     { name: 'Marseille', visited: 'yes' },
 5     { name: 'Rome', visited: 'yes' },
 6     { name: 'Milan', visited: 'no' },
 7     { name: 'Palermo', visited: 'yes' },
 8     { name: 'Genoa', visited: 'yes' },
 9     { name: 'Berlin', visited: 'no' },
10     { name: 'Hamburg', visited: 'yes' },
11     { name: 'New York', visited: 'yes' }
12 ];
13 
14 const cityNames = Array.from(cities, ({ name}) => name);
15 console.log(cityNames);
16 // outputs ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

The object attribute conditions

 

No longer need to create two different objects in accordance with a condition may be used to expand the operational sign process.

nst getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...emailIncluded && { email : '[email protected]' }
  }
}

const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "[email protected]" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

6. deconstruction of the original data

 

Sometimes an object contains a lot of property, but we only need a few of them can be used here deconstructed way to extract the properties we need. As a user object as follows:

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: '[email protected]',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
   ...
}

We need to extract the two parts, namely, users and user information, then you can do this:

1 let user = {}, userDetails = {};
2 ({ name: user.name, surname: user.surname, ...userDetails } = rawUser);
3 
4 console.log(user); // outputs { name: "John", surname: "Doe" }
5 console.log(userDetails); // outputs { email: "[email protected]", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }

7. dynamic property name

 

Early on, if the property names need to be dynamic, we must first declare an object, and then assign a property. These days are gone, with the ES6 characteristics, we can do it.

1 const dynamic = 'email';
2 let user = {
3     name: 'John',
4     [dynamic]: '[email protected]'
5 }
6 console.log(user); // outputs { name: "John", email: "[email protected]" }

8. Interpolation string

 

In use case, if you are building a template-based helpercomponents, then it will be very prominent, it is much easier to connect the dynamic template.

 1 const user = {
 2   name: 'John',
 3   surname: 'Doe',
 4   details: {
 5     email: '[email protected]',
 6     displayName: 'SuperCoolJohn',
 7     joined: '2016-05-05',
 8     image: 'path-to-the-image',
 9     followers: 45
10   }
11 }
12 
13 const printUserInfo = (user) => { 
14   const text = `The user is ${user.name} ${user.surname}. Email: ${user.details.email}. Display Name: ${user.details.displayName}. ${user.name} has ${user.details.followers} followers.`
15   console.log(text);
16 }
17 
18 printUserInfo(user);
19 // outputs 'The user is John Doe. Email: [email protected]. Display Name: SuperCoolJohn. John has 45 followers.'