Изучаем JavaScript

"Плохие программисты думают о коде.  Хорошие программисты думают о структурах данных и их взаимосвязях" Линус Торвальдс, создатель Linux Очередь и стек — основные структуры данных в программировании. Стек можно сравнить со стопкой подносов в столовой, которые складывают один на другой. Поднос, который попал в стопку последним, возьмут в первую очередь. Стек  работает по принципу LIFO  "последним пришел — первым ушел" (last in first out). Над стеком можно осуществлять две операции: push (занесение данных) и pop (изъятие данных). Так устроен стек Очередь (queue) напоминает обычную очередь. Она работает по принципу FIFO "первым пришел — первым ушел" (first in first out). Над очередью можно осуществлять две операции: enqueue   — добавлять элементы в конец очереди и dequeue — удалять первый элемент очереди. Так устроена очередь Чтобы реализовать операцию enqueue , необходимо: убедиться, что очередь, не переполнена,  доба...

Псевдомассив arguments Рассмотрим простейшую функцию для определения суммы чисел: function fn(a, b) {   return a + b; } fn(2, 4)  // 6 Предположим, нам нужно передать в функцию неизвестное количество аргументов. Когда функция запускается, внутри неё создаётся переменная arguments . Переменная arguments доступна исключительно внутри функции. Она содержит псевдомассив аргументов. function fn() {   return arguments; } fn(2, 4, 10, 7) // [2, 4, 10, 7] В arguments всегда находится актуальное состояние аргументов. Убедимся в этом: function fn() {   var arr = [];   for (let i = 0; i < arguments.length; i++) {     arr.push(arguments[i]);   }   return arr; } fn(2, 4, 10, 7) // [ 2, 4, 10, 7 ] Хоть  arguments похож на масив. и браузер его показывает как массив, на самом деле это объект с числовыми ключами. То, что консоль браузера выводит как [2, 4, 10, 7] на самом деле больше похоже на { 0: 2, 1: 4...

Начиная с EcmaScript 6 в JavaScript появились классы. Классы являются теми же объектами, с небольшой разницей имя класса всегда записывается с большой буквы, внутри класса описываются его методы. методы класса запятыми не разделяются, у каждого класса по умолчанию есть свойство constructor. в котором этот класс описывается, для каждого класса можно создавать объекты этого класса Пример кода class Human {   constructor(name, lastName) {     this.name = name;     this.lastName = lastName;   }   get() {     return this.name + " " + this.lastName;   } } const human = new Human("Peter", "Ivanov"); human.get()   // "Peter Ivanov"  Конструктор не обязателен class Human {    get(name, lastName) {     return name + " " + lastName;   } } const human = new Human(); human.get("Peter", "Ivanov") // "Peter Ivanov" Классы позволяют наследовать созданные с их помощью метод...

1. Как увидеть с какими аргументами запускаются функции в проверочных тестах? Просто верните этот аргумент function isValidIP(str) {       return str;  } 2. Как узнать какие ката уже пройдены, какие нет Для кат. которые ещё ни разу не проходились, будет написано Train , если кату уже пытался решать – Train Again . Если ката уже решена вами, под катой есть надпись View Solutions , и на странице решений можно посмотреть своё – My Solutions . Если ката не решена вами, надпись будет Unlock Solutions . Кроме того, решённые и нерешённые каты можно увидеть в своём профиле вкладка Solutions 3. kata scan Быстро увидеть пройденые ката из списка позволяет сайт https://auseika.github.io/kata-scan/ В левое окно копируем список ката и свой юзернейм из адресной строки codewars В правом окне появляются отметки о решённых и нерешённых ката

function Sum(a) {   return function(b) {     return a + b;   } } Sum(1)(2)  // 3 Sum - функция высшего порядка. Так называются функции одним из аргументов или результатом вызова которых являются другие функции. Возможность передавать функции другим функциям в качестве параметров и использовать функции в качестве значений, возвращаемых другими функциями, является основой функционального программирования.

Строки, числа, логические значения в JavaScript передаются по значению. Такое поведение удобно и предсказуемо. Пример: var a = 2; b = a; b+= 1; console.log(a, b) // 2 3 a по-прежнему равно двум, b равно трём, изменения в b не затрагивают а , а изменения в а не влияют на b . Жизнь легка и прекрасна. Объекты и массивы (которые тоже объекты) передаются по ссылке. Это значит, что где-то есть область памяти, где хранится созданный ранее объект и передать мы можем только ссылку на объект. Из этого следуют неожиданные вещи. 1. Один объект не равен другому точно такому же объекту. var a = []; var b = []; a == b   //   false У а одна область памяти, у b – другая. а не равно b . По той же причине {a: 2} == {a: 2} // false 2. Изменения в одном объекте затрагивают другой объект (на самом деле тот же самый, но мы об этом можем не догадываться). var a = [1, 2, 3, 4]; var b = a; b.push(5); console.log(a)  //    [ 1 , 2 , 3 , 4 , 5 ] ...

ECMAScript 6 предложил два новых оператора let и const, они могут во многих случаях заменить привычное var, а руководство по стилю кода AirBnB https://github.com/airbnb/javascript упоминает правило no-var. Впрочем, использование var не является криминалом, а JavaScript-гуру Кайл Симпсон, автор книги  "You Don't Know JS" написал статью в которой утверждает, что использование let имеет как преимущества, так и недостатки For and against `let` (статья, кстати, хорошая и умная). Его аргументы в пользу использования var: 1. У var и let свои области действия, отказываясь от использования какой-то из этих переменных мы добровольно сужаем свои возможности 2. У var функциональная область видимости, у let – блочная. если нужно, чтобы переменная была видна исключительно в пределах блока, используем let, если не исключено, что переменная понадобится в каком-то месте функции – var. 3. Для идеального кода действительно можно обойтись использованием исключительно let. Но так как...

hoisting это поднятие или всплытие переменных (не путать с всплытием событий, там про другое). Ещё до выполнения кода интерпретатор JavaScript загружает в память функции, объявленные как function declaration а также объявления переменных и функций function expression , но не их значения. В результате функцию function declaration можно вызвать ещё до того, как до неё дойдёт построчное выполнение кода summ(3, 4);   // 7 function summ(a, b) {   return a + b; } Функции function expression при таких условиях работать не будут: summ(3, 4);   // TypeError var summ = function(a, b) {   return a + b; } Значение объявленной через   var переменной переменной или function expression до того как интерпретатор дойдёт до её кода, равно undefined . Кстати, переменные, объявленные через let , не всплывают. Задача. Каков результат выполнении следующего фрагмента кода? var myname = "Дядя";  function fn() {    console.log(myname);...

Тема "Методы объектов и контекст вызова" в учебнике Кантора казалась мне невероятно сложной и непонятной. Сергей Мелюков сумел объяснить её очень доступно и доходчиво. у человека определённо талант, такое понятное изложение сложного материала встречается не часто. https://www.youtube.com/watch?v=5l01s6Vkqp0   This This это ключевое слово, которое указывает на объект, в контексте которого вызывается функция. Не из которого вызывается, а в контексте которого вызывается. Это важно. Чаще всего эти понятия совпадают, но не всегда. Контекст вызова функции можно изменить и тогда функция будет вызываться из одного объекта, но указывать при этом на другой объект. Пример: var a = {   prop: "a",   fn: function () {     return this.prop;   } }; var b = {   prop: "b",   fn: function () {     return this.prop;   } }; a.fn()   // "a" b.fn()   // "b" Пока всё просто: есть два объекта а и b, ...

Задание здесь https://jsfiddle.net/5evth11x/ Решение https://colorrect.github.io/ Приятное и не очень сложное задание, в котором нужно изменить цвет блока при клике по вложенному в него элементу. Цвет элемента указывает атрибут data-color Общий вид кода:  var a = document.querySelectorAll('li a'); var container = document.querySelectorAll('.container'); var animateAll = document.querySelector('.animate-all'); for (var i = 0; i < a.length; i++) {   a[i].addEventListener('click', function () {     this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor = this.dataset.color;   }); } animateAll.addEventListener('click', function () {   var l;   for (l = 0; l < a.length; l++) {     setTimeout(function (l) {       for (var j = 0; j < container.length; j++) {         container[j].style.backgroundColor = a[l].dataset.color;     ...

Оператор расширения позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов (при вызовах функции) или ожидается несколько элементов (для массивов) Источники http://www.codewars.com/kata/572ab0cfa3af384df7000ff8 https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator Да. Это базовые понятия JavaScript. Правда, пока ничего непонятно Смотрим примеры: function plus(a, b, c, d, e) {   return a + b + c + d + e; } var arg1 = [1, 2, 3, 4, 5]; plus(...arg1); // 15 Функция складывает пять чисел. Ок. Ей предлагают в качестве аргумента массив из пяти чисел. Так написать нельзя: plus([1, 2, 3, 4, 5]); Потому что массив это только один аргумент. Остальные аргументы отсутствуют и функция считает их undefined . В результате получится что-то вроде "1,2,3,4,5undefinedundefinedundefinedundefined" Печальное зрелище.   Получается, что если нужно предложить в качестве аргумента массив, присв...