Can you please explain the distinction between the statements var a = b = 2 and var a = 2; var b = 2;

Question

Can you please explain the distinction between the statements var a = b = 2 and var a = 2; var b = 2;

Whenever I try to declare a variable within a function, I encounter an issue.

var b = 44;
function test(){
    var a = b = 2;
}

However, the following code works without any problems:

var b = 44;
function test(){
    var a;
    var b = 2;
}

The global variable b is being overridden by the local one.

I have not been able to locate any documentation explaining this behavior.

Is there any official documentation addressing this issue?

Demo: http://jsfiddle.net/uq4nxk1k/1/

javascript variables global-variables

Answer 1

Answer №1

If you're looking for documentation, I'm not sure where to find it. However, let me explain the result you received:

Local > Global

When you declare a global variable, it can be accessed anywhere in your file. In the "test()" function, when you write:

var a = b = 2;

You are creating a new variable 'a' that takes the value of the global variable 'b' and simultaneously changes the value of 'b' to 2 - effectively overriding its value.

Similarly, when you write (inside 'test()'):

var a, b;

or

var a; 
var b;

You are declaring two variables that are local to your function. When you assign a value to 'b', due to the principle of local being greater than global, you may encounter two scenarios:

If you console.log(b) inside 'test()', you will get 2.
If you console.log(b) outside 'test()', you will get 44.

Declaration != Assignment

Remember:

'var a, b;' is a declaration.
'a = b = 25;' is an assignment (essentially a double assignment).
'var a = b = 25' combines declaration and assignment into one step.

I hope this explanation helps! Feel free to ask if anything is unclear or if you need further clarification. :)

Answer 2

If you're looking for documentation, I'm not sure where to find it. However, let me explain the result you received:

Local > Global

When you declare a global variable, it can be accessed anywhere in your file. In the "test()" function, when you write:

var a = b = 2;

You are creating a new variable 'a' that takes the value of the global variable 'b' and simultaneously changes the value of 'b' to 2 - effectively overriding its value.

Similarly, when you write (inside 'test()'):

var a, b;

or

var a; 
var b;

You are declaring two variables that are local to your function. When you assign a value to 'b', due to the principle of local being greater than global, you may encounter two scenarios:

If you console.log(b) inside 'test()', you will get 2.
If you console.log(b) outside 'test()', you will get 44.

Declaration != Assignment

Remember:

'var a, b;' is a declaration.
'a = b = 25;' is an assignment (essentially a double assignment).
'var a = b = 25' combines declaration and assignment into one step.

I hope this explanation helps! Feel free to ask if anything is unclear or if you need further clarification. :)

Answer 3

Answer №2

let within a function's scope does not overwrite variables declared in an outer scope. Allow me to clarify the functionality of your exam() method:

// these are global variables:
let x = "out";
let y = "out";
let z = "out";
let u = "out";
let v = "out";
let w = "out";


function exam() {
    // the next line is equivalent to
    // let x; let y; z = "in";
    let x, y, z = "in"; 
    // the local variable y is set to "in"
    y = "in";
    // this translates to:
    // declare a local variable u which points to global v which points to global w
    // and assign them all the value "in"; hence only global v and global w get updated to "in";
   // *edited version: w = "in"; v = w; let u = v;
    let u = v = w = "in";
    // declare a local variable z and give it the value "in"
    let z = "in";
}
exam();
// when back in the global scope, x, y, z, u and v remain unchanged
// thus x == "out", y == "out", z == "out", u == "out", and v == "out"
// however, w == "in" and v == "in" due to modifications made by the exam() method

Answer 4

let within a function's scope does not overwrite variables declared in an outer scope. Allow me to clarify the functionality of your exam() method:

// these are global variables:
let x = "out";
let y = "out";
let z = "out";
let u = "out";
let v = "out";
let w = "out";


function exam() {
    // the next line is equivalent to
    // let x; let y; z = "in";
    let x, y, z = "in"; 
    // the local variable y is set to "in"
    y = "in";
    // this translates to:
    // declare a local variable u which points to global v which points to global w
    // and assign them all the value "in"; hence only global v and global w get updated to "in";
   // *edited version: w = "in"; v = w; let u = v;
    let u = v = w = "in";
    // declare a local variable z and give it the value "in"
    let z = "in";
}
exam();
// when back in the global scope, x, y, z, u and v remain unchanged
// thus x == "out", y == "out", z == "out", u == "out", and v == "out"
// however, w == "in" and v == "in" due to modifications made by the exam() method

Answer 5

Answer №3

It's important to remember

When you assign primitive values like this:

var a = b = 2;

It is the same as:

var b = 2;
var a = b;

Both a and b will have the value of 2.

However, if you assign objects instead of primitive values:

var a = b = [1,2,3,4];

This means:

var b = [1,2,3,4];
var a = b;

This indicates that both a and b are referencing the same object. Therefore, any changes made to b will also affect a, and vice versa:

a.push(5); 
// a <--- [1,2,3,4,5] 
// b <--- [1,2,3,4,5] !! Be cautious! Changes made to b affect a too

Remember: Using a shorthand a = b = c = value assigns the same value to all variables. But when dealing with object assignment, they share the same reference pointing to a value. Always keep this in mind.

So for object assignment, this statement:

var a = b = [1,2,3,4]; // changing a WILL impact b

does not create the same effect as

var a = [1,2,3,4]; var b = [1,2,3,4]; // altering a won't affect b

Answer 6

It's important to remember

When you assign primitive values like this:

var a = b = 2;

It is the same as:

var b = 2;
var a = b;

Both a and b will have the value of 2.

However, if you assign objects instead of primitive values:

var a = b = [1,2,3,4];

This means:

var b = [1,2,3,4];
var a = b;

This indicates that both a and b are referencing the same object. Therefore, any changes made to b will also affect a, and vice versa:

a.push(5); 
// a <--- [1,2,3,4,5] 
// b <--- [1,2,3,4,5] !! Be cautious! Changes made to b affect a too

Remember: Using a shorthand a = b = c = value assigns the same value to all variables. But when dealing with object assignment, they share the same reference pointing to a value. Always keep this in mind.

So for object assignment, this statement:

var a = b = [1,2,3,4]; // changing a WILL impact b

does not create the same effect as

var a = [1,2,3,4]; var b = [1,2,3,4]; // altering a won't affect b

Answer 7

Answer №4

One reason for this issue is that when you define variables within a function, they may not be accessible to $(".resultg").text("g = " + g);

However, in the line var d = e = f = "in";, a new local variable "d" is created which is set equal to global variables e and f, with the value "in". Since e and f are global, only in this instance will the reassignment to "in" be picked up by $(".resultg").text("g = " + g);

Answer 8

One reason for this issue is that when you define variables within a function, they may not be accessible to $(".resultg").text("g = " + g);

However, in the line var d = e = f = "in";, a new local variable "d" is created which is set equal to global variables e and f, with the value "in". Since e and f are global, only in this instance will the reassignment to "in" be picked up by $(".resultg").text("g = " + g);

Answer 9

Answer №5

The question may not seem strange, and the answer is actually quite simple. It all boils down to understanding the concept of global variables.

// The following a,b,c,d,e,f,g are global variables

var a = "out";
var b = "out";
var c = "out";
var d = "out";
var e = "out";
var f = "out";
var g = "out";

Now, a,b,c,d,e,f,g have been assigned the value 'out'

If you attempt to alert any of them, it will display as 'out'

// Your function starts here

function test() {
    var a, b, c = "in"; // Here a,b,c are local variables and do not override the global variable values
    so this statement becomes meaningless when trying to print values from outside this function

    b = "in"; // Here lies the trick and confusion begins as b is actually a local variable created in the test function, not global
    Therefore, changing its value here will not affect the global one

    var d = e = f = "in"; // The same scenario applies here with e and f being global while d is local
    If we were to print the global variable values, we get:
    a=out
    b=out
    c=out
    d=out
    e=in
    f=in
    g=out

    var g = "in";

    Since this is also a local variable, the result will be:
    a=out
    b=out
    c=out
    d=out
    e=in
    f=in
    g=out
}

test();

$(".resulta").text("a = " + a);
$(".resultb").text("b = " + b);
$(".resultc").text("c = " + c);
$(".resultd").text("d = " + d);
$(".resulte").text("e = " + e);
$(".resultf").text("f = " + f);
$(".resultg").text("g = " + g);

Answer 10

The question may not seem strange, and the answer is actually quite simple. It all boils down to understanding the concept of global variables.

// The following a,b,c,d,e,f,g are global variables

var a = "out";
var b = "out";
var c = "out";
var d = "out";
var e = "out";
var f = "out";
var g = "out";

Now, a,b,c,d,e,f,g have been assigned the value 'out'

If you attempt to alert any of them, it will display as 'out'

// Your function starts here

function test() {
    var a, b, c = "in"; // Here a,b,c are local variables and do not override the global variable values
    so this statement becomes meaningless when trying to print values from outside this function

    b = "in"; // Here lies the trick and confusion begins as b is actually a local variable created in the test function, not global
    Therefore, changing its value here will not affect the global one

    var d = e = f = "in"; // The same scenario applies here with e and f being global while d is local
    If we were to print the global variable values, we get:
    a=out
    b=out
    c=out
    d=out
    e=in
    f=in
    g=out

    var g = "in";

    Since this is also a local variable, the result will be:
    a=out
    b=out
    c=out
    d=out
    e=in
    f=in
    g=out
}

test();

$(".resulta").text("a = " + a);
$(".resultb").text("b = " + b);
$(".resultc").text("c = " + c);
$(".resultd").text("d = " + d);
$(".resulte").text("e = " + e);
$(".resultf").text("f = " + f);
$(".resultg").text("g = " + g);

Can you please explain the distinction between the statements var a = b = 2 and var a = 2; var b = 2;

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using Angular to make a request to a NodeJS+Express server for a simple GET operation

JQuery datepicker is functioning properly only after an alert when loaded with AJAX

What is the process for integrating ion-tabs with IonicVueRouter within an Ionic (vue.js) application?

The scroll function is failing to activate at the desired location

Tips for implementing both an onChange and onSubmit event for a MUI TextField

Utilizing web components in React by solely relying on a CDN for integration

Techniques for incorporating a variable into the value field in JavaScript

The MongoDB GridFS is refusing to accept the buffer being written

Choose the currently active md-tab within the md-dialog's md-tab-group

Expandable Grid Sections in React MUI

The title of the homepage is showing up behind the AppBar. Any suggestions on how to correct this?

How do you trigger the playback of a specific audio file when a user clicks on it?

Instructions on implementing getJSON in this code

Emphasize rows in the MUI-Datatables framework

The "add to cart" button is unresponsive

Unable to render properly after saving to Firebase

Understanding the res.render method in JavaScript can be a bit tricky at first

Can you please provide a detailed list of all the events that are compatible with the updateOn feature in Angular's ngModelOptions?

Angular - Implementing service worker to extract dynamic ID from route in "Notificationclick" event?

JavaScript that Implements MVC Architecture Using C#