Основы javascript для начинающих разработчиков

Выбор имени функции

Функция – это действие. Поэтому имя функции обычно является глаголом. Оно должно быть простым, точным и описывать действие функции, чтобы программист, который будет читать код, получил верное представление о том, что делает функция.

Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение. Обычно в командах разработчиков действуют соглашения, касающиеся значений этих префиксов.

Например, функции, начинающиеся с обычно что-то показывают.

Функции, начинающиеся с…

• – возвращают значение,
• – что-то вычисляют,
• – что-то создают,
• – что-то проверяют и возвращают логическое значение, и т.д.

Примеры таких имён:

Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код, и какое значение она может возвращать.

Одна функция – одно действие

Функция должна делать только то, что явно подразумевается её названием. И это должно быть одним действием.

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

Несколько примеров, которые нарушают это правило:

• – будет плохим выбором, если функция будет выводить с возрастом (должна только возвращать его).
• – будет плохим выбором, если функция будет изменять документ, добавляя форму в него (должна только создавать форму и возвращать её).
• – будет плохим выбором, если функция будет отображать сообщение с текстом (должна только выполнять проверку и возвращать её результат).

В этих примерах использовались общепринятые смыслы префиксов. Конечно, вы в команде можете договориться о других значениях, но обычно они мало отличаются от общепринятых. В любом случае вы и ваша команда должны точно понимать, что значит префикс, что функция с ним может делать, а чего не может.

Сверхкороткие имена функций

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

Например, во фреймворке jQuery есть функция с именем . В библиотеке Lodash основная функция представлена именем .

Это исключения. В основном имена функций должны быть в меру краткими и описательными.

Типобезопасность в JavaScript: Flow и TypeScript

Все, кто имеют дело с разработкой UI в кровавом enterprise наверняка слышали о «типизированном JavaScript», подразумевая под этим «TypeScript от Microsoft». Но кроме этого решения существует как минимум ещё одна распространённая система типизации JS, и тоже от крупного игрока IT-мира. Это flow от Facebook. Из-за личной нелюбви к Microsoft раньше всегда использовал именно flow. Объективно это объяснял хорошей интеграцией с существующими утилитами и простотой перехода.
К сожалению, надо признать, что в 2021 году flow уже значительно проигрывает TypeScript как в популярности, так и в поддержке со стороны самых разных утилит (и библиотек), и пора бы его закопать поставить на полку, и перестать жевать кактус перейти на де-факто стандарт TypeScript. Но под этим хочется на последок сравнить эти технологии, сказать пару (или не пару) прощальных слов flow от Facebook.

Циклы for

Цикл for может использовать до трех опциональных выражений для повторного выполнения блока кода.

Рассмотрим синтаксис цикла.

• Инициализация (если указано) запускает счетчик и объявляет переменные.
• Далее обрабатывается условие. Если оно истинно, программа выполнит последующий код; если оно ложно, цикл прервется.
• Затем обрабатывается код, который нужно выполнить.
• Если указано финальное выражение, оно обновляется, после чего цикл возвращается к обработке условия.

Чтобы понять, как это работает, рассмотрим базовый пример.

Если запустить этот код, вы получите такой результат:

В приведенном выше примере цикл for начинается с переменной let i = 0, которая запустит цикл со значения 0. В цикле задано условие i < 4, а это означает, что до тех пор, пока значение i меньше 4, цикл будет продолжать работу. Финальное выражение i++ определяет счетчик для каждой итерации цикла. console.log(i) выводит числа, начиная с 0, и останавливается, как только i равняется 4.

Без цикла код, выполняющий те же действия, был бы таким:

Без цикла блок кода состоит из большего количества строк. Чтобы увеличить количество чисел, пришлось бы внести в код еще больше строк.

Давайте рассмотрим каждое выражение в цикле.

Инициализация

Первое выражение в цикле – инициализация.

Оно объявляет переменную i с помощью ключевого слова let (также можно использовать ключевое слово var) и присваивет ей значение 0. Вы можете использовать в циклах любые имена переменных, но переменная i ассоциируется со словом «итерация» (iteration) и не перегружает код.

Условие

Как и циклы while и do…while, циклы for обычно имеют условие. В данном примере это:

Это значит, что выражение оценивается как истинное, пока значение i меньше 4.

Финальное выражение

Это выражение, которое выполняется в конце каждого цикла. Чаще всего оно используется для увеличения или уменьшения значения переменной, но его можно использовать и для других целей.

В данном примере цикл увеличивает переменную на единицу. Выражение i++ делает то же самое, что и i = i + 1.

В отличие от начала и условия, финальное выражение не заканчивается точкой с запятой.

Тело цикла

Теперь вы знаете все компоненты цикла for. Взглянем на код еще раз.

Первое выражение задает исходное значение переменной (0), второе определяет условие (цикл выполняется, пока i меньше 4), а третье – задает шаг каждой итерации (в данном случае значение будет увеличиваться на 1).

Консоль будет выводить значения: 0, 1, 2 и 3. Затем цикл прервется.

9) onReady()

Для инициализации страницы исторически использовалось событие window.onload, которое срабатывает после полной загрузки страницы и всех объектов на ней: счетчиков, картинок и т.п.

Событие — гораздо лучший выбор в 99% случаев. Это событие срабатывает, как только готов DOM документ, до загрузки картинок и других не влияющих на структуру документа объектов.

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

Для добавления обработчика можно использовать следующий кроссбраузерный код:

function bindReady(handler){

	var called = false

	function ready() { // (1)
		if (called) return
		called = true
		handler()
	}

	if ( document.addEventListener ) { // (2)
		document.addEventListener( "DOMContentLoaded", function(){
			ready()
		}, false )
	} else if ( document.attachEvent ) {  // (3)

		// (3.1)
		if ( document.documentElement.doScroll && window == window.top ) {
			function tryScroll(){
				if (called) return
				if (!document.body) return
				try {
					document.documentElement.doScroll("left")
					ready()
				} catch(e) {
					setTimeout(tryScroll, 0)
				}
			}
			tryScroll()
		}

		// (3.2)
		document.attachEvent("onreadystatechange", function(){

			if ( document.readyState === "complete" ) {
				ready()
			}
		})
	}

	// (4)
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    /*  else  // (4.1)
        window.onload=ready
	*/
}

readyList = []

function onReady(handler) {

	if (!readyList.length) {
		bindReady(function() {
			for(var i=0; i<readyList.length; i++) {
				readyList()
			}
		})
	}

	readyList.push(handler)
}

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

onReady(function() {
  // ... 
})

Подробное описание функций , и принципы их работы вы можете почерпнуть в статье Кроссбраузерное событие onDOMContentLoaded.

Популярные ошибки и подводные камни

Из-за сложных манипуляций с промисами и async/await концепциями вы можете встретиться с различными тонкостями, что может привести к ошибкам.

Не забывайте await

Частая ошибка заключается в том, что перед промисом забывается ключевое слово :

Обратите внимание, здесь не используется ни , ни. Функция всегда будет завершаться с (без задержки в 1 секунду)

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

async-функции в обратных вызовах

async-функции часто используются в . или . в качестве коллбэков. Вот пример — допустим, существует функция , которая возвращает количество открытых репозиториев на GitHub. Есть 3 пользователя, чьи показатели нужно взять. Используется такой код:

И для того, чтобы получить количество репозиториев пользователей (), код должен выглядеть как-то так:

Обратите внимание на слово в обратном вызове функции. Можно было бы ожидать, что переменная будет содержать число — количество репозиториев

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

Слишком последовательное использование await

Допустим, есть такой код:

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

Если на обработку одного пользователя будет уходить 300 мс, то на всех пользователей уйдёт почти секунда. В этом случае затрачиваемое время будет линейно зависеть от количества пользователей. Поскольку получение количества репозиториев не зависит друг от друга, то можно распараллелить эти процессы. Тогда пользователи будут обрабатываться одновременно, а не последовательно. Для этого понадобятся и .

на входе получает массив промисов и возвращает промис. Возвращаемый промис завершается после окончания всех промисов в массиве либо при первом реджекте. Возможно, все эти промисы не запустятся строго одновременно. Чтобы добиться строгого параллелизма, взгляните на p-map. А если нужно, чтобы async-функции были более адаптивными, посмотрите на Async Iterators.

Перевод статьи «Deeply Understanding JavaScript Async and Await with Examples»

Оператор typeof

Оператор возвращает тип аргумента. Это полезно, когда мы хотим обрабатывать значения различных типов по-разному или просто хотим сделать проверку.

У него есть две синтаксические формы:

1. Синтаксис оператора: .
2. Синтаксис функции: .

Другими словами, он работает со скобками или без скобок. Результат одинаковый.

Вызов возвращает строку с именем типа:

Последние три строки нуждаются в пояснении:

1. — это встроенный объект, который предоставляет математические операции и константы. Мы рассмотрим его подробнее в главе Числа. Здесь он служит лишь примером объекта.
2. Результатом вызова является . Это официально признанная ошибка в , ведущая начало с времён создания JavaScript и сохранённая для совместимости. Конечно, не является объектом. Это специальное значение с отдельным типом.
3. Вызов возвращает , потому что является функцией. Мы изучим функции в следующих главах, где заодно увидим, что в JavaScript нет специального типа «функция». Функции относятся к объектному типу. Но обрабатывает их особым образом, возвращая . Так тоже повелось от создания JavaScript. Формально это неверно, но может быть удобным на практике.

Константы

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

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

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

Широко распространена практика использования констант в качестве псевдонимов для трудно запоминаемых значений, которые известны до начала исполнения скрипта.

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

Например, сделаем константы для различных цветов в «шестнадцатеричном формате»:

Преимущества:

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

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

Название «константа» просто означает, что значение переменной никогда не меняется. Но есть константы, которые известны до выполнения (например, шестнадцатеричное значение для красного цвета), а есть константы, которые вычисляются во время выполнения сценария, но не изменяются после их первоначального назначения.

Например:

Значение неизвестно до загрузки страницы, поэтому её имя записано обычными, а не прописными буквами. Но это всё ещё константа, потому что она не изменяется после назначения.

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

Примечание по байт-коду

Как и в случае с машинным кодом, не все компьютеры понимают байт-код. Чтобы интерпретировать его на машиночитаемый язык, необходимо промежуточное ПО, такое как виртуальная машина, или движок (например, Javascript V8). По этой причине браузеры могут выполнять этот байт-код из интерпретатора во время вышеупомянутых 5-ти стадий с помощью движков JavaScript.

В результате возникает следующий вопрос:

Является ли JavaScript интерпретируемым языком?

Да, но не совсем. На ранних этапах JavaScript Брендан Айк создал движок JavaScript ‘SpiderMonkey’. У движка был интерпретатор, который говорил браузеру, что нужно делать. Сейчас есть не только интерпретаторы, но и компиляторы, а код не только интерпретируется, но и компилируется для оптимизации. Технически все зависит от реализации.

• Прототипирование для Vue(Opens in a new browser tab)
• Как не лажать с JavaScript. Часть 1
• JavaScript async/await: что хорошего, в чём опасность и как применять?

Перевод статьи Mano lingam: JavaScript: Under the Hood

Таблицы совместимости

JavaScript – это развивающийся язык, в который постоянно добавляется что-то новое.

Посмотреть, какие возможности поддерживаются в разных браузерах и других движках, можно в следующих источниках:

• http://caniuse.com – таблицы с информацией о поддержке по каждой возможности языка. Например, чтобы узнать, какие движки поддерживают современные криптографические функции, посетите: .
• https://kangax.github.io/compat-table – таблица с возможностями языка и движками, которые их поддерживают и не поддерживают.

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

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

Побитовые операторы

Побитовые операторы работают с 32-разрядными целыми числами (при необходимости приводят к ним), на уровне их внутреннего двоичного представления.

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

Поддерживаются следующие побитовые операторы:

• AND(и) ( )
• OR(или) ( )
• XOR(побитовое исключающее или) ( )
• NOT(не) ( )
• LEFT SHIFT(левый сдвиг) ( )
• RIGHT SHIFT(правый сдвиг) ( )
• ZERO-FILL RIGHT SHIFT(правый сдвиг с заполнением нулями) ( )

Они используются редко, когда возникает необходимость оперировать с числами на очень низком (побитовом) уровне. В ближайшем времени они нам не понадобятся, так как веб-разработчики редко к ним прибегают, хотя в некоторых сферах (например, в криптографии) они полезны. Можете прочитать на MDN, когда возникнет реальная необходимость.

Examples in Each Chapter

With our «Try it Yourself» editor, you can edit the source code and view
the result.

Example

Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

Learn by Examples

Examples are better than 1000 words. Examples are often easier to understand
than text explanations.

This tutorial supplements all explanations with clarifying «Try it Yourself» examples.

If you try all the examples, you will learn a lot about JavaScript, in a very short time!

JavaScript Examples »

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers
must
learn:

   1. HTML to define the content of web pages

   2. CSS to specify the layout of web pages

   3. JavaScript to program the behavior of web pages

This tutorial covers every version of JavaScript:

• The Original JavaScript ES1 ES2 ES3 (1997-1999)
• The First Main Revision ES5 (2009)
• The Second Revision ES6 (2015)
• The Yearly Additions (2016, 2017, 2018)

Learning Speed

In this tutorial, the learning speed is your choice.

Everything is up to you.

If you are struggling, take a break, or re-read the material.

Always make sure you understand all the «Try-it-Yourself»
examples.

The only way to become a clever programmer is to:
Practice. Practice. Practice. Code. Code. Code !

Commonly Asked Questions

• How do I get JavaScript?
• Where can I download JavaScript?
• Is JavaScript Free?

You don’t have to get or download JavaScript.

JavaScript is already running in your browser on your computer,
on your tablet, and on your smart-phone.

JavaScript is free to use for everyone.

JavaScript References

W3Schools maintains a complete JavaScript reference, including all HTML and browser objects.

The reference contains examples for all properties, methods and events, and
is continuously updated according to the latest web standards.

Complete JavaScript Reference »

w3schoolsCERTIFIED.221

❮ Home
Next ❯

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Это отличает JavaScript от другого языка – Java.

Почему JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

• V8 – в Chrome и Opera.
• SpiderMonkey – в Firefox.
• …Ещё есть «Trident» и «Chakra» для разных версий IE, «ChakraCore» для Microsoft Edge, «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome и Opera.

Как работают движки?

Движки сложны. Но основы понять легко.

1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
2. Затем он преобразует («компилирует») скрипт в машинный язык.
3. После этого машинный код запускается и работает достаточно быстро.

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

Зачем изучать JavaScript?

JavaScript является одним из 3 языков все веб-разработчики должны узнать:

   1. HTML Определение содержимого веб-страниц

   2. CSS Указание макета веб-страниц

   3. JavaScript Программирование поведения веб-страниц

Веб-страницы не являются единственным местом, где используется JavaScript.
Многие настольные и серверные программы используют JavaScript. Node. js является наиболее известным.
Некоторые базы данных, такие как MongoDB и CouchDB, также используют JavaScript в качестве языка программирования.

Ты знала?

JavaScript и Java-это совершенно разные языки, как в концепции, так и в дизайне.

JavaScript был изобретен Брендан Айх в 1995, и стал стандартом ECMA в 1997.ECMA-262 является официальным названием стандарта. ECMAScript является официальным названием языка.

Вы можете прочитать больше о различных версиях JavaScript в версии главы JS.

Для «var» не существует блочной области видимости

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

Например:

Так как игнорирует блоки, мы получили глобальную переменную .

А если бы мы использовали вместо , тогда переменная была бы видна только внутри :

Аналогично для циклов: не может быть блочной или локальной внутри цикла:

Если блок кода находится внутри функции, то становится локальной переменной в этой функции:

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

Точка с запятой

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

Так тоже будет работать:

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется .

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

Код выведет , потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком , значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

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

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

Пока нет необходимости знать значение скобок и . Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится , а затем .

А теперь добавим перед кодом и не поставим в конце точку с запятой:

Теперь, если запустить код, выведется только первый , а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после :

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут и .

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками . И поэтому код в первом примере выполняется, как одна инструкция. Вот как движок видит его:

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.

Комментарии

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

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

Однострочные комментарии начинаются с двойной косой черты .

Часть строки после считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.

Как здесь:

Многострочные комментарии начинаются косой чертой со звёздочкой и заканчиваются звёздочкой с косой чертой .

Как вот здесь:

Содержимое комментария игнорируется, поэтому, если мы поместим код внутри , он не будет исполняться.

Это бывает удобно для временного отключения участка кода:

Используйте горячие клавиши!

В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl+/ для однострочного комментария и что-то вроде Ctrl+Shift+/ – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl и Option вместо Shift.

Вложенные комментарии не поддерживаются!

Не может быть внутри .

Такой код «умрёт» с ошибкой:

Не стесняйтесь использовать комментарии в своём коде.

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

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

Цикл for…in

Цикл «for…in» предназначен для перебора перечисляемых имён свойств объекта. В JavaScript свойство является перечисляемым, если его внутренний флаг равен .

Свойства объекта, которые не относятся к перечисляемым, в цикле не участвуют.

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

/* цикл для перебора всех перечисляемых свойств объекта
    - key – переменная, в которую будет помещаться имя свойства объекта
    - object – объект, свойства которого нужно перебрать */
for (key in object) {
  /* тело цикла */
}

Переберём свойства объекта, созданного с помощью литеральной записи:

let car = {
  manufacturer: 'Ford',
  model: 'Fiesta',
  color: 'black'
};
for (let propName in car) {
  // propName – имя свойства
  // car – значение свойства
  console.log(propName + ' = ' + car);
}
// в консоль будет выведено: manufacturer = Ford, model = Fiesta, color = black

Кроме этого, следует отметить, что цикл проходит не только по перечисляемых свойствам этого объекта, но и по наследуемым.

let item = {
  a: 1,
  b: 2
}
let newItem = Object.create(item);
newItem.c = 3;
newItem.d = 4;
for (let propName in newItem) {
  console.log(propName);
}
// в консоли будет выведено: c, d, a, b

Если вам наследуемые свойства не нужно учитывать, то их можно пропустить:

for (let propName in newItem) {
  // переходим к следующей итерации, если текущее свойство не принадлежит этому объекту
  if(!newItem.hasOwnProperty(propName)) {
    continue;
  }
  console.log(propName);
}
// в консоли будет выведено: c, d

Использование цикла for… in для перебора массива. В массиве свойствами являются числовые индексы.

// массив
var arr = ;
// перебор массива с помощью цикла for in
for (let index in arr) {
  // index - индекс элемента массива
  // arr – значение элемента
  console.log(arr);
}
// в результате в консоль будет выведено: "Rock", "Jazz", "Classical", "Hip Hop"

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

При использовании цикла for…in стоит обратить внимание на то, что если вы к массиву добавили свои пользовательские свойства, то он по ним тоже пройдётся:

var arr = ;
arr.sum = 2;
for (var key in arr) {
  console.log(arr);
}
// в консоль будет выведено 5, 7, -3, 2

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

Использование цикла for…in для перебора символов в строке:

var str = 'Метод';
for (var key in str) {
  console.log(str);
}
// М, е, т, о, д

Другие технологии. Альтернативы javascript.

Возможности javascript в некоторых областях, к сожалению, ограничены.
Поэтому используются альтернативные технологии.

Java — по сравнению с javascript, java-applet’ы тяжелые, долго загружаются, но могут все. Они, как правило, используются там, где требуется почти-десктоп приложение. Очень сильно java’у потеснила технология Flash.

Java — один из наиболее распространенных в мире языков. На нем существует громадное количество библиотек, с помощью которых можно описывать сложные интерфейсы и алгоритмы. Но на интернет-сайтах это нужно редко.

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

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

Ну и для баланса — недостатки, по сравнению с javascript.

• Отдельный контейнер. Например, нельзя выделить участок текста, частично находящегося в контейнере Flash.
• Плохо индексируется поисковиками. Поисковики ходят по HTML-ссылкам, но(пока?) не кликают по ссылкам внутри Flash-приложения.

Из Flash можно легко вызвать javascript. Наоборот — сложнее, но тоже возможно, поэтому целесообразно знать обе технологии и применять их вместе.

Эти технологии призваны дополнять javascript в области коммуникации и построения интерфейсов.

Пока они все далеки по распространенности от javascript и flash.

• JavaFX — «легкая» надстройка над Java, будет работать только с Java на компьютере клиента.
• XUL — язык описания интерфейсов, удобен если писать планируете только под Mozilla. Также используется для написания десктоп-приложений.
• Silverlight — конкурент Flash от Microsoft на основе .NET. Другими OS, кроме Windows, поддерживается слабо. Не имеет широкого распространения.
• vbscript — попытка Microsoft сделать подобие javascript на основе Visual Basic. Не развивается, сильно уступает по возможностям, и, как следствие — практически не используется в современном веб-программировании.

TypedAPI: клиент-сервер для TypeScript

Recovery Mode

Предлагаю вашему вниманию TypedAPI: библиотеку API клиента-сервера для проектов, в которых фронт и бэк написаны на TypeScript. Акцент делается на максимальной простоте использования. Суть такая: вы пишете API как обычный TypeScript класс с некоторыми ограничениями, потом автоматом из класса строится интерфейс, которым будет пользоваться клиентское приложение. Также генерируется некоторая служебная информация. Остается только настроить коннекторы (доступны HTTP и WebSocket). Валидацию, хранение подключений, и др. берет на себя TypedAPI. Есть поддержка событий.

Участники

Список ниже включает всех участников-авторов 10+ строк учебника. Более полный список участников есть в GitHub.

Чтобы войти в этот список, напишите статью или пришлите исправления в учебник через PR в репозиторий.

Участник	Строк	В процентах
Ilya Kantor	51576	71.62%
xcurveballx	2164	3.00%
kichik	1653	2.30%
Alexey Pyltsyn	1431	1.99%
Dmitry G. Anderson	1428	1.98%
vadim.pimonenkov	867	1.20%
Khimtsov Anton Igorevich	573	0.80%
Daniil Stepanov	537	0.75%
alfill	477	0.66%
MrShtein	469	0.65%
Nikita Glazov	409	0.57%
Roman Konkin	386	0.54%
Alexander Shchegol	366	0.51%
webben	363	0.50%
ksimanov	335	0.47%
Metre-Ray	324	0.45%
Anton Kolesnikov	288	0.40%
smyagkov	285	0.40%
aruseni	280	0.39%
Vse Mozhe Buty	279	0.39%
rutigl	262	0.36%
Stanislav Dolgachov	261	0.36%
egorzot	260	0.36%
Aleksey Sereda	233	0.32%
phrixothrixa	218	0.30%
Anna Tuzova	217	0.30%
Mykhaliuk Vladimir	212	0.29%
Daria Serova	211	0.29%
Timur	208	0.29%
hisbvdis	200	0.28%
Alexander Ivanov	190	0.26%
Andrew Buter	185	0.26%
root	184	0.26%
Vladimir Yurchenko	182	0.25%
dima	181	0.25%
h_type	163	0.23%
Oleksandr Onufrienko	157	0.22%
Kirill255	155	0.22%
throwable	137	0.19%
Konstantin Alikhanov	122	0.17%
Alexander	114	0.16%
Alfiya	112	0.16%
Sergey	110	0.15%
Tani-Tani	109	0.15%
perepichai	101	0.14%
Nick S	93	0.13%
Kirill	92	0.13%
Daniil Kiyanov	88	0.12%
Andrey Barkalov	83	0.12%
Sergey Vakhrameev	81	0.11%
HomeDAN	78	0.11%
Siarhei Pakhuta	78	0.11%
Tagir	76	0.11%
EnchantressSam	74	0.10%
Denis Popov	72	0.10%
Brent Guffens	70	0.10%
Mikhail V. Null	68	0.09%
Anton Frolovsky	66	0.09%
Albert Abdulmanov	66	0.09%
emiklyaev	66	0.09%
Yaroslav Smirnov	64	0.09%
Zulcom	59	0.08%
Anton Loyko	59	0.08%
romaldowoho	53	0.07%
Sasha Sushko	52	0.07%
Minira Samadova	52	0.07%
mikuhann	52	0.07%
Alexey Onikov	51	0.07%
Vladimir Troyanenko	50	0.07%
masterov	47	0.07%
Danil Kolumbet	47	0.07%
adsurov	43	0.06%
Tanya Ten	41	0.06%
Dmitry Lebedev	40	0.06%
decorator-factory	39	0.05%
anastasiaeremina	38	0.05%
Simon Bliznyuk	37	0.05%
Anton Yershov	35	0.05%
eidolonzx	34	0.05%
Igor Kazakov	33	0.05%
Alexey Zakhlestin	32	0.04%
juliastetskaya	31	0.04%
Yesset	30	0.04%
webistomin	30	0.04%
Denis Blazhkun	30	0.04%
Maxim P	30	0.04%
Alexey Smolyakov	29	0.04%
Steamhammer	26	0.04%
simmayor	26	0.04%
Иван Багаев	24	0.03%
Sovgut Sergey	24	0.03%
bedrosenator	23	0.03%
Rinat Akhunyanov	23	0.03%
Mau Di Bert	21	0.03%
11un	16	0.02%
Paul	16	0.02%
Alexander Ogilvie	15	0.02%
IgorKennyPavlov	14	0.02%
Terr1bus	13	0.02%
Mojtaba Javan	12	0.02%
Alex Shakun	12	0.02%
Евгений Сергеевич Михайлов	12	0.02%
Prokhor	10	0.01%
Екатерина Пугачева	10	0.01%

Показать всех ▾

Справочники

• MDN (Mozilla) JavaScript Reference – это справочник с примерами и другой информацией. Хороший источник для получения подробных сведений о функциях языка, методах встроенных объектов и так далее.

  Располагается по адресу https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference.

  Хотя зачастую вместо их сайта удобнее использовать какой-нибудь интернет-поисковик, вводя там запрос «MDN », например https://google.com/search?q=MDN+parseInt для поиска информации о функции .

• MSDN – справочник от Microsoft, содержащий много информации, в том числе по JavaScript (который там часто обозначается как JScript). Если вам нужно найти что-то специфическое по браузеру Internet Explorer, лучше искать там: http://msdn.microsoft.com/.

  Так же, как и в предыдущем случае, можно использовать интернет-поиск, набирая фразы типа «RegExp MSDN» или «RegExp MSDN jscript».