Шпаргалка по JavaScript для всех бэкэндеров

Часто встречаю странное пренебрежение, а иногда даже и отвращение со стороны backend разработчиков к JavaScript.

И, зачастую, это самое «фу, фронтенд» связано с «детской травмой» вида: попробовал -> столкнулся с особенностями языка -> фи какая гадость этот ваш JS.

Вторая категория - это люди, которым оно никогда и не нужно было, и ни разу с этим не сталкивались. Заметил, что в большинстве своем это Java, Python, Go разрабы.

По моему личному мнению каждый PHP разраб должен все-таки знать базовые конструкции и синтаксис. Я недавно столкнулся с таким лапшекодом на JS, что, похоже, его писал какой-то бэкэндщик, свято верящий, что for in - это PHPшный foreach, а local storage чистится после завершения сессии.

Пишите в комментарии свое мнение о том, нужно ли бэкэндеру уметь в JS, или нет?

А я напомню, что по-факту JS стал монополистом фронтенда.

Я собрал мини-шпаргалку по вопросам, часто возникающим у php разработчиков, пишущих JS код, тут:

В js нет разницы между одинарными и двойными кавычками. Но появились еще и косые, но об этом - позже

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

Сразу о главном - в JS, как и во многих других языках массив и ассоциативный массив (хэш таблица) - это разные типы. Ассоциативный массив мы можем представить в виде объекта.

// Работает во всех браузерах var arr = [1,2,3]; arr.forEach(function (value, key, array) { // тут код }); // новый вариант, не работает в IE и старых браузерах // также можно посимвольно пройтись по строке for (var value of arr) { // тут код } // если нужен ключ for (var [key, value] of arr) {} // обход объектов. Работает также и с массивами, но вы получите не только элементы массива но еще и функции)) var obj = {a: 1, b: 2}; for (var key in obj) { console.log(obj[key]); } // а вот и интересность: var extendedArr = [1, 2, 3]; extendedArr.print = function() { // какой-то код } for (var key in extendedArr) { console.log(extendedArr[key]); // выведет 1, 2, 3, function () }

var arr = [1,2,3]; // с массивами ничего сложного: console.log( arr[2] ); // также можно и с объектами var obj = {a: 1, b: 2}; console.log( obj["a"] ); // но лучше так: console.log( obj.a ); // если вдруг нужно динамически: var keyA = "a"; console.log( obj[keyA] );

Для задания переменных нужно использовать let, для констант - const (А точнее - для неизменяемых переменных).

В чем разница?

if (true) { var test = true; // используем var вместо let } alert(test); // true, переменная существует вне блока if if (true) { let test2 = true; // используем let } alert(test2); // Error: test2 is not defined

const obj = { name: "John" }; obj.printName = function () { console.log(this.name); }; obj.printName(); // тут все ок setTimeout(obj.printName, 1000); // хотим запустить эту функцию через секунду.

Проблема последней строки - что мы просто передаем функцию без контекста (без объекта), т.е. в момент ее выполнения this будет пустым. this у нас есть только тогда, когда мы вызываем функцию "из объекта", т.е. через точку

obj.printName(); // тут все ок

Выход есть!

Контекст можно передать при помощи .bind(), добавленного к функции:

setTimeout(obj.printName.bind(obj), 1000); // например так

const arr = [1, 2, 3]; const implodedArr = arr.join(','); const stringValues = "1,2,3"; const arrayValues = stringValues.split(",");

const arr = [1,2,3]; if (arr.indexOf(2) !== -1) { console.log("2 есть в массиве!"); } const str = "1,2,3"; // то же самое со строками if (str.indexOf("2") !== -1) { console.log("2 есть в строке!"); } console.log("Размер массива - " + arr.length); console.log("Длина строки - " + str.length);

const str = 'Яблоки круглые и сочные.'; // первым параметром можно смело передавать регулярку. const newstr = str.replace('Яблоки', 'Апельсины'); console.log(newstr); // Апельсины круглые и сочные.

Для конкатенации используется символ "+". Это приводит к некоторым казусам, например - вы по привычке пытаетесь сложить строку в которой число с числом:

const stringNumber = '1'; const justANumber = 1; console.log(stringNumber + justANumber); // выведет 11.

Или, всеми любимая baNaNa:

console.log('b' + 'a' + + 'a' + 'a'); // выведет baNaNa, потому что: // b + a = ba // + 'a' = эта запись читается как "положительное a", а так как "a" не число - оно превращается в NaN // ну и последнее "a" просто конкатенируется.

Легальный пример:

А чтобы добиться того-же эффекта, который имеют двойные кавычки в PHP, нужно делать вот так:

const myCustomVariable = 'Какая-то переменная для вставки в текст'; const someTextVariable = 'Текст ' + a + ' еще какой-то текст'; const otherTextVariable = `Текст ${myCustomVariable} еще какой-то текст`;

Напоследок - точка с запятой необязательны в конце, но если вы пишете "непрофессиональный" JS, то это может сыграть злую шутку с кодом в дальнейшем, поэтому - лучше уж поставить.

Ну а для тех, кто хочет разобраться нормально, вот ссылочка на хороший туториал с примерами и объяснениями https://learn.javascript.ru/first-steps

А я веду Telegram-канал PHP.Today где публикую все самое важное о PHP и о смежных технологиях.

t.me

PHP.today

Самые свежие новости из мира PHP. Обновленные стандарты. Лучшие практики с примерами кода. Как писать чистый, читаемый и понятный код. Чат тут https://t.me/all_it_ru

7 комментариев

Ияза Гара

19.02.2023

Так и пишите: не для бэкэндеров, а для пыхапышников )
Для них целый сайт есть, который трансформирует пхп функции в js.
А лучший рецепт - генерировать js средствами пхп чтобы потом выполнять в браузере.

Ответить

Роман Анисимов

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

Андрей

23.03.2023

Не знал раньше про вставку js кода в строки через косые кавычки, спасибо.

Где Курс

14.09.2023

Больше бесплатных уроков по javascript можно найти в нашей подборке курсов по джава скрипт:
https://vc.ru/u/1198303-gde-kurs/554907-obuchenie-javascript-s-nulya-top-40-luchshih-onlayn-kursov-po-js-besplatnye-2023-god

Обучение JavaScript с нуля: ТОП-40 лучших онлайн-курсов по js +Бесплатные [2023 год] — Где Курс на vc.ru

В этом рейтинге мы сравниваем ТОП-40 лучших онлайн курсов по программированию на javascript (JS) для начинающих разработчиков в 2023 году: платные и бесплатные, с трудоустройством и выдачей сертификата об образовании после обучения с нуля.

DaemonHK

20.02.2023

А я напомню, что по-факту JS стал монополистом фронтенда.Лол, блять... А есть еще что-то? Ты бы еще такое про CSS пизданул

Mr Nick

24.03.2023

Автор

Вот и подросло поколение, которое не знает, что кроме JavaScript был (да и все еще есть где-то на задворках интернета) еще целый ряд языков и технологий для фронта. Расскажите кто-нибудь ему про кнопочные телефоны, dial-up, и как кассету перематывать карандашом. Ну и топай уроки учить, а то двойку в школе поставят))

Шпаргалка по JavaScript для всех бэкэндеров

Кавычки.

Use Strict

Обход массивов, объектов

Обращение к элементам массива, объекта

var - устарело

this непостоянен!

explode, implode, count()

in_array, strpos, count and strlen

str_replace, preg_replace

Конкатенация