Путешествие по JavaScript от новичка к профессионалу

Данный материал был подготовлен в рамках платного курса по “JavaScript для Аналитики” и доступен бесплатно для подписчиков моего блога

1. Использование typeof:

способ использования для проверки типа данных:

console.log(typeof 100); //number
console.log(typeof "100"); //string

Обычно скобки не используются в typeof. В некоторых случаях скобки используются для устранения двусмысленности в нашем коде. Такие как:

console.log(typeof value => value * 2); //error
console.log(typeof (value => value * 2)); //function

2. Первый шаг в обработке ошибок:

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

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

“try…поймать” может стать спасением в этой ситуации и сгладить процесс обработки ошибки. Давайте познакомимся с “попробуй..поймай”:

try{
 //code
}catch(err){
 //error
}

В блоках “попробуйте” код будет выполнен первым. Если не будет обнаружено никакой ошибки, то блок “поймать” не будет выполнен. В отличие от, если какая-либо ошибка, обнаруженная в блоке “попытка”, будет выведена в блок “поймать”, и блок “поймать” будет выполнен.

*Примечание: В функции “catch” параметр может быть исключен, если не требуются какие-либо сведения об ошибке.

3. Несколько советов о стиле кода:

Хотите начать с известных цитат:

Любой дурак может написать код, который может понять компьютер. Хорошие программисты пишут код, который могут понять и люди.

— Мартин Фаулер

Для достижения того, чтобы написать читаемый человеком код, “стиль кода” всегда будет первым правилом. Вот несколько советов о стилях кода:

1. Оставьте свободное место перед открывающей фигурной скобой.

function printAnything() { ///keep a space before the opening brace
 //code
}

2. Если какое-либо “условие if” написано в строку, то нет необходимости использовать фигурные скобки.

if(condition) console.log('не надо фигурных скобок');

Хотя рекомендуемым(лучшим) руководством по стилизация для этого элемента является:

if(condition) {
 console.log('не надо фигурных скобок');
}

И не забудьте поставить точку с запятой в конце.

3. Держите длину линии короткой.

console.log(
 "abrakadabra abrakadabra abrakadabra abrakadabra 
 abrakadabra abrakadabra abrakadabra abrakadabra 
 abrakadabra abrakadabra abrakadabra abrakadabra 
 abrakadabra abrakadabra abrakadabra abrakadabra 
 abrakadabra abrakadabra abrakadabra abrakadabra "
);

Также, если “условие if” имеет большую длину условия:

if(
 'shakib' !== 'ananta' &&
 'shakib' !== 'apu' &&
 'ananta' === 'barsha'
){
 //code
}

4. Типы кэширования:

1. Кэширование клиента: Кэширование клиента помогает ограничить использование данных клиентом за счет локального хранения некоторых данных.
2. Кэширование сервера: Отключение кэширования может не снизить использование клиентских данных, но это помогает снизить нагрузку на сервер.
3. Кэширование сервера: Это комбинация кэширования “Клиент и сервер”.

5. Кроссбраузерное тестирование:

Тестирование веб-сайта или веб-приложения в приемлемом диапазоне браузеров называется “Кросс-браузерным тестированием”.

Это важно для стабильного взаимодействия с пользователем. Потому что не все браузеры ведут себя одинаково при реализации кода. А для старого браузера может быть несколько реализаций кода, которые не могут работать должным образом. Кроме того, это гарантирует, что “веб-сайт/ веб-приложение” будет доступно для людей с ограниченными возможностями.

6. Что такое Hoisting:

Объявление переменной с помощью “var” в JavaScript немного сбивает с толку. Давайте посмотрим, почему это сбивает с толку:

console.log(приглашение); //не определено, если(true)
{
 var приглашение = "привет";
 console.log(приглашение); //привет
}

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

Здесь важную роль играет “ Hoisting ”. Когда мы объявляем переменную с “var”, часть объявления переменных переносится в “глобальную область” и помещается в верхней части программы. Часть инициализации этой переменной остается в том положении, в котором она была записана. Вот почему он доступен до объявления программы. Из-за не поднятой инициализации значение переменной “не определено”.

7. Что такое TDZ:

“TDZ” означает Временную мертвую зону. В предыдущих разделах мы видели, что “var “ находится перед объявлением переменной. Но объявление переменной с “let” и “const” не находится сверху. И эти переменные недоступны до объявления.

function do(){
 console.log(value); //error
 let value = 'hello';
}

Из-за “TDZ”, когда переменная объявляется с помощью “let” или “const”, эта переменная переходит в “Временную мертвую зону” и остается здесь до объявления. Любая попытка доступа к переменной в “TDZ” приведет к ошибке во время выполнения.

8. Параметр по умолчанию:

В ES6 параметр по умолчанию вводится в JavaScript. Давайте рассмотрим параметр по умолчанию:

function isOk(mode = 'not ok'){
 return mode;
}
console.log(isOk()); //mode
console.log(isOk('ok')); //ok

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

9. Оператор распространения:

Оператор распространения, представленный в ES6. Это делает массив разделенным на отдельные аргументы. Давайте разберемся на примере:

const array = [10, 20, 30, 40, 50]
console.log(...array); //10 20 30 40 50
console.log(Math.max(...array)); //50

10. Имя функции:

ES6 вводит свойство name для удаления неоднозначности, связанной с функцией. Давайте рассмотрим пример:

const name = function funcName(){
 console.log('name')
}
console.log(name.name) //funcName