8 приемов и советов для JavaScript-разработчиков

Веб-разработчик Гарвит Мотвани поделился в блоге на dev.to восемью приемами и советами для JavaScript.

1. Функциональное наследование

Это процесс получения новых свойств путем дополнения другой функции экземпляра объекта. Функция представляет собой экземпляр объекта с областью видимости, которую можно использовать для хранения приватных данных. Ее экземпляр можно расширить за счет другой функции новыми свойствами и методами. 

// 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()

Метод .map() можно заменить на .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 to string / string to number

Обычно, чтобы преобразовать число в строку, используется команда:

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

Для преобразования строки в число: 

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

Чтобы проделать операцию быстрее нужно: 

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

4. Использование свойства length для изменения размера и очистки массива

В JavaScript можно переопределить встроенное свойство length и присвоить ему нужное значение.

Например: 

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]

Метод также можно использовать для очистки массива. Например: 

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. Замена местами значений массива с его деструктуризацией

Синтаксис деструктурирующего присваивания — это выражение JavaScript, которое позволяет распаковывать значения из массивов или свойства из объектов в отдельные переменные. Деструктуризация также может быть использована для быстрой замены значений. Например: 

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

6. Удаление дубликатов из массива

Например, есть массив, содержащий числа, строки и логические значения, но значения повторяются более одного раза. Чтобы удалить дубликаты, нужно выполнить следующие действия: 

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. Упрощенное написание цикла

Можно написать меньше кода для цикла используя for...of вместо обычного for

 таким образом:

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. Производительность

В JavaScript можно узнать время выполнения кода. Для этого нужно воспользоваться следующими командами:

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