Best practice for accessing a JavaScript property within another property

Question

Best practice for accessing a JavaScript property within another property

I've been working on an angular project and I've created a factory that provides global database methods. I decided to test it out in a jsfiddle to see if it's the right approach.

If you're interested, here's the link to the jsFiddle.

function DB () {
return {
    newRecord: function () {
         //create new record
        var id = 3;
        //this is the part I am wondering about
        //is it ok to use this in this way??
        this.setCurrentRecordId(id);
    },

    setCurrentRecordId: function (id) {
        alert('setting id');
         return localStorage.setItem('id', id);  
    },

    getCurrentRecordId: function () {
        return localStorage.getItem('id');
    }
}
}

var dbStuff = new DB();

dbStuff.newRecord();

alert(dbStuff.getCurrentRecordId());

While everything seems to be functioning correctly, I'm curious to know if there might be a more efficient way to achieve the same result.

Thank you!

javascript angularjs

Answer 1

Answer №1

When working with constructor functions in JavaScript, the traditional approach is as follows:

function Database () {
    this.newRecord = function () {
        var id = 3;
        this.setCurrentRecordId(id);
    };

    this.setCurrentRecordId = function (id) {
        alert('setting id');
        return localStorage.setItem('id', id);  
    };

    this.getCurrentRecordId = function () {
        return localStorage.getItem('id');
    };
}

var dbInstance = new Database();

dbInstance.newRecord();

alert(dbInstance.getCurrentRecordId());

If you encounter a situation where the context is lost, such as when referencing the instance in a callback, there are two common solutions.

The first option is to store a reference to `this`:

function CustomCtor(){
    var self = this;
    this.getSomething = function(id){
        asyncTask(id).then(function(result){
            self.doSomethingWith(result);
        });
    };
    this.doSomethingWith = function(result){
        // handle result
    };
}

Alternatively, you can use .bind() to set a specific context for a function:

function CustomCtor(){
    this.getSomething = function(id){

       var processResult = function(arg){
           this.doSomethingWith(arg);
       }.bind(this);

        asyncTask(id).then(processResult);
    };
    this.doSomethingWith = function(result){
        // handle result
    };
}

Answer 2

When working with constructor functions in JavaScript, the traditional approach is as follows:

function Database () {
    this.newRecord = function () {
        var id = 3;
        this.setCurrentRecordId(id);
    };

    this.setCurrentRecordId = function (id) {
        alert('setting id');
        return localStorage.setItem('id', id);  
    };

    this.getCurrentRecordId = function () {
        return localStorage.getItem('id');
    };
}

var dbInstance = new Database();

dbInstance.newRecord();

alert(dbInstance.getCurrentRecordId());

If you encounter a situation where the context is lost, such as when referencing the instance in a callback, there are two common solutions.

The first option is to store a reference to `this`:

function CustomCtor(){
    var self = this;
    this.getSomething = function(id){
        asyncTask(id).then(function(result){
            self.doSomethingWith(result);
        });
    };
    this.doSomethingWith = function(result){
        // handle result
    };
}

Alternatively, you can use .bind() to set a specific context for a function:

function CustomCtor(){
    this.getSomething = function(id){

       var processResult = function(arg){
           this.doSomethingWith(arg);
       }.bind(this);

        asyncTask(id).then(processResult);
    };
    this.doSomethingWith = function(result){
        // handle result
    };
}

Answer 3

Answer №2

Utilizing local storage eliminates any potential issues.

function DataStorage () {
return {

    setRecordId: function (id) {
        alert('setting id');
         return localStorage.setItem('record_id', id);  
    },

    getRecordId: function () {
        return localStorage.getItem('record_id');
    }
}
}

var dataStorage = new DataStorage();

dataStorage.setRecordId(5);
dataStorage.getRecordId() // 5

Answer 4

Utilizing local storage eliminates any potential issues.

function DataStorage () {
return {

    setRecordId: function (id) {
        alert('setting id');
         return localStorage.setItem('record_id', id);  
    },

    getRecordId: function () {
        return localStorage.getItem('record_id');
    }
}
}

var dataStorage = new DataStorage();

dataStorage.setRecordId(5);
dataStorage.getRecordId() // 5

Best practice for accessing a JavaScript property within another property

Answer №1

Answer №2

Similar questions

Utilizing the Aladin Lite application within a React application, despite not being specifically designed for React

Exploring the utility of promise.race()

Configuring Google Chart LineChart settings by utilizing the series attribute

Instead of uploading multiple files at once, allow users to upload individual files by clicking on the table row

Pass JSON data from Laravel to Controller

Does React trigger a re-render when setState is called even if the state value remains unchanged?

Searching for a Mongoose Model by utilizing a field from a separate Schema

Alternative method of encapsulating a JavaScript function within a Python environment in a Jupyter notebook

Should objects passed as props be modified in Vue.js components?

Ways to incorporate conditional logic with URL query parameters in Next.JS

Exploring the World of D3.js with an Interactive Example

Discovering terms in JavaScript

What is the best way to create a sharp light effect on a sphere in three.js?

I am looking to share videos and large files without the use of a flash plugin

Is the Javascript event firing being hindered by the data object in the Meteor template?

The useEffect function is repeatedly making API calls within a component, despite not having any dependencies specified

Apply an overlay to the entire body while excluding a specific element

The Vue 3 composition API does not allow for the return of values from helper functions to components

Sending data from HTML and JavaScript to Python

Submitting a form across controllers in AngularJS: What you need to know