Что необходимо знать каждому Javascript разработчику

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

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

Учитывая эти аспекты, начнем…
Что такое FizzBizz тест

FizzBizz - как правило, небольшой тест, направленный на отсеивание неопытных разработчиков. Я думаю, вы будете удивленны как много javascript разработчиков не умеют писать такие тесты.

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

Помните, вероятность того, что вас попросят выполнить подобный тест на собеседовании, очень велика.

Пример классического FizzBizz теста:
for (var i = 1; i <= 100; i++) {
   if (i % 15 == 0) {
       console.log('FizzBuzz');
   }

   if (i % 3 == 0) {
       console.log('Fizz');
   }

   if (i % 5 == 0) {
       console.log('Buzz');
   }
}

Разница между == и ===

Вы, наверняка, знакомы с обоими операторами сравнения. Тем не менее, а знаете ли в чем точно отличаются эти операторы? Ваш Javascript Linter требует от вас применения оператора ===, задумывались почему?

== не сравнивает типы операндов, вместо этого он приводит их к одному типу. Такая операция имеет негативную репутацию.

console.log(24 == '24'); // true

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

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

Тот же самый пример, но с оператором ===

console.log(24 === '24'); // false

В ответ мы получаем false, так как операнды разного типа, один из них целочисленного типа, а второй строкового.

Я настоятельно рекомендую вам более подробно ознакомится с операторами сравнения в на сайте разработчиков Mozilla. Там приведены примеры их использования и более подробное описание.
Как выбирать элементы DOM без дополнительных библиотек

Наверняка вы знакомы с тем, как сделать выборку элементов при помощи jQuery, но сможете ли вы сделать тоже самое, но уже без помощи этой библиотеки?

Я имею ввиду не просто выбрать элемент с определенным ID или набором классов, я говорю о выражениях для поиска элементов при помощи jQuery.

Существует несколько нативных методов для поиска элементов в DOM, которые ни чем не уступают jQuery. Мы можем также использовать селекторы вида first-child, last-child и т.д.
Познакомимся с некоторыми из этих методов

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

    document.getElementById - классический метод для поиска элементов по их ID.
    document.getElementsByClassName - выборка элементов по значению поля className
    document.querySelector - отличный метод, который практически полностью заменяет селектор $() от jQuery, но он уже включен в Javascript. Единственное отличие заключается в том, что он возвращает только первый найденный элемент.
    document.querySelectorAll - аналог предыдущего метода, но возвращает массив найденных элементов.
    document.getElementsByTagName - этот метод поможет вам выбрать элементы по имени тега. Если вам потребуется найти все div элементы, то вам нужен именно этот метод.

Хочу также отметить, что методы querySelector и querySelectorAll можно использовать не только на всем документе, но и на отдельных элементов, то есть выборку вы можете делать в пределах одного родительского элемента.

В документации от mozilla вы найдете полное описание этих методов.
Поднятие объявлений переменных и функций

Javascript интересен тем, как он обрабатывает объявленные переменные и функции, все они автоматически поднимаются вверх области видимости. Таким образом, вы можете обратиться к ним до их объявления в области видимости (например, функции в javascript имеет собственную область видимости).

Поэтому для удобства чтения кода возьмите себе за правило ВСЕГДА объявляйте переменные в начале области видимости. Если же вы укажите ‘use strict’ в верху скрипта или функции, то при обращении к необъявленной переменной вы получите ошибку.

Большинство инструментов для проверки стиля кода, как Jshint, укажут вам на ошибку если вы не использовали ‘use strict’, исходя из этого, если вы стараетесь писать хороший код, то вам в любом случае не получится использовать переменные до их объявления. Как всегда, при возникновении вопросов, обращайтесь к документации от mozilla, там вы всегда найдете полное и исчерпывающее описание вашей проблемы.
Использование инструментов разработчика в браузере

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

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

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

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

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

Наверняка, вы уже знакомы с такими командами как console.log и console.error, но этим функционал консоли не ограничивается.

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

    console.log - используется для ведения журнала событий. Поддерживает форматирование.
    console.error - для журналирования ошибок в коде. Я использую эту команду при возникновении ошибок в AJAX запросах и в других потенциально опасных участках кода. Метод похож на предыдущий, но он выводит список вызовов стека.
    console.dir(object) - выводит форматированное содержание объекта. Как приавло, этот метод очень полезен при отладке кода.
    console.group(title) - позволяет создать группу сообщений в журнале с названием title. Таким образом вы можете группировать сообщения, например, по тому участку кода, где они генерируются.
    console.groupCollpased - аналог предыдущей команды за одним исключением. А именно, она выводит сообщения в свернутом виде.
    console.groupEnd - заканчивает ранее созданную группу.
    console.time(label) - позволяет отслеживать скорость работы участка в миллисекундах. Метод полезен при отлавливании потенциально сложных участков кода.
    console.timeEnd(label) - аналог метода groupEnd, но работает он в отношении console.time().
    copy(string) - в консоли Chrome и Firefox существует метод, позволяющий вам копировать содержимое string в буфер обмена. Очень полезный метод, попробуйте его применить.

Что именно содержится в this

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

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

Самой простой способ понять this, это принимать его за владельца или родителя метода. this всегда ссылается на родителя (parent), за исключением случаев, когда вы исползуете методы call, apply или bind.

В следующем примере this ссылается на объект window:

function myFunction() {
   console.log(this === window); // true
}
myFunction();

Наверняка у вас возник вопрос, как же this может быть равно window, если обращаемся к нему в пределах метода? Если вы знаете ответ на этот вопрос, то отлично, в противном случае читайте дальше и я постараюсь объяснить.

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

Изменение значения this на полностью новый объект (не window):

function myFunction() {
   console.log(this === window); // false
}
new myFunction();

Сторонники чистоты кода наверняка в шоке от такого примера. Мы просто ходим по верхушке айсберга с такими примерами. Как видите сами, значение this уже не равно window.

Почему так произошло?

Самое простое объяснение - во втором примере мы использовали ключевое слова new, этим самым мы создали новую область видимости и новый объект.

В следующем примере мы создадим фиктивный API для выгрузки данных из библиотеки от сервера. Мы создадим объект API с некоторыми методами.

При использовании слова new, контекст скрипта переходит от контекста window к API.

var API = {
   getData: function() {
       console.log(this === window); // false
       console.log(this === API); // true
   }
};
API.getData();

Как видите значение this полностью задается способом вызова метода. Так как функция вызывается в пределах объекта API, её родителя, то значение this ссылается на объект API.

Помните, значение this изменяется. Оно изменяется в зависимости от способа вызова, но если вы используете метод bind, то значение this остается неизменным.

Более подробно с ключевым словом this в javascript вы можете познакомится в статье Quirksmode и документации от Mozilla.

‘use strict’;

Как мы уже указали ранее user strict используется для применения более строгой версии языка javascript. Эту директиву следуют применять во всех скриптах.

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

В документации от mozilla существует целая статья на эту тему, я настоятельно рекомендую вам познакомиться с ней.
Разные виды циклов

Вы будете удивлены, но я встречал огромное количество разработчиков, которые не знали как правильно использовать цикл for и абсолютно не слышали о других типов циклов. А уметь применять цикл на массиве или объекте - очень важный навык для разработчика. Не существует четкой инструкции когда и какой применять тип цикла, но следует ориентироваться в этом вопросе. Наверняка вы знакомы с for и while, но как насчет других?

Список циклов в javascript:

    for
    for..in
    for..of (добавлен в ES6)
    forEach
    while
    do..while

Цикл for

Абсолютно обязательный цикл, который необходимо знать и понимать. ОН выполняет свое тело при выполнении условия 2.

for (условие 1; условие 2; условие 3) {
   // Ваш код
}

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

Условие 2 - это условие применяется для определения продолжать цикл или нет. Вы, наверняка, будете здесь сравнивать ваш счетчик с размером массива. Если значение сравнения true, то цикл продолжается. Если вы прерываете цикл внутри при помощи break, то это условие можно пропустить.

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

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

Приведем пример.

var person = {firstName: 'Dwayne', lastName: 'Charrington', age: 27, starSign: 'Aquarius'};

// The below loop will output:
// "Dwayne"
// "Charrington"
// 27
// "Aquarius"

for (var p in person) {
   if (person.hasOwnProperty(p)) {
       console.log(person[p]);
   }
}

Цикл for...of

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

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

var fruits = ['orange', 'apple', 'squash', 'pear'];

for (var fruit of fruits) {
   console.log(fruit);
}

Большой плюс этого типа цикла заключается в том, что нам больше не надо создавать указатель и следить за длиной массива, чтобы полностью пройти по его элементам.
Цикл forEach

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

Он работает только с массивами, не объектами. Он выгоден тем, что вам не приходится создавать дополнительные переменные, которые в итоге только загрязняют ваш код.\

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

var fruits = ['apple', 'banana', 'orange', 'grapes', 'pear', 'passionfruit'];

// The three values on the callback function are:
// element - The element being traversed
// index - The current index of the item in the array starting at 0
// array - The array being traversed (probably mostly irrelevant)

fruits.forEach(function(element, index, array) {
   console.log(index, element);
});

Иногда вам нужно просто пройти по всем элементам массива и, возможно, внести в них некоторые изменения. Его поведение похоже на jQuery.each.

Один недостаток такого типа циклов - его нельзя прервать. Если вам требуется создать цикл по правилам ES5, то воспользуйтесь методом Array.every, познакомиться с которым вы можете в документации mozilla.
Цикл while

Цикл while аналогичен for, но он принимает только один параметр - само условие, по которому цикл определяет продолжать итерации или прекратить их.

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

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

var i = 20;

while (i--) {
   console.log(i);
}

Цикл do...while

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

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

На этом разница не заканчивается. Цикл while обрабатывает условие до выполнения итерации, а do...while после.

Как всегда в документации от mozilla вы найдете подробное описание такого вида циклов.
Базовые методы и задачи

В javascript существуют базовые методы, о которых следует знать. В отношении работы с массивами и строками, javascript предлагает большой набор встроенных методов. Мы коснемся только массивов и строк, объекты оставим на потом.

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

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

    String.replace(regexp | что заменить, на что заменить, callback) - позволяет заменить часть строки, допускается применение регулярных выражений.
    String.concat(сторока 1, строка 2...) - соединение нескольких строк в одну.
    String.indexOf(value) - метод позволяет найти порядковый номер символа искомой части строки, -1 - если строка не найдена
    String.slice(startIndex, endIndex) - возвращает участок строки от startIndex до endIndex
    String.split(разделитель, лимит) - разбивает строку на массив по символу разделителя, максимальной длиной лимит.
    String.subsctr(startIndex, length) - возвращает часть строки начиная с startIndex длиной length.
    String.toLowerCase - переводит все символы строки в нижний регистр
    String.toUpperCase - перевод все символы строки в верхний регистр
    String.trim - удаляет пробелы из начала и конца строки

Работа с массивами

Вам очень часто придется встречаться с массивами. Они отлично зарекомендовали себя как способ хранения данных. Эти методы точно стоит знать любому разработчику javascript, не следует искать их в google.

    Array.pop -возвращает последний элемент и удаляет его из массива.
    Array.shift - возвращает первый элемент и удаляет его из массива.
    Array.push(val1, val2) - добавляет одно или несколько значений в конец массива. Возвращает новую длину массива.
    Array.reverse - зеркально изменяет порядок элементов массива.
    Array.sort([функцияСравнения]) - позволяет сортировать массив при помощи собственной функции.
    Array.join(separator) - Возвращает строку, состоящую из элементов массива, разделенный символом separator (по-умолчанию - запятая).
    Array.indexOf(value) - возвращает индекс элемента в массиве, -1 если элемент не найден.

Это не полный список методов для работы с массивами. С другими вы можете ознакомится в документации от mozilla. Начиная с ES6 были добавлены очень интересные методы.
Разница между call и apply

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

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

При помощи метода apply вы можете передать аргументы в виде массива и изменить значение this.

Если вам нужно просто передать массив в качестве аргументов методу, то начиная с ES6 добавлен расширенный (spread) оператор. Он не позволяет изменять значение this. Познакомиться с ним вы сможете, как всегда в официальной документации от mozilla.

Пример call:

function myFunc() {
   console.log(arguments);
}

myFunc.call(this, 1, 2, 3, 4, 5);

Пример apply:

function myFunc() {
   console.log(arguments);
}

myFunc.call(null, [1, 2, 3, 4, 5]);

Знакомство с библиотеками и фреймворками

На сегодня самыми заметными представителями javascript фреймворками являются AngularJS, React.js и Ember. Конечно существует еще целый ряд других.

Так как web-приложения становятся все больше и больше эти библиотеку упрощают работу с ними. Стоит понимать, что сейчас знать одного jQuery явно недостаточно. В большинстве вакансий выставляется знание дополнительных javascript библиотек, как основное требование.
Node.js

Вне сомнений Node.js занимает твердые позиции. Практически любой фронт-енд инструмент построен на node.js и использует npm (менеджер пакетов node), если с ним незнакомы, то настоятельно советую исправить это упущение. Так как node.js использует javascript, то изучить его не представляет особых трудностей для тех, кто уже знаком с этим языком. У вас больше времени уйдет на настройку пакетов node, чем на написание самого кода.

Лично я считаю, что с Node должен быть знаком каждый разработчик в 2015 году. Я не говорю о глубоком познании, достаточно уметь применять его для серверной разработки, прототипирования, тестирования и т.д.

Существует fork node.js под названием IO.js, на сегодняшний день они практически аналоги, да и в конце концов вы просто пишите на Javascript за исключением небольших отличий.
Тестирование

Когда-то мы совсем не тестировали javascript код, так как не считали это необходимым. Но скрипты становятся всё больше и больше благодаря AngularJS и Node.js.

Javascript развивается, а объемы скриптов увеличиваются и тестирование становится жизненно необходимым. Если вы не тестируете свой код, то вы поступаете неправильно. Мой любимый тестировщик - Karma. Существуют и другие, но именно этот зарекомендовал себя лучше всех при работе с AngularJS. А если он подходит для AngularJS, то он подходит и мне.
Инструменты

Быть javascript разработчиком в 2015 году означает не только отличное знание языка, но и большого числа инструментов для работы с ним.

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

Вот набор инструментов, о которых стоит помнить: Gulp, Webpack и BabelJS. Существует намного больше инструментов, но такие инструменты как Gulp и Grunt значительно помогают вам в разработке и управлении javascript приложениями.

Прошли те дни, когда вы просто скачивали javascript файл и добавляли его на свою страницу. Теперь мы используем менеджеры пакетов NPM или Bower.

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

Инструменты javascript идут рука об руку при разработке изоморфного Javascript (код, используемый как на стороне клиента, так и сервера). ECMAScript 6, он же ES6, он ESNext

Браузерам предстоит еще реализовать большую часть функционала ECMAScript 6. Но уже сегодня вы можете использовать новинки от ES6 при помощи компиляторов javascript. Познакомьтесь с новыми API и методами: строки, массивы и другие метода как WeakMaps, Символы и Классы. Следует всегда быть в курсе грядущих изменений.
Заключение

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