Поскольку многие из наших студентов практически не имеют опыта программирования до того, как приступят к нашей программе, я часто помогаю им не столько в том, как применить изученный ими код, сколько в том, как подойти код в целом. Мы с коллегой преподавателем Рейн Оп'т Лендом собрали советы, которые мы неоднократно даем нашим ученикам, и вот они! Первый в этой серии: Как понять, что делает ваш код?

⚠️ Чтобы получить максимальную отдачу от этой статьи, вам необходимо знать, что такое тип (данных) на языке кода. Некоторую информацию об основных типах в JavaScript можно найти в этой статье MDN, другие типы, которые могут быть возвращены, - это массивы с элементами и объектами с свойствами и значениями .

Почему?

Есть несколько причин, по которым вы хотите хорошо читать код.

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

Есть два подхода к (новому) коду: Rubber Ducking и то, что мы назвали Parsing Code. И то, и другое необходимо освоить любому программисту.

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

Резиновый утенок

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

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

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

Как использовать. Ответьте на следующие вопросы:

  1. Какой код вы узнаете? (функции, условные выражения и т. д.)
  2. Как вы думаете, что делает этот код на основе имен функций и переменных?

Давайте посмотрим на фрагмент кода:

Сначала вам следует поискать код, который вы знаете. Вы можете увидеть что-то похожее на функцию (showGuessedLetters ()), некоторые переменные и часть, которая чем-то похожа на html.

Теперь проверьте имена функций и имена переменных. Существует класс и функция (или метод, который находится внутри класса) «showGuessed letter», который вызывается внутри другого метода: «render». Кроме того, мы видим некоторые переменные (константы), называемые догадками и буквами. Совершенно не зная кода, вы, вероятно, можете догадаться, что этот код каким-то образом используется для отображения (рендеринга) букв, которые угадал пользователь.

Код "синтаксического анализа"

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

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

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

Как использовать. Прежде всего, определите, на что вы смотрите. Это:

  1. постоянная / переменная?
  2. условно?
  3. петля?
  4. функция?
  5. код, который выглядит незнакомым?

Большая часть кода попадает в одну из этих категорий.

1. Если это постоянная или переменная

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

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

  1. Как называется эта переменная?
  2. Здесь это декларируется?

Если нет, то вы уже могли бы объяснить, что происходит:
Используется переменная age.

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

3. В чем его ценность? Какой это тип?

Прохладный! Теперь мы можем полностью объяснить, что здесь происходит:
Объявлена ​​переменная age и ей присвоено значение 42

🎓 Сможете угадать, что делает весь код?

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

2. Если это условное утверждение

Условные выражения всегда выполняются везде, где они объявлены. Они всегда содержат логическое условие и что-то, что они возвращают или выполняют, когда логическое значение имеет значение false или true. В коде это может выглядеть примерно так:

🎓 Каковы логические условия в следующих примерах кода? Что возвращается / выполняется, если логическое условие истинно? Что делать, если возвращается / выполняется, если логическое условие ложно? Если вы не знакомы с JavaScript, проверьте MDN! (Если еще, троичный, переключатель)

// else if
if (time < 10) {
    greeting = "Good morning";
} else if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}
// ternary
userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

// switch
var fruit = "bananas"
switch (fruit) {
  case "oranges"
    return "Sweet"
  case "bananas"
    return "Nice"
  default
    return "Pick another fruit"
}

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

  1. Что такое логическое условие?
  2. Что возвращается, если логическое условие истинно? Какого вида? Какое значение?
  3. Проверяется ли другое логическое значение?

В таком случае: вернитесь к первому вопросу. В противном случае спросите себя:

4. Что возвращается, если логическое значение ложно? Какого вида? Какое значение?

Ответив на все вопросы, вы можете сформулировать следующее объяснение нашего примера кода:
Если 2 больше трех, условное выражение возвращает строку 2 ›3. В противном случае, если оно ложно, возвращается строка 3 ›2.

🎓 Можете ли вы объяснить приведенные выше операторы else if, ternary и switch аналогичным предложением?

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

Если бы вы сделали из него еще одну идентификационную карту, она выглядела бы примерно так:

3. Если это петля

Петли бывают разных форм. Например:

Какого бы типа он ни был, всегда полезно задать себе следующие вопросы:

  1. Что это за петля?
  2. Когда этот цикл заканчивается?
  3. Что происходит на каждой итерации? Какого вида? Какое значение?
  4. Что происходит / возвращается в последней итерации? Какое значение? Какого вида?

В случае вышеуказанного цикла мы могли бы "проанализировать" его следующим образом:
Это цикл for. Он работает до тех пор, пока счетчик не станет 5, то есть 5 раз. В каждом цикле к строке добавляется счетчик . Наконец, он возвращает строку 01234.

Следующее действие - увидеть, где используется последний возврат. В этом случае только в console.log (str).

Это идентификационная карта петель:

3. Если это функция

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

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

Следует задать следующие вопросы:

  1. Как называется функция?
  2. Какие аргументы / параметры он принимает?
  3. Здесь это декларируется?

Если функция только вызывается, теперь вы можете объяснить:
Вызывается функция addNumbers. Он принимает аргументы 2 и 3.
Затем вы должны найти место, где он объявлен, и спросить:

4. Что меняется?

Если используются переменные, условия или циклы, вам следует проанализировать их все отдельно. Наконец, вы должны спросить:

5. Какой тип возвращается? Какое значение?

Теперь мы можем объяснить функцию, которая объявляется в приведенном выше примере:
Объявляемая функция addNumbers. Принимает параметры a и b. Это изменения: a и b добавлены друг к другу. Функция возвращает число, которое является суммой a и b. Итак, в данном конкретном случае это будет 3.

Вот все вопросы, которые помогут вам снова понять функции на диаграмме:

5. Если код вам не знаком

Пора составить свою карту истины! Выясните, что это за код. Это класс? Объект? Вы уверены, что это не одна из вышеперечисленных категорий в какой-то незнакомой форме?

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

Заключение

Эта статья должна была помочь вам лучше понять код, когда вы просто читаете его, либо в более глобальном смысле, резиновое пригвоздь, либо, в частности, построчно, путем анализа кода . Следующее, что нужно сделать - это попрактиковаться! Найдите код и объясните его!

Другие отличные способы понять, что делает код, - это добавление или удаление его элементов, промежуточные этапы ведения журнала в консоли, использование отладчика или инструментов разработчика. Убедитесь, что вы находитесь в экспериментальной git-ветке, и экспериментируйте!

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