Having trouble with Javascript function parameters

Question

This code is for drawing a snake to make the snake game. I am having trouble understanding the parameters of the drawSnake function and calling the function

 //ctx is a reference to the id of the canvas
 var ctx = document.getElementById('ctx').getContext('2d');
 var WIDTH = 500;
 var HEIGHT = 500;
 var snakeList;
 ctx.font = "20px Calibri";
 var snakeBody = {
 width:20,
 height:20,
 color:'green'
 };
 drawSnake = function(sb,i) { 
 ctx.save();
 if (i == 0)
 ctx.fillStyle = 'black';
 else
 ctx.fillStyle = snakeBody.color;
 ctx.fillRect(sb.x,sb.y,snakeBody.width,snakeBody.height);
 ctx.restore();
 }
 startGame = function() {
 snakeList = [{x:220,y:200},
 {x:210,y:200},
 {x:200,y:200}];
 snakeList.forEach(drawSnake);
 }
 startGame();

in drawSnake function,

1. Where is i coming from and what is it?
2. How is sb somehow taking values from snake List when snakeList is not called in the drawSnake function

in startGame function, where snakeList.forEach(drawSnake);

1. How is drawSnake being called without passing in its parameters?

• mentallurg: Analyze it in debugger.
• Claies: look up forEach. w3schools.com/jsref/jsref_forEach.asp. forEach iterates through the array, and for each object in the array, passes that object and the array index value as the two parameters to the function.

Answer 1

In javascript forEach assumes the argument to forEach is a function, which takes the parameter callback:

arr.forEach(function callback(currentValue, index, array) {
 // your code
});

Because drawSnake is a function, when you do:

snakeList.forEach(drawSnake);

for each item in snakeList, the function drawSnake will be called with sb set to the current item, and i set to the index of that item.

Answer 2

i is coming from the drawSnake function. Usually, people name i a variable to denote an index; that serves to indicate a value or quantity.

forEach will call drawSnake by iterating over the snakeList array and passing each x and y value to drawSnake.

From MDN documentation:

The forEach() method executes a provided function once for each array element.

The first argument to forEach() is a callBack function (so in this case, drawSnake) and the second argument is the index of the current item (hence i)

Answer 3

The key here comes down to what Array.forEach does. Try this example.

const a = [1, 2, 3, 4, 5]
a.forEach(function (x) {
 console.log(x);
});

Array.forEach takes a parameter, a function, and executes that function for every item in the array. In this example, console.log() will be called 5 times, once for each item in the array. In the console, you'll see every element, 1, 2, 3, 4, 5, on its own line in the console.

In your code, we have an array of objects assigned to snakeList. When you call snakeList.forEach(), it's going to execute whatever function is passed in for each element. Rather than an anonymous function like in my example, your code is calling drawSnake. It's effectively like doing the following:

drawSnake({x:220,y:200}, 0);
drawSnake({x:210,y:200}, 1);
// etc.

The second parameter passed to the function callback for forEach is the index of the item in the array.

See also: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach