КМБ по JS day 0

Колин Робинсон (https://t.me/tarassenko_dev)

Скоро мне, Колину Робинсону, как и многим из вас предстоит снова встретиться со страшными и злыми HR and Team Lead во время интервью. А значит нужно освежить память и немного вспомнить что к чему в нашем любимом ДЖС.

Ближайшие 10 дней я буду делать шпаргалку-миниотчето своей подготовке к этому событию (мой субьективный миникурс по основам еще в разработке). Надеюсь что вам понравиться проделанная работа и после КМБ я продолжу писать для вас интересные посты и придумывать активности.

По этому предлагаю приступить.

День Нулевой :) : Подготовка

1. Нам понадобиться любой удобный редактор кода

2. Доступ в интернет

3. Немного времени

Очевидно что нужно начать с определения JS. На собесе никто не ожидает от вас четких терминов, главное передать суть.

По этому, джаваскрипт это язык програмирования, который позволяет «оживить» наш сайт. А именно позволяет динамически обновлять контент, создавать сложные анимации и прописывать логику взаимодействия клиента с сайтом.

Начнем с того, как мы можем подключать наш код.

1) Внутри тега

2) Внешний код

3) CDN (с удаленного сервера)

Также между тегами скрипт мы можем видеть «//» - это способ коментирования своего кода, иногда используеться для общение девелоперов.

Следующее что нам нужно вспомнить – переменные.

Их есть всего 3.

Пройдемся по каждой отдельно.

До ЕС6 у нас был только var. Но он имел свои особености.

В отличии от let – var поднимаеться в верх документа. Т.е. попытка обратиться к ней до ее обьявление не выхзовет ошибку и ваш код продолжит спокойно работать. Когда letпросто выдаст вам error

Ошибка с let (аналогично будет с Const)

Работа var

Как мы можем заметить, пока код не дойдет до обьявления var, он не будет выдавать ошибку, а просто вернет нам undefined (т.е. переменная не определена)

Второе что отличает var и let это область видимости.

Если у устаревшего var, она функциональная, то let имеет блочную модель поведения т.е. с let можно работать только внутри блока, который обычно выделяется фигурными скобками {}. Рассмотрим пример с циклом, чтобы лучше это понять.

Как можно заметить var вернул нам 10, судя по скрину консоль лог отработал на 13 строке т.е. после цикла (вне его блока). Это и называется функциональная область видимости.

Посмотрим как отработает let :

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

По поведению касательно всплытия CONST дублирует LET, но и у него есть своя особенность – const нельзя перезаписать.

Как можно заметить – let мы легко переименовали, но изменить const так и не удалось.

ВАЖНО: имена нужно придумывать логически. В моем случае – это примеры жизнедеятельности наших переменных. В рабочих проектах я создаю только корректные имена :D

Я предпочитаю использовать верблюжье написание

let shopItems = document.querySelectorAll(‘.shop-tems’);

Также const по типу токена и остальных вещей, которые не изменяются и являются что-то типо фундаментальных в вашем проекте принято писать большими буквами

const TOKEN = token;

По переменным ВСЁ – парапа-па-пам

ТИПЫ ДАННЫХ

Далее мы рассмотрим с Вами типы данных.

Еще недавно было всего 7 типов данных, сейчас их 8.

Пойдем по порядку от примитивов к не примитивному

1) Number

2) BigInt

3) String

4) Boolean

5) Undefined

6) Null

7) Symbol

8) Object (единственный не примитивный тип данных)

С помощью оператора typeof мы можем узнать какой тип данных у нас находиться в переменной и т.д.

Рассмотрим на примере где 1-8 строка дублируют список выше, а 12-20 выводит нам тип данных

И тут мы встречаем первый подводный камень. Typeof null возвращает нам объект и с этим нужно смириться. Это официально признанная ошибка.

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

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

Если первые 2 одно и то же но с разным синтаксисом (поможет когда в переменной есть строка обернутая в кавычки), то в обратных кавычках мы можем писать функциональные выражения в ${name}