What’s the difference between a boolean as primitive and a boolean as property of an object?

by

All arguments are passed by “value” in JavaScript. This means that when an argument is passed, a copy of what’s stored in the variable is passed.

Primitives (like booleans) store the actual data they represent and so, when a primitive is passed, a copy of the data is sent, resulting in two copies of the data. Changes to one, won’t affect the other.

But, when you assign an object to a variable, the variable stores the memory location for where that object can be found, not the object itself. Passing an object as an argument results in a copy of the memory address being passed. In these cases, you may wind up with two variables that store the same memory address, so no matter which variable you use, the same one underlying object is affected.

In your scenario, you could certainly make it work with just a boolean variable, but it appears that the tutorial wants to encapsulate that into an object so that copies of the boolean data won’t be floating around and there will be less chances of accidentally changing one variable but not another.

Here’s some basic examples:

// This function takes a single argument, which it calls "input"
// This argument will be scoped to the function.
function foo(input){
  // The function is going to alter the parameter it received
  input = input + 77;
  console.log(input); 
}

var input = 100;  // Here's a higher scoped variable also called "input"

foo(input);       // We'll pass the higher scoped variable to the function

// Now, has the higher level scoped "input" been changed by the function?
console.log(input);  // 100 <-- No, it hasn't because primitives pass a copy of their data

// ************************************************

// Now, we'll do roughly the same thing, but with objects, not primitives
function foo2(obj){
  obj.someProp = 100;
  console.log(obj.someProp);
}

var obj = {
  someProp : 50
};

foo2(obj);

// Here, we see that the original object has been changed by the funciton we passed it to
console.log(obj.someProp);

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. Accessing JPEG EXIF rotation data in JavaScript on the client side
  4. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  5. HTML5 Canvas Resize (Downscale) Image High Quality?
  6. Resize image with javascript canvas (smoothly)
  7. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  8. Why is requestAnimationFrame better than setInterval or setTimeout
  9. HTML5 Canvas vs. SVG vs. div
  10. HTML5 Canvas toDataURL returns blank
  11. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  12. How to upload image into HTML5 canvas
  13. Cropping images in the browser BEFORE the upload [closed]
  14. Capture frames from video with HTML5 and JavaScript
  15. Web Workers and Canvas
  16. How to free up the memory in JavaScript
  17. Load image from url and draw to HTML5 Canvas
  18. Canvas image masking / overlapping
  19. How to pixelate an image with canvas and javascript
  20. Total canvas memory use exceeds the maximum limit (Safari 12)
  21. HTML canvas – drawing disappear on resizing
  22. Draw HTML5/Javascript Canvas Path in Time
  23. How to resize then crop an image with canvas
  24. Can I create multiple canvas elements on same page using p5js
  25. Calculate FPS in Canvas using requestAnimationFrame
  26. How to embed an input or textarea in a canvas element?
  27. How to detect shape on a transparent canvas?
  28. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  29. Open HTML5 date picker on icon click
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment