Улучшите свои навыки JavaScript с помощью этих скрытых жемчужин

JavaScript — один из самых популярных языков программирования в мире, и не зря. Он универсальный, мощный и может использоваться для всего, от веб-разработки до серверного программирования. Однако с большой силой приходит и большая ответственность, и разработчику JavaScript важно знать, как писать эффективный и оптимизированный код. В этой статье мы рассмотрим некоторые скрытые советы и приемы для написания лучшего кода JavaScript, в том числе продвинутые методы использования стрелочных функций, деструктуризации, шаблонных литералов и многое другое. К концу этой статьи вы лучше поймете, как сделать свой код JavaScript более кратким, удобочитаемым и производительным, что поможет вам стать более опытным и продуктивным разработчиком.

1. Используйте строгий режим

Один из самых важных советов по написанию эффективного кода JavaScript — использование строгого режима. Это специальный режим, обеспечивающий более строгий синтаксический анализ и обработку ошибок в JavaScript. Чтобы использовать строгий режим, просто добавьте use strict; в начало файла JavaScript. Например;

// Example 1
"use strict";
x = 3.14; // This will throw an error in strict mode


//Example 2
"use strict";
function myFunction() {
  console.log(this); // This will be undefined in strict mode
}


//Example 3
"use strict";
const myObject = {
  name: "John",
  getName() {
    console.log(this.name); // This will work correctly in strict mode
  }
};
myObject.getName();

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

2. Используйте деструктурирование

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

// Example 1
const myArray = [1, 2, 3];
const [first, second, third] = myArray;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3


// Example 2
const myObject = { name: "John", age: 30 };
const { name, age } = myObject;
console.log(name); // "John"
console.log(age); // 30


// Example 3
function myFunction({ name, age }) {
  console.log(name); // "John"
  console.log(age); // 30
}
const myObject = { name: "John", age: 30 };
myFunction(myObject);

// Example 4 [Nested Objects]
const myObject = {
  foo: "bar",
  baz: {
    qux: 42,
  },
};
const { foo, baz: { qux } } = myObject;
console.log(foo, qux); // "bar" 42

3. Используйте стрелочные функции

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

//Example 1
const myArray = [1, 2, 3];
const result = myArray.map((number) => number * 2);
console.log(result); // [2, 4, 6]


// Example 2
const myFunction = (x, y) => x + y;
console.log(myFunction(2, 3)); // 5


// Example 3
const myObject = { name: "John", age: 30 };
const getName = () => console.log(myObject.name);
getName(); // "John"

// Example 4
const myObject = {
  myMethod() {
    setTimeout(() => {
      console.log(this);
    }, 1000);
  },
};
myObject.myMethod(); // logs the myObject object


// Example 5 [Composition]
const addOne = (x) => x + 1;
const double = (x) => x * 2;
const addOneAndDouble = (x) => double(addOne(x));

console.log(addOneAndDouble(3)); // 8

4. Используйте литералы шаблонов

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

// Example 1
const name = “John”;
const message = Hello ${name}, welcome to our website!;
console.log(message); // "Hello John, welcome to our website!"


// Example 2
const name = "John";
console.log(`Hello, my name is ${name}`); // "Hello, my name is John"


// Example 3
const x = 5;
const y = 10;
console.log(`The sum of ${x} and ${y} is ${x + y}`); // "The sum of 5 and 10 is 15"


// Example 4
const myArray = [1, 2, 3];
console.log(`The first element in my array is ${myArray[0]}`); // "The first element in my array is 1"

5. Используйте асинхронность/ожидание

Async/await — это современный способ обработки асинхронного кода в JavaScript. Это делает ваш код более читабельным и менее подверженным ошибкам, а также может повысить производительность за счет уменьшения объема кода, который вам нужно написать. Вот некоторые примеры:

// Example 1
async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  console.log(data.title);
}
fetchData(); // "delectus aut autem"


// Example 2
const getData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();
  console.log(data);
};
getData();


// Example 3
const myFunction = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello World");
    }, 2000);
  });
};
myFunction().then((data) => console.log(data)); // "Hello World"

В примерах 1 и 2 мы используем метод «fetch» ​​для извлечения данных из API, а ключевые слова «async» и «await» используются для обработки асинхронного характера метода «fetch». Это делает код более кратким и удобочитаемым, а также помогает повысить производительность за счет уменьшения объема кода, который необходимо написать. В то время как в примере 3 мы использовали обещание для разрешения значения «Hello World».

6. Используйте оператор спреда

Оператор распространения — еще одна мощная функция JavaScript, которая позволяет вам распространять элементы массива или объекта в новый массив или объект. Это может помочь сделать ваш код более кратким и читабельным, а также повысить производительность за счет уменьшения объема кода, который необходимо написать. См. примеры:

// Example 1
const myArray = [1, 2, 3];
const newArray = […myArray, 4, 5, 6];
console.log(newArray); // [1, 2, 3, 4, 5, 6]


// Example 2
const myObject = { name: "John", age: 30 };
const newObject = { ...myObject, occupation: "Developer" };
console.log(newObject); // { name: "John", age: 30, occupation: "Developer" }


// Example 3
const myArray1 = [1, 2, 3];
const myArray2 = [4, 5, 6];
const mergedArray = [...myArray1, ...myArray2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

7. Используйте тернарный и нулевой оператор

Тернарный оператор — это сокращенный способ написания условных операторов в JavaScript. Это способ написания одной строки кода для условного присвоения значения переменной или для выполнения одного из двух выражений на основе условия. Это может помочь сделать ваш код более кратким и читабельным, а также повысить производительность за счет уменьшения объема кода, который необходимо написать. Примеры:

// Example 1
const number = 5;
const message = number > 10 ? "Number is greater than 10" : "Number is less than or equal to 10";
console.log(message); // "Number is less than or equal to 10"


// Example 2
const isAdmin = true;
const greeting = isAdmin ? "Welcome Admin" : "Welcome User";
console.log(greeting); // "Welcome Admin"

Нулевой оператор

Нулевой оператор, обозначаемый как ??, является логическим оператором в JavaScript, который предоставляет краткий способ проверки нулевых значений и предоставления значения по умолчанию, когда они существуют. Он похож на оператор ИЛИ (||), но возвращает второй операнд только в том случае, если первый операнд имеет значение null или не определен.

Вот примеры использования нулевого оператора в присваивании переменной:

// Example 1
const myValue = null;
const defaultValue = "default";
const result = myValue ?? defaultValue;
console.log(result); // "default"


// Example 2
function myFunction(myParam = "default") {
  const result = myParam ?? "default";
  console.log(result);
}
myFunction(); // "default"
myFunction(null); // "default"
myFunction("value"); // "value"

В этом примере мы используем нулевой оператор, чтобы присвоить значение "default" result, потому что myParam равно null или не определено. Если бы myParam или myValue имели значение 0 или false, вместо этого оператор вернул бы это значение.

8. Используйте сокращенную запись объекта

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

// Example 1
const name = "John";
const age = 30;
const myObject = { name, age };
console.log(myObject); // { name: "John", age: 30 }


// Example 2
const myFunction = (name, age) => {
   return { name, age };
};
console.log(myFunction("John", 30)); // { name: "John", age: 30 }


// Example 3
const myObject1 = { name: "John", age: 30 };
const myObject2 = { ...myObject1, occupation: "Developer" };
console.log(myObject2); // { name: "John", age: 30, occupation: "Developer" }

9. Используйте дополнительную цепочку

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

С дополнительной цепочкой вы можете использовать «?» оператор, чтобы проверить, существует ли каждый объект в цепочке перед доступом к его свойству. Если какой-либо объект в цепочке имеет значение null или не определено, выражение возвращает значение undefined, а не выдает ошибку. Вот пример того, как вы можете использовать необязательную цепочку для доступа к свойствам вложенного объекта:

// Example 1
const myObject = { 
  name: "John", 
  address: { 
    street: "123 Main St", 
    city: "New York" 
  } 
};
console.log(myObject?.address?.city); // "New York"
console.log(myObject?.address?.country); // undefined


// Example 2
const myArray = [1, 2, 3];
console.log(myArray?.[0]); // 1
console.log(myArray?.[10]); // undefined


// Example 3
const myFunction = (myObject) => {
  console.log(myObject?.name?.toUpperCase());
};
myFunction(null); // undefined
myFunction({ name: "John" }); // "JOHN"

В примере 1 мы используем необязательную цепочку для доступа к свойствам «город» и «страна» объекта «адрес». Если объект «адрес» не существует или имеет значение null, выражение возвращает undefined вместо того, чтобы выдавать ошибку. В примере 2 перед доступом к нему проверяется, существует ли элемент, а в примере 3 свойство объекта проверяется перед выполнением над ним операции ToUpperCase.

Заключение

В заключение следует отметить, что JavaScript — это универсальный язык с широким спектром функций и инструментов, которые могут помочь вам писать более эффективный и удобный для сопровождения код. Используя такие функции, как строгий режим, деструктурирование, стрелочные функции, литералы шаблонов, async/await, операторы распространения, сокращенную запись объектов, тернарные и нулевые операторы и необязательное связывание, вы можете упростить свой код и сделать его более читабельным.

Как и в случае с любым другим языком, важно быть в курсе лучших практик и новых функций в JavaScript. Постоянно изучая и изучая язык, вы сможете полностью раскрыть его потенциал и вывести свои навыки на новый уровень.

Независимо от того, являетесь ли вы новичком или опытным разработчиком, применение этих советов и приемов поможет вам писать более чистый и эффективный код и улучшить общее качество ваших проектов JavaScript. Так что идите вперед и исследуйте мир JavaScript и посмотрите, какие скрытые сокровища вы можете открыть!

Спасибо за прочтение! 😊

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Присоединяйтесь к нашему сообществу Discord и следите за нами в Twitter, LinkedIn и YouTube.

Узнайте, как привлечь внимание к своему стартапу с помощью Circuit.