CODEWITHSUNDEEP
javascriptdom-events
Guido Salimbeni
Guido Salimbeni

Reputation: 54

JavaScript function parameter - Beginner Question

I am new to JavaScript and coming from Python. I am having a hard time to understand where the 'rect' is coming from and how it is passed in the following script (that I took from tracking.js): Any help would be really appreciated and I believe this question would probably also help any other coming from Python.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
  <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
  <script>
  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);
  </script>
</body>
</html>

Upvotes: 1

Views: 68

Answers (3)

slawckaJS
slawckaJS

Reputation: 61

'rect' is name for item you return by iterating with forEach. You can call it whatever you want, it just so happened someone called it rect.

you can call it anything you want

arr.forEach(name ()=> console.log(name))
arr.forEach(yourDogsName ()=> yourDogsName.height)

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074238

When you call forEach on an array, the code in forEach calls the function you pass it "for each" entry in the array, passing the entry to the function (along with a couple of other things). So rect is each entry in the array, in order.

Internally, leaving out some details, forEach looks about like this:

function forEach(callback) {
    // Here, `this` is the array `forEach` was called on
    for (let index = 0, len = this.length; index < len; ++index) {
        callback(this[index], index, this);
//               ^^^^^^^^^^^--- this is received by your callback as `rect`
    }
}

(One of the main details I left out for clarity is forEach's thisArg and calling callback with a specific this value.)

Live example logging each step:

function pseudoForEach(callback) {
    console.log("Start of pseudoForEach");
    for (let index = 0, len = this.length; index < len; ++index) {
        console.log(
            "Calling callback with: this[index] = " + this[index] +
            ", index = " + index + ", and this = (the array)"
        );
        callback(this[index], index, this);
    }
    console.log("End of pseudoForEach");
}

Object.defineProperty(Array.prototype, "pseudoForEach", {
    value: pseudoForEach,
    configurable: true,
    writable: true
});

var a = ["one", "two", "three"];
console.log("About to call pseudoForEach");
a.pseudoForEach(function(rect) {
    console.log("In callback, rect = " + rect);
});
console.log("Done with pseudoForEach call");
.as-console-wrapper {
  max-height: 100% !important;
}

I second Jaromanda X's recommendation, MDN is a good resource for JavaScript information (and HTML and CSS).

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

The rect variable represents an item in your array event.data.

When the .forEach() method is called on the array (event.data), this method is internally iterating each item of the array, and, during each iteration, passing that current array item to a callback function that you supply which in your case is the function:

function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
}

So, rect is the current item of the current iteration of event.data. Hope that helps!

Upvotes: 0

Related Questions