Menu

    JS References

    You’re asking about “JS References,” which is a crucial concept in JavaScript, particularly when dealing with non-primitive data types like objects and arrays. In JavaScript, variables don’t always store the actual data directly; sometimes, they store a reference to where that data is located in memory.

    Let’s break down JavaScript references in a tutorial format.

    JavaScript References: Understanding How Data is Stored and Passed

    In JavaScript, data types are broadly categorized into two groups:

    1. Primitive Values:
      • Number
      • String
      • Boolean
      • Undefined
      • Null
      • Symbol
      • BigInt
      Primitive values are stored directly in the variable. When you assign a primitive value to a new variable or pass it to a function, a copy of the value is made. This is often called “pass by value.”
    2. Non-Primitive Values (Objects/Reference Types):
      • Object (including plain objects {...})
      • Array ([...] which is a type of object)
      • Function (which is also a type of object)
      • Date
      • RegExp
      • Etc.
      Non-primitive values are stored as references. The variable doesn’t hold the actual object data itself, but rather a memory address (a reference) that points to where the object is stored in the computer’s memory (on the heap). When you assign a non-primitive value to a new variable or pass it to a function, it’s the reference (memory address) that is copied, not the object itself. This is often called “pass by reference” or, more accurately, “pass by sharing” or “pass by value of the reference.”

    Understanding “Pass by Value” (for Primitives)

    When you work with primitive values, assigning one variable to another creates an independent copy.

    JavaScript

    let num1 = 10;
let num2 = num1; // num2 gets a copy of the value 10

console.log(num1); // 10
console.log(num2); // 10

num1 = 20; // Change num1

console.log(num1); // 20
console.log(num2); // 10 (num2 remains 10 because it got a copy, not a reference)

// When passed to a function:
function increment(value) {
    value++; // This modifies the local 'value' copy, not the original 'myAge'
    console.log("Inside function (value):", value);
}

let myAge = 30;
increment(myAge);
console.log("Outside function (myAge):", myAge); // 30 (myAge is unchanged)

    Understanding “Pass by Reference” (for Non-Primitives/Objects)

    When you work with non-primitive values (objects, arrays, functions), assignments and function arguments deal with the reference to the data, not the data itself.

    JavaScript

    let obj1 = { name: "Alice", age: 25 };
let obj2 = obj1; // obj2 gets a copy of the *reference* to the same object in memory

console.log(obj1); // { name: "Alice", age: 25 }
console.log(obj2); // { name: "Alice", age: 25 }

obj1.age = 26; // Change a property using obj1 reference

console.log(obj1); // { name: "Alice", age: 26 }
console.log(obj2); // { name: "Alice", age: 26 } (obj2 *also* reflects the change
                   // because both variables point to the *same* object)

// When passed to a function:
function updatePerson(personObj) {
    personObj.age = 30; // This modifies the *original* object that 'personObj' references
    personObj.city = "New York"; // Add a new property to the original object
    console.log("Inside function (personObj):", personObj);
}

let myPerson = { name: "Bob", age: 28 };
updatePerson(myPerson);
console.log("Outside function (myPerson):", myPerson); // { name: "Bob", age: 30, city: "New York" }
                                                     // myPerson is changed because the function worked on the same object

    Key Implications of References

    1. Unexpected Side Effects: This is the most common pitfall. If you pass an object to a function and modify it inside, the original object outside the function will also be modified. This can lead to hard-to-find bugs if not managed carefully.
    2. Comparing Objects:
      • == and === operators compare references for objects. They will only return true if both variables point to the exact same object in memory.
      • They do not compare the content or structure of the objects.
      JavaScriptlet a = { value: 1 }; let b = { value: 1 }; let c = a; console.log(a === b); // false (different objects in memory, even if content is same) console.log(a === c); // true (both 'a' and 'c' point to the exact same object)

    How to Create Copies (Avoiding Reference Issues)

    If you need to modify an object without affecting the original, you must create a new object (a copy).

    1. Shallow Copy (for simple objects/arrays): Copies the top-level properties. If a property itself is an object, only its reference is copied, not the nested object’s content.
      • Spread Syntax (...):JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = { ...original }; // Creates a new object copy.a = 10; copy.b.c = 20; // This will still affect original.b.c because b's reference was copied console.log(original); // { a: 1, b: { c: 20 } } console.log(copy); // { a: 10, b: { c: 20 } }
      • Object.assign():JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = Object.assign({}, original); // Creates a new object // Same shallow copy behavior as spread
      • Array.from() or Spread with Arrays:JavaScriptlet originalArr = [1, { value: 2 }, 3]; let copyArr = [...originalArr]; // Shallow copy of array copyArr[0] = 10; copyArr[1].value = 20; // Still affects originalArr[1].value console.log(originalArr); // [1, { value: 20 }, 3]
    2. Deep Copy (for nested objects/arrays): Creates entirely new objects for all nested structures, ensuring no references are shared.
      • JSON.parse(JSON.stringify(object)) (Common but has limitations):
        • Pros: Simple for basic objects.
        • Cons: Fails with functions, undefined, Symbol, Date objects (converts Dates to strings), Map, Set, RegExp. Should only be used for simple data objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: [3, 4] }; let deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.b.c = 20; deepCopy.d[0] = 30; console.log(original); // { a: 1, b: { c: 2 }, d: [3, 4] } (original is untouched)
      • Structured Clone Algorithm (structuredClone() – Modern ES2021):
        • Pros: The built-in, most robust way for deep cloning common types. Handles circular references.
        • Cons: Cannot clone functions, DOM nodes, error objects, or WebAssembly.Module objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: new Date() }; let deepCopy = structuredClone(original); deepCopy.b.c = 20; deepCopy.d.setFullYear(2000); console.log(original); // original.b.c is 2, original.d is current date console.log(deepCopy); // deepCopy.b.c is 20, deepCopy.d is date in 2000

    Understanding JavaScript references is foundational for avoiding unexpected behavior in your code, especially as your applications grow in complexity and involve more data manipulation. Always be mindful of whether you’re working with a primitive value (a copy) or a reference type (the original object in memory).You’re asking about “JS References,” which is a crucial concept in JavaScript, particularly when dealing with non-primitive data types like objects and arrays. In JavaScript, variables don’t always store the actual data directly; sometimes, they store a reference to where that data is located in memory.

    Let’s break down JavaScript references in a tutorial format.

    JavaScript References: Understanding How Data is Stored and Passed

    In JavaScript, data types are broadly categorized into two groups:

    1. Primitive Values:
      • Number
      • String
      • Boolean
      • Undefined
      • Null
      • Symbol
      • BigInt
      Primitive values are stored directly in the variable. When you assign a primitive value to a new variable or pass it to a function, a copy of the value is made. This is often called “pass by value.”
    2. Non-Primitive Values (Objects/Reference Types):
      • Object (including plain objects {...})
      • Array ([...] which is a type of object)
      • Function (which is also a type of object)
      • Date
      • RegExp
      • Etc.
      Non-primitive values are stored as references. The variable doesn’t hold the actual object data itself, but rather a memory address (a reference) that points to where the object is stored in the computer’s memory (on the heap). When you assign a non-primitive value to a new variable or pass it to a function, it’s the reference (memory address) that is copied, not the object itself. This is often called “pass by reference” or, more accurately, “pass by sharing” or “pass by value of the reference.”

    Understanding “Pass by Value” (for Primitives)

    When you work with primitive values, assigning one variable to another creates an independent copy.

    JavaScript

    let num1 = 10;
let num2 = num1; // num2 gets a copy of the value 10

console.log(num1); // 10
console.log(num2); // 10

num1 = 20; // Change num1

console.log(num1); // 20
console.log(num2); // 10 (num2 remains 10 because it got a copy, not a reference)

// When passed to a function:
function increment(value) {
    value++; // This modifies the local 'value' copy, not the original 'myAge'
    console.log("Inside function (value):", value);
}

let myAge = 30;
increment(myAge);
console.log("Outside function (myAge):", myAge); // 30 (myAge is unchanged)

    Understanding “Pass by Reference” (for Non-Primitives/Objects)

    When you work with non-primitive values (objects, arrays, functions), assignments and function arguments deal with the reference to the data, not the data itself.

    JavaScript

    let obj1 = { name: "Alice", age: 25 };
let obj2 = obj1; // obj2 gets a copy of the *reference* to the same object in memory

console.log(obj1); // { name: "Alice", age: 25 }
console.log(obj2); // { name: "Alice", age: 25 }

obj1.age = 26; // Change a property using obj1 reference

console.log(obj1); // { name: "Alice", age: 26 }
console.log(obj2); // { name: "Alice", age: 26 } (obj2 *also* reflects the change
                   // because both variables point to the *same* object)

// When passed to a function:
function updatePerson(personObj) {
    personObj.age = 30; // This modifies the *original* object that 'personObj' references
    personObj.city = "New York"; // Add a new property to the original object
    console.log("Inside function (personObj):", personObj);
}

let myPerson = { name: "Bob", age: 28 };
updatePerson(myPerson);
console.log("Outside function (myPerson):", myPerson); // { name: "Bob", age: 30, city: "New York" }
                                                     // myPerson is changed because the function worked on the same object

    Key Implications of References

    1. Unexpected Side Effects: This is the most common pitfall. If you pass an object to a function and modify it inside, the original object outside the function will also be modified. This can lead to hard-to-find bugs if not managed carefully.
    2. Comparing Objects:
      • == and === operators compare references for objects. They will only return true if both variables point to the exact same object in memory.
      • They do not compare the content or structure of the objects.
      JavaScriptlet a = { value: 1 }; let b = { value: 1 }; let c = a; console.log(a === b); // false (different objects in memory, even if content is same) console.log(a === c); // true (both 'a' and 'c' point to the exact same object)

    How to Create Copies (Avoiding Reference Issues)

    If you need to modify an object without affecting the original, you must create a new object (a copy).

    1. Shallow Copy (for simple objects/arrays): Copies the top-level properties. If a property itself is an object, only its reference is copied, not the nested object’s content.
      • Spread Syntax (...):JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = { ...original }; // Creates a new object copy.a = 10; copy.b.c = 20; // This will still affect original.b.c because b's reference was copied console.log(original); // { a: 1, b: { c: 20 } } console.log(copy); // { a: 10, b: { c: 20 } }
      • Object.assign():JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = Object.assign({}, original); // Creates a new object // Same shallow copy behavior as spread
      • Array.from() or Spread with Arrays:JavaScriptlet originalArr = [1, { value: 2 }, 3]; let copyArr = [...originalArr]; // Shallow copy of array copyArr[0] = 10; copyArr[1].value = 20; // Still affects originalArr[1].value console.log(originalArr); // [1, { value: 20 }, 3]
    2. Deep Copy (for nested objects/arrays): Creates entirely new objects for all nested structures, ensuring no references are shared.
      • JSON.parse(JSON.stringify(object)) (Common but has limitations):
        • Pros: Simple for basic objects.
        • Cons: Fails with functions, undefined, Symbol, Date objects (converts Dates to strings), Map, Set, RegExp. Should only be used for simple data objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: [3, 4] }; let deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.b.c = 20; deepCopy.d[0] = 30; console.log(original); // { a: 1, b: { c: 2 }, d: [3, 4] } (original is untouched)
      • Structured Clone Algorithm (structuredClone() – Modern ES2021):
        • Pros: The built-in, most robust way for deep cloning common types. Handles circular references.
        • Cons: Cannot clone functions, DOM nodes, error objects, or WebAssembly.Module objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: new Date() }; let deepCopy = structuredClone(original); deepCopy.b.c = 20; deepCopy.d.setFullYear(2000); console.log(original); // original.b.c is 2, original.d is current date console.log(deepCopy); // deepCopy.b.c is 20, deepCopy.d is date in 2000

    Understanding JavaScript references is foundational for avoiding unexpected behavior in your code, especially as your applications grow in complexity and involve more data manipulation. Always be mindful of whether you’re working with a primitive value (a copy) or a reference type (the original object in memory).You’re asking about “JS References,” which is a crucial concept in JavaScript, particularly when dealing with non-primitive data types like objects and arrays. In JavaScript, variables don’t always store the actual data directly; sometimes, they store a reference to where that data is located in memory.

    Let’s break down JavaScript references in a tutorial format.

    JavaScript References: Understanding How Data is Stored and Passed

    In JavaScript, data types are broadly categorized into two groups:

    1. Primitive Values:
      • Number
      • String
      • Boolean
      • Undefined
      • Null
      • Symbol
      • BigInt
      Primitive values are stored directly in the variable. When you assign a primitive value to a new variable or pass it to a function, a copy of the value is made. This is often called “pass by value.”
    2. Non-Primitive Values (Objects/Reference Types):
      • Object (including plain objects {...})
      • Array ([...] which is a type of object)
      • Function (which is also a type of object)
      • Date
      • RegExp
      • Etc.
      Non-primitive values are stored as references. The variable doesn’t hold the actual object data itself, but rather a memory address (a reference) that points to where the object is stored in the computer’s memory (on the heap). When you assign a non-primitive value to a new variable or pass it to a function, it’s the reference (memory address) that is copied, not the object itself. This is often called “pass by reference” or, more accurately, “pass by sharing” or “pass by value of the reference.”

    Understanding “Pass by Value” (for Primitives)

    When you work with primitive values, assigning one variable to another creates an independent copy.

    JavaScript

    let num1 = 10;
let num2 = num1; // num2 gets a copy of the value 10

console.log(num1); // 10
console.log(num2); // 10

num1 = 20; // Change num1

console.log(num1); // 20
console.log(num2); // 10 (num2 remains 10 because it got a copy, not a reference)

// When passed to a function:
function increment(value) {
    value++; // This modifies the local 'value' copy, not the original 'myAge'
    console.log("Inside function (value):", value);
}

let myAge = 30;
increment(myAge);
console.log("Outside function (myAge):", myAge); // 30 (myAge is unchanged)

    Understanding “Pass by Reference” (for Non-Primitives/Objects)

    When you work with non-primitive values (objects, arrays, functions), assignments and function arguments deal with the reference to the data, not the data itself.

    JavaScript

    let obj1 = { name: "Alice", age: 25 };
let obj2 = obj1; // obj2 gets a copy of the *reference* to the same object in memory

console.log(obj1); // { name: "Alice", age: 25 }
console.log(obj2); // { name: "Alice", age: 25 }

obj1.age = 26; // Change a property using obj1 reference

console.log(obj1); // { name: "Alice", age: 26 }
console.log(obj2); // { name: "Alice", age: 26 } (obj2 *also* reflects the change
                   // because both variables point to the *same* object)

// When passed to a function:
function updatePerson(personObj) {
    personObj.age = 30; // This modifies the *original* object that 'personObj' references
    personObj.city = "New York"; // Add a new property to the original object
    console.log("Inside function (personObj):", personObj);
}

let myPerson = { name: "Bob", age: 28 };
updatePerson(myPerson);
console.log("Outside function (myPerson):", myPerson); // { name: "Bob", age: 30, city: "New York" }
                                                     // myPerson is changed because the function worked on the same object

    Key Implications of References

    1. Unexpected Side Effects: This is the most common pitfall. If you pass an object to a function and modify it inside, the original object outside the function will also be modified. This can lead to hard-to-find bugs if not managed carefully.
    2. Comparing Objects:
      • == and === operators compare references for objects. They will only return true if both variables point to the exact same object in memory.
      • They do not compare the content or structure of the objects.
      JavaScriptlet a = { value: 1 }; let b = { value: 1 }; let c = a; console.log(a === b); // false (different objects in memory, even if content is same) console.log(a === c); // true (both 'a' and 'c' point to the exact same object)

    How to Create Copies (Avoiding Reference Issues)

    If you need to modify an object without affecting the original, you must create a new object (a copy).

    1. Shallow Copy (for simple objects/arrays): Copies the top-level properties. If a property itself is an object, only its reference is copied, not the nested object’s content.
      • Spread Syntax (...):JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = { ...original }; // Creates a new object copy.a = 10; copy.b.c = 20; // This will still affect original.b.c because b's reference was copied console.log(original); // { a: 1, b: { c: 20 } } console.log(copy); // { a: 10, b: { c: 20 } }
      • Object.assign():JavaScriptlet original = { a: 1, b: { c: 2 } }; let copy = Object.assign({}, original); // Creates a new object // Same shallow copy behavior as spread
      • Array.from() or Spread with Arrays:JavaScriptlet originalArr = [1, { value: 2 }, 3]; let copyArr = [...originalArr]; // Shallow copy of array copyArr[0] = 10; copyArr[1].value = 20; // Still affects originalArr[1].value console.log(originalArr); // [1, { value: 20 }, 3]
    2. Deep Copy (for nested objects/arrays): Creates entirely new objects for all nested structures, ensuring no references are shared.
      • JSON.parse(JSON.stringify(object)) (Common but has limitations):
        • Pros: Simple for basic objects.
        • Cons: Fails with functions, undefined, Symbol, Date objects (converts Dates to strings), Map, Set, RegExp. Should only be used for simple data objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: [3, 4] }; let deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.b.c = 20; deepCopy.d[0] = 30; console.log(original); // { a: 1, b: { c: 2 }, d: [3, 4] } (original is untouched)
      • Structured Clone Algorithm (structuredClone() – Modern ES2021):
        • Pros: The built-in, most robust way for deep cloning common types. Handles circular references.
        • Cons: Cannot clone functions, DOM nodes, error objects, or WebAssembly.Module objects.
        JavaScriptlet original = { a: 1, b: { c: 2 }, d: new Date() }; let deepCopy = structuredClone(original); deepCopy.b.c = 20; deepCopy.d.setFullYear(2000); console.log(original); // original.b.c is 2, original.d is current date console.log(deepCopy); // deepCopy.b.c is 20, deepCopy.d is date in 2000

    Understanding JavaScript references is foundational for avoiding unexpected behavior in your code, especially as your applications grow in complexity and involve more data manipulation. Always be mindful of whether you’re working with a primitive value (a copy) or a reference type (the original object in memory).

    Share the Post:

    Related Posts

    Linkedin X-twitter Youtube Instagram

    DEVOPS

    AWS
    Google Clod Platform
    Azure
    Github
    Gitlab
    Bitbucket
    Gitlab CI
    Circle CI
    Travis CI
    AWS Code Pipeline
    Azure Pipelines
    Terraform
    AWS Cloud formation
    Ansible
    Puppet
    Chef
    Docker
    Kubernetes
    Openshift
    Prometheus
    Garfana
    Nagios
    ELK Stack
    Splunk
    Data
    Slack
    Teams
    Jira
    Trello

    PROGRAMMING LANGUAGES

    C 
    C++
    C#
    Javascript
    Python
    Rust
    Kotlin
    PHP
    JAVA
    GO lang

    CLOUD ENGINEER

    AWS
    Azure
    VMware
    Salesforce
    Cloud Computing
    Google Cloud Platforms
    Docker
    Kubernetes
    Openshift
    Linux Shell Scripting
    Python Scripting
    Terraform
    PowerShell

    B.Tech / MCA

    DBMS
    Data StructureS
    DAA
    Operating System
    Computer Network
    Compiler Design
    Computer Organization
    Discrete Mathematics
    Ethical Hacking
    Computer Graphics
    Software Engineering
    C Programming
    C++
    Java
    .Net
    Python
    Programs
    Control system
    Data Warehouse

    NETWORK / SECURITY

    Cisco
    Juniper
    Aruba
    VMware NSX
    Palo Alto Network
    Fortinet
    F5 Networks
    Splunk
    FireEye
    Tenable
    Check Point
    McAfee / Symatec
    Kali Linux
    OpenVAS
    WireShark
    AWS
    Azure
    Google Cloud Platform
    NagiOS
    Solarwinds
    Zabbix
    Wireshark

    SOFTWARE DEVELOPER

    Frontend
    Backend
    Cloud
    Android
    iOS
    Docker
    Kubernetes
    Terraform
    CI / CD Platforms
    Unity
    Unreal Engine

    DATA ANALYST

    Power BI
    Tableau
    Looker
    SQL
    MongoDB
    Snowflake
    Apache Hadoop
    Apache Spark
    AWS
    Azure
    Google Cloud Platform

    WEB DEVELOPMENT

    HTML
    CSS
    Javascript
    jQuery
    jQuery UI
    Angular JS
    React.JS
    XML
    JSON
    HTTP
    Node.JS
    Express.JS
    API Development
    XPath
    XQuery
    Jest
    Cypress
    Git
    Github

    DISCLAIMER

     The job-related information, exam results, and marks published on Job Binge (www.jobbinge.com) are provided solely for the immediate reference of the users and do not constitute legal documents. While every effort is made to ensure that the information presented on this website is accurate and authentic, Job Binge cannot be held responsible for any inadvertent errors or discrepancies that may have occurred in the data or results published. We are not liable for any loss, damage, or inconvenience caused by any shortcoming, defect, or inaccuracy of the information available on this website. Users are advised to verify details through official sources before making any decisions based on the information found here.