Can you explain to me how local variables are allocated memory in JavaScript? In languages like C and C++, local variables are typically stored on the stack. Is this also the case with JavaScript, or are all variables stored in the heap?
Can you explain to me how local variables are allocated memory in JavaScript? In languages like C and C++, local variables are typically stored on the stack. Is this also the case with JavaScript, or are all variables stored in the heap?
Exploring the fascinating realm of JavaScript reveals at least two perspectives:
According to the specification, JavaScript's handling of local variables differs significantly from C. When a function is called, it creates a lexical environment with an environment record, collectively referred to as the "binding object." This binding object stores bindings for function arguments, local variables, and internal functions. Each binding consists of a name (e.g., a) and its associated value. In cases where closures outlive the function call, the binding object is retained in memory due to the closure referring back to it. Essentially, everything revolves around objects in the specification.
While the theoretical aspect implies that the stack isn't utilized for local variables, modern JavaScript engines exhibit clever behavior. They may consider moving unused local variables onto the stack or even transferring actively used locals into a binding object post-function return to maintain closure accessibility. The stack, however, retains its role in managing return addresses, among other tasks.
A practical example helps illustrate this concept:
function foo(a, b) {
var c;
c = a + b;
function bar(d) {
alert("d * c = " + (d * c));
}
return bar;
}
var b = foo(1, 2);
b(3); // alerts "d * c = 9"
When foo is invoked, a binding object is created containing bindings for a, b, c, and bar. As foo assigns values to these variables, it references the relevant bindings on the current binding object. Upon returning the inner function bar, the binding object remains within memory since the closure maintains a reference to it.
Subsequently, when bar is called, a new binding object is generated specifically for that invocation, forming a scope chain with the parent binding object attached to bar. Unqualified references are first checked against the local binding object; if not found, the search extends through the scope chain until resolving at the global binding object—unveiling the mechanism behind global variables.
Implementations vary in their execution methods, with some sticking closely to the spec while others adopt more intricate approaches utilizing stacks and dynamic binding object management based on closure involvement. Ultimately, the specifics lie hidden within each implementation and can be unveiled only by inspecting their codebase.
For further insights on closures and the scope chain, refer to:
Unfortunately, the answer is not straightforward and varies depending on the context.
In recent years, there has been a significant evolution in JavaScript engines, leading to more efficient optimization strategies. The traditional understanding that local variables are stored in heap-allocated stack frames for closures to function properly no longer holds true.
Past research focused on Scheme implementations and closure optimization, which heavily influenced JavaScript. However, dealing with closures in JavaScript poses unique challenges due to its inheritance of Scheme's complexity.
Efficient garbage collection plays a crucial role in determining whether variables should be stored on the stack or heap. Various hybrid approaches have emerged to address the complexities of managing closures:
Given the rapid advancements in competing engine technologies, the landscape of memory management in JavaScript remains dynamic, yielding the ever-relevant sentiment: "it depends".
Moreover, upcoming language features like let and const aim to streamline allocation decisions for engines, especially with their emphasis on immutability. By freely copying stack values without concern for conflicting variable changes across closures, these features enhance optimization possibilities.
I've read through several posts on this topic, but I'm still struggling to identify the issue with my implementation of the Chrome contextMenu API. I simply copied the code from a tutorial on Chrome APIs, and though there are no errors, the menu ...
As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...
I have a project using VueJs and I am looking to extract JavaScript variables to create hidden fields. My goal is to set the name of the field based on the index of the variable, following a zig-zag naming schema. For example: <input type="text" nam ...
A special Form has been created to retrieve the selected value from an option. import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import { useState } from "react"; export default function Cu ...
I'm working on a dropdown menu that is populated with items using a foreach statement. When an item is selected, I need another dropdown menu to appear where specific items can be specified. First Dropdown - Categories (Completed) When a Category is ...
I have not worked with React in a while and just started learning Next.Js. I am trying to figure out how to change the background of my Navbar using Tailwind CSS based on a boolean value "current" (true/false) depending on which page the user is on with Ne ...
In my index.html.erb file, I have set up one form and one table. Using Ajax allows me to submit the form without any redirects. <%= form_for approval, remote: true do |f| %> <%= f.check_box :pass %> <%= f.submit%> <% end %> My ...
Currently, I am implementing Javascript code that adds a div to the body of pages. The purpose of this div is to always stay at the top of the document or window, regardless of the page's design and content. Everything was functioning correctly until ...
As I retrieve multiple JSON groups from an API, each group contains one or more questions objects. The task at hand is to attach each question along with its corresponding response to a textField. Based on the value of QuestionType, it will be decided whet ...
After creating a basic calculator using HTML, CSS, and JavaScript, I encountered an issue. When validating user input, the calculator currently accepts multiple operators in a row. To address this, I attempted to prevent consecutive operators by checking ...
When my react app loads, I want the images to load immediately. This involves calling the function collectionChanged(e.target.value) on application start. Inside a .jsx file, there is a function named getHomePage() which contains 4 functions. Upon calling ...
I have a set of database records that are being displayed in separate div elements on the page. Each record corresponds to a specific ID, with its information displayed inside the div. My goal is to create a delete button for each record that would allow ...
When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...
Looking for Suggestions on a New Title I am interested in using a script as the source attribute for an image, like this : <img src="img.js"/> Note: I am open to using any programming language, whether it be javascript or php. Here is what my fol ...
I am new to creating chrome extensions and currently utilizing a content script to fetch values. However, I am facing difficulty in loading these values into the popup.html. Here is the code snippet: popup.html <head> <script src ...
I am struggling with a div that contains a PDF object and draggable text: <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drop(ev) { alert("DROP"); } </script> </head> <body> <di ...
Hello, I am using jQuery load to refresh my page every second. The problem arises when I add a Google Map to the page - the map appears and disappears every second. Is there a way to fix this issue? $(document).ready(function(){ <?php if( ...
Hey there, I have a JSON object called departments. When I use console.log(departments) it displays the following data: { _id: 58089a9c86337d1894ae1834, departmentName: 'Software Engineering', clientId: '57ff553e94542e1c2fd41d26', ...
Recently, I noticed that the IOS/Safari upgrade has caused some issues with the web audio API. Check out this simple code that used to work on IOS and Safari before the upgrade, but now it doesn't work anymore. Interestingly, it still works on Firefo ...
Currently, my Express server is up and running and it's set to send an HTML file from the public folder of my project. The issue arises when I try to initiate a request from a client script linked in this HTML file to send data back to the server. Des ...