Exploring the contrast in scoping between variables and objects within javascript

Question

Exploring the contrast in scoping between variables and objects within javascript

Could someone please elaborate on the distinction between these two sets of JavaScript code snippets?

var orange = { prop: "I am a simple fruit"};

console.log(orange.prop);  //output: "I am a simple fruit"

function go(orange) {
    orange.prop = "Now I have been changed by the function";
};

go(orange);

console.log(orange.prop); // output: "Now I have been changed by the function"

.
In the block above, the go function clearly modified the orange object in the outer scope
.

var apple = "I am a simple apple";

console.log(apple); // output "I am a simple apple"

function goApple(apple) {

    apple = "Now I have been changed by the function";

};

goApple(apple);

console.log(apple); // output "I am a simple apple"

In this block, the initial apple variable remains unchanged
I seem to be overlooking something fundamental and obvious here, or could it be that JavaScript follows different scoping rules for various variable types?

javascript angularjs

Answer 1

Answer №1

The main distinction is in the nature of the argument you provide.

typeof banana //"string"
typeof strawberry //"object"

By passing string literals, you are actually passing data that cannot be changed, and it is transmitted by value, thereby maintaining its original state.

UPDATE: In other words, the information pointed to by window.banana remains constant. To modify window.banana, it must be redirected to a different dataset. window.banana = "fresh data";

Answer 2

The main distinction is in the nature of the argument you provide.

typeof banana //"string"
typeof strawberry //"object"

By passing string literals, you are actually passing data that cannot be changed, and it is transmitted by value, thereby maintaining its original state.

UPDATE: In other words, the information pointed to by window.banana remains constant. To modify window.banana, it must be redirected to a different dataset. window.banana = "fresh data";

Answer 3

Answer №2

Here is a quick breakdown:

const grabApple = (apple) => {

The function above takes in an argument called apple, which essentially creates a local variable within the function scope. Any changes made to this variable inside the function will only affect this local copy, not the original one outside.

A similar concept applies when dealing with the orange argument. You are also creating a local variable, but any modifications you make to it would only impact its properties rather than the actual value of the outer orange object.

Answer 4

Here is a quick breakdown:

const grabApple = (apple) => {

The function above takes in an argument called apple, which essentially creates a local variable within the function scope. Any changes made to this variable inside the function will only affect this local copy, not the original one outside.

A similar concept applies when dealing with the orange argument. You are also creating a local variable, but any modifications you make to it would only impact its properties rather than the actual value of the outer orange object.

Answer 5

Answer №3

When it comes to passing function parameters in Javascript, they are always passed by value. However, there is an exception when dealing with objects. In this scenario, if you are accessing a property of an object that is passed as a parameter, it will be passed by reference. This means that when the object (let's say apple) is passed to the function, a copy of its reference is created and assigned to another variable (let's call it orange). As a result, both variables now point to the same object in memory.

Answer 6

When it comes to passing function parameters in Javascript, they are always passed by value. However, there is an exception when dealing with objects. In this scenario, if you are accessing a property of an object that is passed as a parameter, it will be passed by reference. This means that when the object (let's say apple) is passed to the function, a copy of its reference is created and assigned to another variable (let's call it orange). As a result, both variables now point to the same object in memory.

Answer 7

Answer №4

To improve clarity, consider using different names for your function arguments than your global variables. The current setup of using apple and orange both as global variables and argument variables can lead to confusion as they overshadow the outer globals within the function.

var apple = "i am a simple apple";
console.log(apple); // output: "i am a simple apple"

function updateApple(appleArg) {
    appleArg = "Now I have been changed by the function";
};

updateApple(apple);
console.log(apple); // output: "i am a simple apple"

In the above example, you are only changing the reference that appleArg points to; this does not affect the value referred to by the outer variable apple.

Contrastingly, in the case of modifying the object itself like with orange:

var orange = { prop: "i am a simple fruit"};
console.log(orange.prop);  //output: "i am a simple fruit"

function update(orangeArg) {
    orangeArg.prop = "Now I have been changed by the function";
};

update(orange);
console.log(orange.prop); // output: "Now I have been changed by the function"

In this scenario, both orange and orangeArg point to the same value and do not change their references. However, the actual value (object properties) is modified without affecting the reference.

Remember, primitives like strings cannot be directly modified due to immutability, while objects allow modification of their properties. As shown below:

var mango = { prop: "i am a simple fruit"};
console.log(mango.prop);  //output: "i am a simple fruit"

function alter(mangoArg) {
    mangoArg = { prop: "Now I have been changed by the function" };
};

alter(mango);
console.log(mango.prop); // output: "i am a simple fruit"

In this last illustration, we altered mangoArg to point to a completely new value, instead of modifying the object referenced by mango.

Answer 8

To improve clarity, consider using different names for your function arguments than your global variables. The current setup of using apple and orange both as global variables and argument variables can lead to confusion as they overshadow the outer globals within the function.

var apple = "i am a simple apple";
console.log(apple); // output: "i am a simple apple"

function updateApple(appleArg) {
    appleArg = "Now I have been changed by the function";
};

updateApple(apple);
console.log(apple); // output: "i am a simple apple"

In the above example, you are only changing the reference that appleArg points to; this does not affect the value referred to by the outer variable apple.

Contrastingly, in the case of modifying the object itself like with orange:

var orange = { prop: "i am a simple fruit"};
console.log(orange.prop);  //output: "i am a simple fruit"

function update(orangeArg) {
    orangeArg.prop = "Now I have been changed by the function";
};

update(orange);
console.log(orange.prop); // output: "Now I have been changed by the function"

In this scenario, both orange and orangeArg point to the same value and do not change their references. However, the actual value (object properties) is modified without affecting the reference.

Remember, primitives like strings cannot be directly modified due to immutability, while objects allow modification of their properties. As shown below:

var mango = { prop: "i am a simple fruit"};
console.log(mango.prop);  //output: "i am a simple fruit"

function alter(mangoArg) {
    mangoArg = { prop: "Now I have been changed by the function" };
};

alter(mango);
console.log(mango.prop); // output: "i am a simple fruit"

In this last illustration, we altered mangoArg to point to a completely new value, instead of modifying the object referenced by mango.

Exploring the contrast in scoping between variables and objects within javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Customized function enabling dynamic menu display based on varying screen dimensions

Angular throwing an error: "Unknown provider. Nested controllers"

Creating URLs in asp.net using both name and ID parameters

The functionality of the typeof operator is not behaving as anticipated

Encountering a 400 BAD REQUEST error while attempting to make an AJAX post request in

Javascript - Array checking for overlapping numeric ranges

javascript Adjust background according to the current time

Finding the precise identifier of the selected input from a list with JQUERY

What is the best way to create an array of randomized numbers with a variance of 1 using JavaScript?

What is the most effective method for disregarding undefined values?

Can you explain the variance in these code snippets when implementing React's setState() function?

Every time I refresh a Next.js page, I find myself back on the index.js

How can you personalize a website script by deactivating it using uBlock Origin and then reintegrating it as a userscript?

Building blocks & lists in markup language

Loading JSON models with raycasting and colliding with meshes in three.js

Is there a different way to access a PHP page besides using a hyperlink? I've tried that method but it doesn't seem to

Display or conceal several elements using JQUERY/HTML upon hovering

Activate a function for a targeted ajax request within a global $.ajax event

Newbie to Angular encounters issue with Yeoman: failure to define 'app'

Is there a way to identify a change in the URL using JQuery?