yuriytkachenko

Посмотрите этот вопрос, там есть хороший ответ.

какие паттерны применяются чаще всего на практике и где

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

1. Модули (делим код на независимые части)
   
2. Фабрики (для компонентов интерфейса)
   
3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
   
4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
   
5. Наблюдатели (для сбора происходящих событий в одном месте)
   
6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
   
7. Стратегии (если действуем в зависимости от прилетевших данных)
   

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

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

Приведу пример, который сам на днях использовал. К сожалению не на JS, а на PHP и он не такой простой, но возможно немного вам поможет:

public function post()
    {
        if (!$this->parent()) {
            return  $this->commentable_id;
        }
        else {
            return $this->parent()->post();
        }
    }

В общем суть такая, что нужно было уведомлять пользователя, если кто-то прокомментировал его пост, при этом, на сайте многоуровневая система комментариев. И если кто-то написал ответ на комментарий, то он уже никак не связан с постом, а автора уведомить всё таки нужно. Если комментарий написан не как ответ на чей-то, а как просто коммент под сам пост, то у него parent вернёт null, а иначе вернёт комментарий, ответом на который он является. И с помощью рекурсии я реализовал получение id поста, на который кто-то оставил коммент: в момент создания комментария вызывается этот метод post (функция, если так понятнее), которая, если это коммент первого уровня, вернёт id поста, а если нет, то вызовет этот же метод, но уже у комментария, ответом на который является данный. И эта функция будет вызываться сколько угодно много раз, пока не дойдёт до высшего уровня и не получит оттуда id поста.

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

вот вам попроще пример

var factorial = function(n) {
    if(n == 0) {
        return 1
    } else {
        return n * factorial(n - 1);
    }
}
factorial(num);

И вообще какие еще варианты могут быть решения этой задачи? Кроме цикла for? Несмотря на то что в задании пишет именно с помощью него решить задачу. Просто для себя чтобы знать другие варианты.

document.getElementById('root').appendChild(
  document.createTextNode(
    Array.from(new Array(401), (_, i) => i).slice(4).join(' ')
  )
);

вынести вывод за цикл.

var out = document.getElementById('root');
var arr = [];
for(i=4;i<=400;i++){
    arr.push([i]);
}
 out.innerHTML = out.innerHTML + arr + " ";

var out = document.getElementById('root');
var arr = [];
for(i=4;i<=400;i++){
    arr.push(i);
}
out.innerHTML = out.innerHTML + arr.join(" ") + " ";

первый вариант:

var mass = [1,2,3,4,5,6,7,8,9,10];
for(i=0;i<mass.length;i++){
    document.getElementById('root').innerHTML += mass[i];
}

второй вариант:

var r = document.getElementById('root');
var mass = [1,2,3,4,5,6,7,8,9,10];
for(i=0;i<mass.length;i++){
    r.innerHTML += mass[i];
}

Но разумеется можно короче

var mass = [1,2,3,4,5,6,7,8,9,10];
for (document.getElementById("root").innerHTML = mass.join(","); 0;)

Не нужно делать каждый раз перезапись DOM. Делайте это 1 раз, но в процессе работайте с переменной.

https://jsfiddle.net/adpmb230/

[1,2,3,4,5,6,7,8,9,10].forEach(function(i){
document.getElementById('root').innerHTML += i;

});

for(i=0;i<mass.length;i++){
    document.getElementById('root').innerHTML += mass[i];
}

var mass = [1,2,3,4,5,6,7,8,9,10];

for(i=0;i<mass.length;i++) {
    document.getElementById('root').innerHTML = document.getElementById('root').innerHTML + mass[i] ;
}

Это jsx код который перед выполнением компилируется в JavaScript
См. JSX — подробности

в моем понимании это что-то на подобии такого: a= b+c или a=b.

Выражение - это любая конструкция, которая вычисляется в значение. Одна переменная написанная просто так - это тоже выражение:

const a = 1;
a; // это выражение

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

Доброй ночи!
Столкнулся с этой же проблемой, и нашел такое решение
https://www.google.com/advanced_image_search

что удобней

var s = 10;
function x(){
  return 10 +s;
}
var res = x();

или

function x( y ){
  return y +s;
}
var res = x(10);

И как уже писали в ответах, ну бедешь же ты переписывать тот же console.log() каждый раз log такая же функция которой ты передаешь аргумент.

Чтобы при вызове функции можно было дать ей переменную, которая будет использоваться
К примеру, у вас есть код, который обрабатывает строку и возвращает результат
Вы же не будете писать его всегда? Поэтому создается функция, а в параметр передается та самая строка для обработки
И эту функцию можно вызвать из любой части кода, каждый раз с новой строкой

Как-то так

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

Просотой пример. У нас есть программа, в которой несколько раз генерируются случайные числа.
Для того что бы получить число в диапазоне от min до max нужно написать такой код:

let min = 0;
let max = 5;
let rand = Math.round(min - 0.5 + Math.random() * (max - min + 1));

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

function randomInteger(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

Здесь аргументы min и max. Теперь мы в своей программе можем получить случайное число в любом диапазоне, который укажем в аргументах функции.
let rand = randomInteger(0, 5);

А зачем в калькуляторе клавиатура? Давайте сделаем миллиард копий калькуляторов где каждый будет делать операции только с жестко заданными цифрами зашитыми в память. Зачем вообще юзеру давать возможность вводить свои цифры.

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