CODEWITHSUNDEEP
javascriptperformance
Moussawi7
Moussawi7

Reputation: 13289

performance: variables inside object vs variables inside function

I am creating a hybrid mobile application using javascript. In order to support multiple languages, I created an object called "exchange" that contains the translations of variables, where "exchange" contains more than 200 variable. My question is that in scale of performance, what's best to use:

1- variables inside object like this:

var exchange = {
    USERNAME_PASSWORD_UNMATCHED: "الاسم و كلمة المرور غير متطابقين",
    NOT_APPROVED: " بانتظار تأكيد صلاحية الوصف",
    ERROR_CONNECT: "فشل الاتصال بالخادم",
    RE_LOGIN: "الرجاء اعادة الدخول",
    INVALID_ACCESS_TOKEN: "رمز المرور غير صحيح",
.
.
.
};

or

2- variables inside function like this 

 var exchange = {
    get_variable:function(name){
    switch(name){
        case "USERNAME_PASSWORD_UNMATCHED": return "الاسم و كلمة المرور غير متطابقين"; break;
        case "NOT_APPROVED":return " بانتظار تأكيد صلاحية الوصف";
        case "ERROR_CONNECT":return "فشل الاتصال بالخادم";
        case "RE_LOGIN":return "الرجاء اعادة الدخول";
        case "INVALID_ACCESS_TOKEN":return "رمز المرور غير صحيح";
    }
}
    };

Upvotes: 1

Views: 75

Answers (1)

Mauno Vähä
Mauno Vähä

Reputation: 9788

I argue that with simple js structures like you provided, difference between the two is minimal. Although, I would prefer solution #1 over #2 because it is much simpler (to my eyes) and easy to access.

I also traced performance of the two with jsperf and there was practically, no difference.

You can view the results here: jsperf-exchange-translation-perf

Here is also the code used for test:

Preparation:

// Keys
var keys = [
   "USERNAME_PASSWORD_UNMATCHED",
   "NOT_APPROVED",
   "ERROR_CONNECT",
   "RE_LOGIN",
   "INVALID_ACCESS_TOKEN"
];

// Random number between keys range
var getRandomKey = function() {
    return Math.floor(Math.random() * ((keys.length - 1) - 0 + 1)) + 0;
};

Test case #1:

var exchange = {
    USERNAME_PASSWORD_UNMATCHED: "الاسم و كلمة المرور غير متطابقين",
    NOT_APPROVED: " بانتظار تأكيد صلاحية الوصف",
    ERROR_CONNECT: "فشل الاتصال بالخادم",
    RE_LOGIN: "الرجاء اعادة الدخول",
    INVALID_ACCESS_TOKEN: "رمز المرور غير صحيح"
};

for(var i = 0; i < 10000; i++) {
   console.log(exchange[getRandomKey()]);
}

Test case #2:

var exchange = {
    get_variable:function(name){
    switch(name){
        case "USERNAME_PASSWORD_UNMATCHED": return "الاسم و كلمة المرور غير متطابقين"; break;
        case "NOT_APPROVED":return " بانتظار تأكيد صلاحية الوصف"; break;
        case "ERROR_CONNECT":return "فشل الاتصال بالخادم"; break;
        case "RE_LOGIN":return "الرجاء اعادة الدخول"; break;
        case "INVALID_ACCESS_TOKEN":return "رمز المرور غير صحيح";
    }
    }
};

for(var i = 0; i < 10000; i++) {
   console.log(exchange.get_variable(getRandomKey()));
}

Results:

Test case #1:

2.51 ops/sec

Test case #2:

2.46 ops/sec

Special note: Because I used console.log etc. There is a possibility that jsperf will return different results based on the traffic the CPU has which is performing the tests. Running tests multiple times reveals that there is much variance.

So I would conclude by saying, the access performance of the solution doesn't make much difference, but using solution #1 over #2 would make sense because the latter only complicates retrieval of object values which is easy in javascript by default using exchange["USERNAME_PASSWORD_UNMATCHED"]

Upvotes: 2

Related Questions