CodeRoll | Frontend

Руководство по Next.js.

Представляю вашему вниманию первую часть обновленного руководства по Next.js.


На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁

Ссылка

#статьи

Пояснение к ответу


Ключи объекта (кроме Symbol) автоматически преобразуются в строки (даже индексы в массиве). Мы пытаемся добавить объект в качестве ключа со значением 123 к объекту a. Однако, когда мы приводим объект к строке, он превращается в [object Object]. Таким образом, мы говорим, что a["object Object"] = 123. Затем мы повторяем процедуру. c - это другой объект, который мы также неявно приводим к строке. Поэтому a["object Object"] = 456. Наконец, когда мы выводим a[b] в консоль, мы на самом деле обращаемся к a["object Object"]. Поэтому в консоль выводится 456.

Что будет в консоли ?

Anonymous Quiz

49% - 123

21% - 456

12% - undefined

18% - ошибка

const a = {}
const b = { key: "b" }
const c = { key: "c" }

a[b] = 123
a[c] = 456

console.log(a[b])

Пояснение к ответу

String - это встроенный конструктор, к которому можно добавлять новые свойства. Мы добавили метод giveMePizza к его прототипу. Строки-примитивы автоматически конвертируются (преобразуются) в строки-объекты (благодаря объектной обертке). Поэтому все строки (объекты) имеют доступ к указанному методу.

Что будет в консоли ?

Anonymous Quiz

74% - Give me pizza!

15% - ошибка

4% - ""

7% - undefined

String.prototype.giveMePizza = () => {
  return "Give me pizza!"
}

const name = "John"

console.log(name.giveMePizza())

Redux это бойлерплейт, а Mobx нет! Но есть нюанс

Я прочитал несколько статей и посмотрел другие доклады, где все как один говорят, что Mobx лучше, чем Redux. Возможно это и так, но почему в сравнение всегда идет Redux, а не Redux-Toolkit, я не понимаю. Попытаемся конструктивно посмотреть действительно ли Mobx настолько хорош как о нем говорят.

Ссылка

#статьи

Что будет в консоли ?

Anonymous Quiz

9% - 1 2

13% - 1 2 3

74% - 1 2 4

4% - 1 3 4

for (let i = 1; i < 5; i++) {
  if (i === 3) continue
  console.log(i)
}

Что будет в консоли ?

Anonymous Quiz

9% - { a: "one", b: "two" }

31% - { b: "two", a: "three" }

38% - { a: "three", b: "two" }

22% - ошибка

const obj = { a: "one", b: "two", a: "three" }
console.log(obj)

В чем разница между движками и средами выполнения JavaScript?

Вы скорее всего слышали термины "движок JavaScript" и "среда выполнения JavaScript", которые используются, как взаимозаменяемые понятия, подразумевающие под собой "программу, которая выполняет JavaScript". Их часто смешивают, ссылаясь на V8, Node.js или некоторые другие комбинации схожих программ. Однако, существует значительная разница между движком и средой выполнения JavaScript с точки зрения их области применения и функциональности. Понимания этого различия является ключом к хорошему пониманию языка JavaScript в целом.

Ссылка

#статьи

Пояснение к ответу

Ключи объектов (кроме Symbol) являются строками, даже если заданы не в виде строк (например, индексы в массиве). Поэтому выражение obj.hasOwnProperty('1') также возвращает true. Однако, это не работает с Set. Значение 1 отсутствует в set: set.has('1') возвращает false, а set.has(1) - true.

Что будет в консоли ?

Anonymous Quiz

26% - false true false true

15% - false true true true

53% - true true false true

6% - true true true true

const obj = { 1: "a", 2: "b", 3: "c" }
const set = new Set([1, 2, 3, 4, 5])

console.log(obj.hasOwnProperty("1"))
console.log(obj.hasOwnProperty(1))
console.log(set.has("1"))
console.log(set.has(1))

Пояснение к ответу

С помощью ключевого слова var можно определять любое количество одноименных переменных. Переменная будет хранить последнее присвоенное ей значение. Однако, такой трюк нельзя проделать с let и const, т.к. переменные, объявленные с помощью этих ключевых слов, имеют блочную область видимости.

Что будет в консоли ?

Anonymous Quiz

7% - 8

70% - 10

3% - undefined

20% - ошибка

var num = 8
var num = 10

console.log(num)

Docker — не то, чем кажется

Как это часто бывает, с мультиплатформенностью и прочими «красивыми» словами в IT, всё не так однозначно. У всего своя цена, и под капотом один и тот же инструмент на разных системах, по сути своей может представлять из себя несколько разных вещей с различными принципами работы и производительностью. А обещания революции скрывают за собой эволюцию, либо вовсе регресс и топтание на месте.

Ссылка

#статьи