JSON Web Token​

Методов авторизации и аутентификации есть много, но в последнее время большинство из них основывается на JWT.

JSON Web Token — это созданная в определенном формате base64 строка. JWT считается одним из самых безопасных и удобных форматов для передачи токенов и небольшого набора пользовательских данных с запросом.

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

Каждый токен доступа состоит из трёх основных частей:

— Заголовок, в котором определяется информация о самом токене

— Полезная нагрузка — JSON объект, куда записываются все данные, необходимые для авторизации

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

Части токена разделяются точками.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJwcm9nd2F5IiwiaWF0IjoxNjg4MDMzMzI1LCJleHAiOjE3MTk1NjkzMjUsImF1ZCI6Ind3dy5wcm9nd2F5LmNvbSIsInN1YiI6InByb2d3YXkiLCJuYW1lIjoiRGVuaXMiLCJzdXJuYW1lIjoiUHV0bm92IiwiZW1haWwiOiJwcm9nd2F5QGVtYWlsLmNvbSIsInJvbGUiOiJBRE1JTiJ9.BTdcnNwZBfAHEmZEwf2P7s724Q1sZ60N2dHVRXhGtHI

Вот так это может выглядеть.

В этом токене в качестве полезной нагрузки использовался такой объект:

{
 "name": "Denis",
 "surname": "Putnov",
 "email": "progway@email.com",
 "role": "ADMIN"
}

Причём, обратите внимание на то, что чувствительную информацию в токене хранить всё равно нельзя. Не забывайте, что JWT — это всего лишь base64, поэтому декодировать его сможет любой желающий.

Да и вообще, чем меньше данных о пользователе, тем лучше.

И на этом, в целом, всё. Спасибо за прочтение, это важно для меня ❤️

#data #theory #useful

Ссылочные типы и типы значений в JavaScript

Перед прочтением я рекомендую пробежаться по ещё одному посту из канала о том, какие типы данных есть в JavaScript.

В языке JavaScript, типы данных можно разделить на две большие группы:

Типы значений — примитивы — данные, что языком воспринимаются по конкретному значению. Например, строка "Hello, World!" или число 5.

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

К ссылочным типам данных относятся:
— объекты
— массивы
— функции

Казалось бы, а какая разница? Но разница заключается в способе хранения и передачи этих самых данных через переменные, а так же в способе взаимодействия с ними.

Типы значений потому и называются примитивами, так как максимально просты и предсказуемы в этом плане. Такие переменные, по сути, представляют собой просто некоторую последовательность байт. При сравнении таких переменных, всё, что нужно сделать языку — посимвольно сравнить цепочки байт и выдать результат.

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

Например, в этом случае мы получаем не ожидаемый для многих вывод в консоль:

const obj = {
  name: "Denis",
  address: {
    street: 'Lenina',
    apartment: 10
  }
}

const clone = Object.assign({}, obj)

obj.address.street = 'Pushkina'

console.log(clone.address.street) // Pushkina

Связано это со спецификой работы Object.assign и особенностями копирования вложенных объектов. В этом случае копирование считается неглубоким, поэтому скопированный объект также изменяется.

Более подробно о понятии глубокого копирования я расскажу в отдельном посте. Он будет одним из следующих.

#javascript #data #theory #useful

Понятие глубокого копирования​

В JavaScript’e, да и в других языках, часто встречаются ссылочные типы данных, вокруг которых строится одновременно много самых различных полезных хаков и не очень полезных проблем.

Понятие глубокого копирования, на самом-то деле, достаточно простое. Рассмотрим код:

const obj = {
  name: "Denis",
  address: {
    street: 'Lenina',
    apartment: 10
  }
}

const clone = Object.assign({}, obj)

obj.address.street = 'Pushkina'

console.log(clone.address.street) // Pushkina

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

На данный момент в памяти у нас есть три объекта:
— obj
— clone
— obj.address

И, на самом деле, obj.address === clone.address. Этот вложенный объект для obj и clone на самом деле — один и тот же объект в памяти, поскольку Object.assign полностью скопировал только примитивы, а поле address просто перенёс по ссылке.

Для решения этой проблемы можно воспользоваться рекурсивными алгоритмами на основе того же Object.assign для глубокого копирования объекта. Или же, если мы точно знаем какие поля будут в нашем объекте, можем воспользоваться следующим синтаксисом через spread оператор:

const obj = {
  name: "Denis",
  address: {
    street: "Lenina",
    apartment: 10
  }
};

const clone = {
  ...obj,
  address: {
    ...obj.address
  }
};

obj.address.street = "Pushkina";

console.log(clone.address.street); // Lenina

Тут вывод уже будет ожидаемым, поскольку мы вручную пересоздали ссылку на объект в поле address и заполнили его значениями из исходного объекта. Однако стоит быть осторожным при копировании объектов таким способом и помнить, что spread оператор не копирует геттеры и сеттеры, как и Object.assign.

Подобные проблемы и решения также можно увидеть и в контексте массивов.

#javascript #theory #data

Способы клонирования объектов​

В JavaScript объекты являются ссылочным типом данных, из-за чего есть много приколов, но и проблем не меньше. Перед прочтением этого поста лучше прочитать о понятии нечистого объекта. И в этом посте мы разберёмся с тем как всё таки скопировать объект.

Итак, начать стоит с того, что нечистый объект невозможно скопировать. Именно поэтому это понятие так важно в теме копирования.

И переходя к способам, можно сказать, что их несколько основных:
1. Использование синтаксиса Spread оператора
2. Object.assign
3. Через методы глобального объекта JSON
4. Библиотека Lodash

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

Но так же можно и использовать глобальный объект JSON, а конкретно его методы stringify и parse. Логика такая, что первый метод переводит объект в JSON строку, а второй полностью воссоздаёт его из JSON строки:

const obj = {
 name: "Denis"
}

const clone = JSON.parse(JSON.stringify(obj))

Нюанс заключается лишь в том, что этот способ подходит только для самых примитивных объектов. Такой способ скопирует только примитивы, пропуская типа данных типа Symbol, геттеры, сеттеры, методы и всё, что сложнее строки, числа или boolean. Но для некоторых случаев такого способа более чем достаточно.

Более интересным вариантом является относительно новый синтаксис spread оператора, который копирует объект примерно так же как и вышеописанный способ. Spread оператор работает только с итерабельными объектами и процесс копирования тогда выглядит вот так:

const obj = {
 name: "Denis"
}

const clone = { ...obj }

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

И финальным, зато самым стабильным, как мне кажется, способом, является использование Object.assign. Это метод объекта, который доставляет свойства из одного объекта в другой. Так же, как и при использовании spread оператора, геттеры и сеттеры перенесены не будут. Выглядеть это может, например, так:

const obj = {
  name: "Denis"
}

const clone = Object.assign({}, obj)

Не забывайте, что способы с использованием spread оператора и Object.assign не производят глубокого копирования. Это очень важно, ведь вложенные объекты не будут по настоящему скопированы, а лишь перенесутся по ссылке. Из-за этого вы можете по ошибке мутировать какие-то данные, что в перспективе приведет к непредвиденным ошибкам.

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

#javascript #data #theory

Преобразование унарным плюсом

Является ли преобразование унарным плюсом самым быстрым способом преобразования строки в число?

Если коротко давать ответ: да, является. Но не всё так однозначно.

Преобразование унарным плюсом, то есть записью

const string = '5'
const number = +string // 5

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

Кроме того, мы не всегда можем получить ожидаемый результат в, казалось бы, самых простых кейсах, например:

const string = ""

+string // 0
parseInt(string) // NaN

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

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

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

Кстати, ещё можно преобразовать строку к числу при использовании глобального конструктора числа Number:

const string = "123"
const number = Number(string) // 123

Но такой способ будет работать дольше, чем parseInt и parseFloat.

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

#web #javascript #data

Метод массива toSorted​

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

toSorted — это метод массива, который работает аналогично уже давно существующему методу sort, а именно, как и ожидается, сортирует массив.

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

const nums = [1, 4, 3, 2]
nums.sort()
console.log(nums) // [1, 2, 3, 4]

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

const nums = [1, 4, 3, 2]
const newNums = [...nums].sort()

console.log(nums)    // [1, 4, 3, 2]
console.log(newNums) // [1, 2, 3, 4]

И как раз для упрощения этой операции в спецификации и появился новый метод — toSorted. Его работу в чём то можно сравнить с методами map и filter, а именно в том, что все эти метода совершают какие-то действия только над копией массива не затрагивая изначальный, при это возвращая полностью новый массив.

На примере это будет выглядеть следующим образом:

const nums = [1, 4, 3, 2]
const newNums = nums.toSorted()

console.log(nums)    // [1, 4, 3, 2]
console.log(newNums) // [1, 2, 3, 4]

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

Аналогичные замены появились и для методов reverse и splice. Для них еще один небольшой пример:

const nums = [1, 2, 3, 4];
const reversed = nums.toReversed();
console.log(nums)     // [1, 2, 3, 4]
console.log(reversed) // [4, 3, 2, 1]

const nums = [1, 2, 3, 4];
const spliced = nums.toSpliced(0, 1);
console.log(nums)   // [1, 2, 3, 4]
console.log(spiced) // [2, 3, 4]

Это не все нововведения ECMAScript 2023, но это их весомая часть. Разбор остальных нововведений будет в скором времени.

Спасибо за прочтение, это важно для меня ❤️

#javascript #theory #web #data