JavaScript заметки
8.67K subscribers
2.69K photos
4 videos
1.24K links
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке.

Можно почитать пока компилируется проект :)

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Download Telegram
Константы

Чтобы объявить константную, то есть, неизменяемую переменную, используйте const вместо let

Переменные, объявленные с помощью const, называются «константами». Их нельзя изменить. Попытка сделать это приведёт к ошибке.

Если программист уверен, что переменная никогда
не будет меняться, он может гарантировать это
и наглядно донести до каждого, объявив её через const.

#const #переменные
👍3
F.prototype

Как мы помним, новые объекты могут быть созданы с помощью функции-конструктора new F().
Если в F.prototype содержится объект, оператор new устанавливает его в качестве [[Prototype]] для нового объекта.

JavaScript использовал прототипное наследование с момента своего появления. Это одна из основных особенностей языка.
Но раньше, в старые времена, прямого доступа к прототипу объекта не было. Надёжно работало только свойство "prototype" функции-конструктора, описанное в этой главе. Поэтому оно используется во многих скриптах.

Обратите внимание, что F.prototype означает обычное свойство с именем "prototype" для F. Это ещё не «прототип объекта», а обычное свойство F с таким именем.

Пример на картинке выше ☝️

#прототипы #f_prototype
👍1
Обработка ошибок, "try..catch"

Конструкция try..catch состоит из двух основных блоков: try, и затем catch.

Работает она так:
- Сначала выполняется код внутри блока try {...}.
- Если в нём нет ошибок, то блок catch(err) игнорируется: выполнение доходит до конца try и потом далее, полностью пропуская catch.
- Если же в нём возникает ошибка, то выполнение try прерывается, и поток управления переходит в начало catch(err). Переменная err (можно использовать любое имя) содержит объект ошибки с подробной информацией о произошедшем.

Пример кода на картинке выше ☝️

#обработка_ошибок #try_catch
👍1
typeof

Часто бывает необходимо определить тип данных с которым ты работаешь и для этого есть оператор typeof.

Он возвращает строку, указывающую тип операнда.

Всего существует 8 возвращаемых значений:
- "undefined" - тип undefined
- "bigint" - тип bigint
- "boolean" - тип boolean 
- "number" - тип number
- "string" - тип string
- "symbol" - тип symbol
- "function" - тип функция
- "object" - любой другой тип

#типы_данных #typeof
👍2
Стиль кода

Код должен быть максимально читаемым и понятным.

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

Вот вам пару советов:
- Следуйте стандартам оформления кода.
- Давайте наглядные имена.
- Комментируйте и документируйте.
- Не повторяйтесь.
- Разделяйте код на короткие, обособленные части.

#стиль_кода #code_style
👍2
Массивы

Довольно часто мы понимаем, что нам необходима упорядоченная коллекция данных, в которой присутствуют 1-й, 2-й, 3-й элементы и т.д.
Например, она понадобится нам для хранения списка чего-либо: пользователей, товаров, элементов HTML и т.д.

В этом случае использовать объект неудобно, так как он не предоставляет методов управления порядком элементов. Мы не можем вставить новое свойство «между» уже существующими. Объекты просто не предназначены для этих целей.
Для хранения упорядоченных коллекций существует особая структура данных, которая называется массив, Array.

Чтобы создать массив можно воспользоваться оператором new или просто поставить квадратные скобки.

#массивы #array
👍2
Конструкция "switch"

Конструкция switch заменяет собой сразу несколько if. Она имеет один или более блок case и необязательный блок default.

Переменная x проверяется на строгое равенство первому значению value1, затем второму value2 и так далее.

Если соответствие установлено – switch начинает выполняться от соответствующей директивы case и далее, до ближайшего break (или до конца switch).

Если ни один case не совпал – выполняется (если есть) вариант default.

#конструкция_switch #синтаксис
👍2
ES6

ECMAScript 2015, также известный как ES6, является фундаментальной версией стандарта ECMAScript.

ES6 привнёс ряд фундаментальных изменений в язык, которые стали его неотъемлемой частью.

Что принёс с собой этот стандарт:
- стрелочные функции
- новая область this
- let и const
- промисы
- generators
- классы
- конструктор и ещё многое-многое другое

Как вы могли заметить, практически все крутые фишки, которые используются повсеместно привнёс ES6.

А чтобы писать на крутом синтаксисе со скоростью света, вы можете установить плагин (ES6) сode snippets на свой редактор кода VS Code.

#ES6 #ECMAScript
👍1
Объекты

Объекты используются для хранения коллекций различных значений и более сложных сущностей. 

В JavaScript объекты используются очень часто, это одна из основ языка.

Объект может быть создан с помощью фигурных скобок {…} с необязательным списком свойств. 
Свойство – это пара «ключ: значение», где ключ – это строка (также называемая «именем свойства»), а значение может быть чем угодно.

На картинке выше создан объект user, где находятся два свойства:
- Первое свойство с именем "name" и значением "John"
- Второе свойство с именем "age" и значением 30.

Можно сказать, что наш объект user – это ящик с двумя папками, подписанными «name» и «age».

#типы_данных #objects
👍1
JSON

Это текстовый формат представления данных в нотации объекта JavaScript. 
Предназначен JSON, также как и некоторые другие форматы такие как XML и YAML, для обмена данными.

В JavaScript JSON очень часто применяется в качестве формата для передачи информации от веб-сервера клиенту (веб-браузеру) при AJAX запросе.

Основные методы:
 - JSON.parse()
Разбирает строку JSON, возможно с преобразованием получаемого значения и его свойств и возвращает разобранное значение.
 - JSON.stringify()
Возвращает строку JSON, соответствующую указанному значению, возможно с включением только определённых свойств или с заменой значений свойств определяемым пользователем способом.

#JSON #типы_данных
👍1
Дата и время

Встречайте новый встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.
Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.

Для создания нового объекта Date нужно вызвать конструктор new Date() с одним из следующих аргументов:

- new Date()
Без аргументов – создать объект Date с текущими датой и временем.

 - new Date(milliseconds)
Создать объект Date с временем, равным количеству миллисекунд (тысячная доля секунды), прошедших с 1 января 1970 года UTC+0.

#date #типы_данных
👍1
Инструкция if

Инструкция if(...) вычисляет условие в скобках и, если результат true, то выполняет блок кода.

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

Рекомендовано использовать фигурные скобки {} всегда, когда вы используете инструкцию if, даже если выполняется только одна команда. Это улучшает читабельность кода.

#условное_ветвление #инструкция_if
👍1
Функции-стрелки

Существует простой и краткий синтаксис для создания функций, который часто лучше, чем синтаксис Function Expression.
Он называется «функции-стрелки» или «стрелочные функции» (arrow functions)

На картинке выше (a, b) => a + b задаёт функцию с двумя аргументами a и b, которая при запуске вычисляет выражение справа a + b и возвращает его результат.

#function #функции_стрелки
👍1
String

Строка (string) в JavaScript должна быть заключена в кавычки.

В JavaScript существует три типа кавычек.

Двойные кавычки: "Привет".
Одинарные кавычки: 'Привет'.
Обратные кавычки: `Привет`.

Двойные или одинарные кавычки являются «простыми», между ними нет разницы в JavaScript.

Обратные же кавычки имеют расширенную функциональность. Они позволяют встраивать выражения в строку, заключая их в ${…}.

#string #типы_данных
👍1
Несколько операторов "?"

Последовательность операторов вопросительного знака ? позволяет вернуть значение, которое зависит от более чем одного условия.

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

#условное_ветвление #условный_оператор_?
👍2
Цикл «do…while»

Проверку условия можно разместить под телом цикла, используя специальный синтаксис do..while

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

#Циклы_while_for #do_while
👍1
Преобразование типов

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

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

Примеры преобразование:

Строковое преобразование - String(value)

Численное преобразование - Number(value)

Логическое преобразование - Boolean(value)

#преобразование_типов #типы_данных
👍1
Булевый (логический) тип

Булевый тип (boolean) может принимать только два значения: true (истина) и false (ложь).

Такой тип, как правило, используется для хранения значений да/нет: true значит «да, правильно», а false значит «нет, не правильно».

#boolean #типы_данных
👍2
Var вместо let

В старых скриптах вы также можете найти другое ключевое слово: var вместо let:

Ключевое слово var – почти то же самое, что и let. Оно объявляет переменную, но немного по-другому, «устаревшим» способом.

#var #переменные
👍1
Дорогие подписчики! Сколько постов в неделю вы бы хотели видеть на канале?
Anonymous Poll
24%
3 поста в неделю (через день)
21%
5 постов в неделю (кроме выходных)
55%
Каждый день 😈
👍1
Примитивные и ссылочные типы данных

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

На картинке выше, при присваивание строчной переменной происходит создание новой переменной с таким же значением.
В результате мы имеем две независимые переменные, каждая из которых хранит строку "Привет!".

А при копирование объекта, у нас создается копия ссылки, сам же объект не дублируется.

#объекты #типы_данных
👍1