Я начал свою карьеру в качестве разработчика PHP, но через некоторое время я почувствовал, что у фронтенд-разработчика есть огромные возможности, и начал изучать JS. Поскольку у меня не так много опыта в JS, я сделал много ошибок в начале. Сегодня я смеюсь над этими ошибками. Я делюсь некоторыми ошибками, чтобы помочь новичкам.

  1. Использование Var для объявления переменной

Никогда не используйте Var для объявления переменной, потому что если вы объявите с помощью var, то она станет глобальной переменной, и она активна до тех пор, пока не будет запущено ваше приложение. Это может вызвать утечку памяти

Итак, что мы должны использовать для объявления переменных? Мы можем использовать Let и Const.

Let и Const используются для объявления уровня области видимости. Это означает, что он будет жить до тех пор, пока его область действия не будет жива, а позже он будет автоматически освобождать свою память. Это никогда не вызовет у вас проблемы с утечкой памяти.

2. Клонировать объект, используя знак равенства”=”

В Javascript объекты хранятся по ссылке, поэтому, если вы скопируете объект по знаку равенства, оба объекта будут указывать на один и тот же адрес памяти. Например

let student = {
   "firstName":"James",
   "lastName":"Smith",
   "address":{
      "street":"Janpath",
      "city":"Delhi",
      "country":"India"
   }
}
let secondStudent = student;
newStudent.firstName = 'Robert'
console.log(student);
console.log(newStudent);

Здесь, в примере, скопируйте объект ученика и назначьте его объекту newStudent, поэтому, если я изменю firstName нового ученика, он также изменит объект ученика, потому что оба указывают на один и тот же адрес памяти. Если вы измените объект копирования, он автоматически изменит исходный объект. Иногда это создаст проблемы, и вы не сможете получить ожидаемый результат.

Итак, каково решение?

A. Скопируйте объект с помощью оператора REST.

let secondStudent = {...student};

Используя оператор rest, вы можете просто копировать объекты с ссылкой.

B. Скопируйте объект Object.assign()

let secondStudent = Object.assign({}, student);

Оба метода имеют проблемы при копировании с объектами. Если у объекта есть внутренний объект, то внутренний объект будет скопирован по ссылке. поэтому, если вы сделаете какое-либо изменение внутреннего объекта объекта копии, внутренний объект исходного объекта будет автоматически изменен. Давайте найдем решение этой проблемы и наш второй способ копирования объектов.

C. Скопируйте, используя JSON.stringify() и JSON.parse()

secondStudent JSON.parse(JSON.stringify(student))

D. Вы также можете использовать метод cloneDeep Lodash

secondStudent = _.cloneDeep(student);

3. Без использования оператора Rest and Spread.

Что такое оператор спреда?

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

Позвольте мне привести пример в реальном времени, где мы можем использовать оператор спреда.

  1. Вы можете создать копию массива с помощью оператора rest. Когда создается копия массива с использованием = (равно), JavaScript создает второй массив с копией по ссылке. Это может создать проблему некоторое время. Потому что, если вы измените второй массив, он автоматически отразится в первом массиве и повлияет на вывод. поэтому, когда вы хотите создать копию массива, попробуйте использовать оператор распространения.
 let originalArray = [1,2,3,4];
let copyWithSpreadOperator = [...originalArray]; // It will create copy of array by copy by value.
let copyWihoutSpreadOperator = originalArray // It will create copy of array by copy by reference.

Мы также можем скопировать объект по значению, используя оператор распространения.

2. Мы можем легко объединить два массива или добавить элемент в массив в первую или последнюю позицию. То же самое мы можем сделать для объекта. мы можем объединить два объекта в один объект.

e.g.

const arr = [1,2,3,4];
const arr2 = [5,6,7,8];
const combineArr = [...arr, ...arr2]; // combine two array
const arr =  [...arr, 5]; // append item into last index of existing array.

Более подробный пример вы можете посмотреть здесь.

Что такое Rest оператор?

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

Некоторое время в функции вы не знаете, сколько аргументов требуется в функции, чтобы вы могли использовать оператор остатка, оператор остатка будет объединять все аргументы в массив.

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

sum(...numbers) {
  return numbers.reduce((a,b)=>a+b, 0);
}
// Pass 2 arguments in sum function
console.log(sum(1,2));
Pass 5 arguments in sum function
console.log(sum(11,12,13,14,15));

4. Не использовать асинхронность и ожидание

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.

обещание — замечательная функция javascript. обещание используется для обработки асинхронных событий. Здесь вы можете увидеть пример того, как мы используем async/await.

e.g.

// Normal function
getList () {
fetch("./list.json")
   .then((list) => {
     console.log("resolved", list);
   })
   .catch((err) => {
     console.log("error retrieving data", err);
   });
 }
// Await/Async function
Async getList () {
 try {
      let list = await fetch("./list.json");
       console.log("resolved", list);
 } catch(err) {
    console.log("error retrieving data", err);
  }
}

5. Напишите код вручную для поиска индекса, фильтрации, поиска объекта и других операций, даже если метод массива уже существует.

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

// To find index from array
const indexOn = students.findIndex(student =>  student.firstName === 'James');
// filter array where firstName is 'James'
const studentList = students.filter(student =>  student.firstName === 'James');

6. Чтобы получить доступ к объекту проверки вложенных объектов вместо использования необязательной цепочки.

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

// Without optional chaining
let name = '';
if(student.name){
  name = student.name
}
// Using optional  chaining
name = student?.name

Спасибо, ребята, читающие эту статью, дайте мне знать ваши отзывы и какая будет следующая тема для блога.