JavaScript

Объясните кусок кода змейки на js

Решил разобраться в работе змейке и затруднение вызывает данный кусок кода:
 snake.tails.forEach(function(el, index){ 
if (index == 0) {
context.fillStyle = "#FA0556";
} else {
context.fillStyle = "#A00034";
}
context.fillStyle = '#fa0556'
context.fillRect(el.x, el.y, grid, grid);
});
У меня постоянно проблемы с аргументами функций и тут снова. Я не понимаю каким образом высчитывается index элемента массива и el. их просто передали в функцию а дальше ссылаются на index чтобы узнать номер этого элемента... как? тут ведь даже не строчек по типу:
 el++;
index++;
Вобщем, объясните как работает el и index, заранее спасибо
Чтобы понять принцип работы функции forEach, попробуйте наглядный пример:
 const array1 = ['a', 'b', 'c']; 
array1.forEach((element, index) => console.log(element + " в позиции " + index));
Пример основан на коде отсюда:
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Там есть окошко, куда можно вписать любой код и запустить.
НА
Николай Андрианов
71 104
Лучший ответ
Александр Дерюгин Спасибо, разобрался!
Твой массив snake.tails отвечает за индекс. Потому что forEach - это цикл, который перебирает массив до конца и не может быть остановлен... вот ему и не требуется увеличение индекса, потому что индекс - это возвращенное значение из цикла, равно как два других возвращенных им же элемента - элемент, индекс, массив.
Димон Львов
Димон Львов
65 469
Потому что это цикл forEach. Ключ-значение, перебор массива
Александр Дерюгин то-есть это встроенные методы и для них просто задаются названия?
Метод forEach находит элемент и индекс и передаёт эти данные в тобою заданную функцию. Твоя задача лишь написать функцию, понимая в каком порядке расположены эти аргументы. Для forEach это элемент, индекс и массив.
forEach - встроенный метод прототипа массива. Работает так же как и for i или for of, но при этом в аргументах передает текущий перебираемый елемент массива и индекс перебираемого елемента массива от 0 до "Number.MAX_VALUE"
element - текущий елемент перебора.
index - индекс элемента в массиве который перебираем.

 snake.tails.forEach(function(element, index) {   

if (index == 0) { // Если индекс массива snake.tails равен 0 тогда мы красим его в #FA0556.

context.fillStyle = "#FA0556";

} else { // Иначе красим его в #A00034

context.fillStyle = "#A00034";

}

context.fillStyle = '#fa0556' // из-за этой строки тот код что сверху бесполезен.

context.fillRect(el.x, el.y, grid, grid); // el.x - позиция элемента (блока хвоста) по X. el.y - тоже что и el.x но позиция по Y

});