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,

Where is i coming from and what is it?
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);

How is drawSnake being called without passing in its parameters?

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. — Claies
– Claies, Commented Jul 24, 2018 at 23:47

dave · Accepted Answer · 2018-07-24 23:47:21Z

2

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.

answered Jul 24, 2018 at 23:47

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Esther Cuan · Accepted Answer · 2018-07-24 23:47:57Z

1

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)

answered Jul 24, 2018 at 23:47

Esther Cuan

3873 silver badges19 bronze badges

Comments

Brad · Accepted Answer · 2018-07-24 23:50:01Z

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

Collectives™ on Stack Overflow

Having trouble with Javascript function parameters

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related