If the console is not open, console.log will not update

When I press the reset button on my simple function, I expect to see the FIRST console.log in the console right away, displaying an array with 5 objects. After 5 seconds, the SECOND console.log should be displayed with an empty array. Everything seems to work fine in this scenario.

However, if I press the reset function but do not open the FIRST console.log in the console, then wait 5 seconds before opening both the FIRST and SECOND console.logs, I notice that both of them display empty arrays. This behavior raises the question of why this is happening.

reset: () => {
      console.log("FIRST", world.bodies)

      setTimeout(() => {
        for (let i = 0; i < objectBoxToUpdate.length; i++) {
          const rigidBody = objectBoxToUpdate[i].rigidBodyBox

          world.removeRigidBody(rigidBody)
        }
        console.log("SECOND", world.bodies)
      }, 5000)
    }

Answer №1

According to the MDN reference,

Object information is lazily retrieved, meaning the log message displays the object's content at the time of first viewing, not when it was logged. For example:

const obj = {};
console.log(obj);
obj.prop = 123;

Initial output will be {}. Yet, expanding object details will reveal prop: 123.

Therefore, deep-cloning the object is necessary to view it as it was logged. Options include using structuredClone, or plain-old JSON.parse(JSON.stringify(obj)) if structuredClone is unsupported by runtime.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The absence of a semi-colon in JSLint

I encountered an error message indicating a semicolon is missing, however I am unsure of where to place it. Here is the snippet of code: $('.animation1').delay(350).queue(function(){ $(this).addClass("animate-from-top") }); ...

What is the best way to map elements when passing props as well?

In my code, I am using multiple text fields and I want to simplify the process by mapping them instead of duplicating the code. The challenge I'm facing is that these textfields also require elements from the constructor props. import React, { Compon ...

Can webpack effectively operate in both the frontend and backend environments?

According to the information provided on their website, packaging is defined as: webpack serves as a module bundler with its main purpose being to bundle JavaScript files for usage in a browser. Additionally, it has the ability to transform, bundle, or ...

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

Issues with fundamental JavaScript client-side code

As a newcomer to the world of javascript and jQuery, I am diving into my first experiment with javascript. My initial focus has been on changing questions by clicking next or previous buttons. The goal is to create a dynamic quiz webpage that updates quest ...

Guide on integrating next-images with rewrite in next.config.js

I'm currently facing a dilemma with my next.config.js file. I've successfully added a proxy to my requests using rewrite, but now I want to incorporate next-images to load svg files as well. However, I'm unsure of how to combine both functio ...

Retrieving a basic array of strings from the server using Ember.js

Can a simple JSON array be retrieved from the server and used as a constant lookup table in an Ember application? I have a Rails controller that sends back a basic array of strings: [ "item one", "item two", "item three", ...]. I do not want these to be f ...

Utilizing JSON API data to populate Leaflet maps

I am currently working on fetching JSON data from an API call, extracting the latitude, longitude, and name variables to create a GeoJSON array, and then displaying it on a Leaflet map. Despite not encountering any errors in the console, the geojson appea ...

VueJS advisory: Refrain from directly altering a prop

When attempting to modify a prop value using the @click directive, I encountered a warning message: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed pr ...

Exploring the power of promises in the JavaScript event loop

Just when I thought I had a solid understanding of how the event loop operates in JavaScript, I encountered a perplexing issue. If this is not new to you, I would greatly appreciate an explanation. Here's an example of the code that has left me scratc ...

How can I retrieve an attribute from another model in Ember using the current handlebar in the HTML file?

I'm attempting to achieve the following: {{#if model.user.isAdmin}} <div> My name is {{model.user.name}} </div> {{/if}} within a handlebar that is being used in a controller unrelated to users: <script type="text/x-handlebars" data- ...

How can I delay the execution of "onAuthStateChanged" until "currentUser.updateProfile" has completed?

Currently facing an issue with registering users in my Vue app. When a user registers, I need to trigger the updateProfile function to add more user data. However, the problem arises when the onAuthStateChanged function in my main.js is executed before the ...

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

On my webpage, I have buttons that are generated dynamically using PHP from a MySQL table. Each button is wrapped in an anchor tag and when clicked, it triggers a Javascript function to carry out multiple tasks. One of these tasks requires extracting the ...

Animation failing to be queued properly

Here is a snippet of code that moves a heading icon back and forth when you hover over the heading: jQuery('h1.heading').hover( function(){ $icon = jQuery('.heading-icon', this); if( ! $icon.is(':animated') ){ ...

Issue with modal component triggering unexpected page reload

I'm encountering a strange issue with my modal in Vue.js. It only appears on a specific page named 'Item', but when I click on a different view, the page reloads unexpectedly. This problem seems to occur only with the route containing the mo ...

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

I'm considering whether it would be more server-efficient and effective to send data to the user in JSON format upon page load, with JavaScript handling the conversion into readable information. For instance, when a user visits my index page, instead ...

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Is it possible to create a Bootstrap 5 carousel with six items displaying at a time instead of three? I tried changing the value in the JS code, but it didn't work. Can you correct my code so that it displays six items at a time and can be variable la ...

Ways to invoke a JavaScript function using a JSON string

Suppose I make an AJAX post request using jQuery with the following structure: $.post('MyApp/GetPostResult.json', function(data) { // what should be implemented here? }); When the result is as follows: { "HasCallback": true, "Cal ...

utilizing window.location.href to direct to a page with javascript capabilities

I am currently developing my own personal website. It is designed to be very light in terms of loading and content. This website relies heavily on the use of jquery, so if a user's browser does not have JavaScript enabled, the site will not function ...

What is the best way to link my JSON object to specific properties of my data object in vue.js?

I am currently using Vue.js for my frontend development and I have a JSON object that I need to map to set certain properties in my data(). I have confirmed that the server connection is working and that the JSON object is received properly. In my comput ...