It is mon to see these code in Angualr:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})
export class App {
    // we define variable here
    data = [1, 2];
    tempData = [3, 4]; //temporary data, not involved in view rendering
}

As we can see, there is a temporary variable won't involve in view rendering, but the temp variable is also necessary for our application in the use of storing data temporarily.

what about writing like this:

import { Component, OnInit } from '@angular/core';
const tempData = [3, 4]; //temporary data, not involved in view rendering
@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})

export class App {
    // we define variable here
    data = [1, 2];
}

Since the temporary variable won't be used in view rendering, I can define it outside of the class. And in my opinion, it will optimize the performance(because it reduce the detection variable for angular, I dont't know whether it is right).

So which code style is better, and it has performance difference between them ?

It is mon to see these code in Angualr:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})
export class App {
    // we define variable here
    data = [1, 2];
    tempData = [3, 4]; //temporary data, not involved in view rendering
}

As we can see, there is a temporary variable won't involve in view rendering, but the temp variable is also necessary for our application in the use of storing data temporarily.

what about writing like this:

import { Component, OnInit } from '@angular/core';
const tempData = [3, 4]; //temporary data, not involved in view rendering
@Component({
    selector: 'app',
    template: '<div *ngFor="let item of data"></div>'
})

export class App {
    // we define variable here
    data = [1, 2];
}

Since the temporary variable won't be used in view rendering, I can define it outside of the class. And in my opinion, it will optimize the performance(because it reduce the detection variable for angular, I dont't know whether it is right).

So which code style is better, and it has performance difference between them ?

• javascript
• angular
• typescript

5 Answers 5

In your first example, there's a tempData for each instance of your class (it's not a variable, it's a property). In your second example, one tempData is reused by all instances of your class (and in this case, it isn't a property, it's a constant).

Which you use depends on whether you need a per-instance tempData or a shared one.

Declaring it at the top-level of your module (outside the ponent) if it's private information and you don't need it to be per-instance is absolutely fine. It will be private to that module.

So which code style is better, and it has performance difference between them ?

Neither is better; they're different, and do different things, so you use one or the other based on what you need to do. Any performance difference between them will be utterly and pletely negligible, nothing to bother thinking about.

This is really up to you.

But no, it won't reduce Angular variable detection and improve performance : if you don't use it in view rendering, Angular just doesn't care (from what I've understood, of course).

My way-to-go is something along the lines of this :

• if the variable is related to the feature, I declare it as static
• If the variable isn't related to the feature, but is a metadata of the feature (such as, for instance, injection tokens), I declare it as an exported constant

Honestly, never really thought about it.

As you said yourself the first example will include the variable and it's data in the initialized ponent class but as long its just sitting there there shouldn't be any more or less significant performance changes. Unless it's some huge table data holder in which case you would probably do it async.

But it is mon to use variables outside classes for more clean code. Fx. I usually declare my routes object outside the router module. and then export the object like export const routes:Routes = [] then re import it in place we need just to keep it more clean.

Example 1:

Whenever a variable is created within a class, the variable bees the property of the instance of that class. That is it a member of the objects created to that class.

Example 2:

If you donot want the variable for each instance of that class you can either declare it as a static or a const variable.

Note : The performance of the angular application is not that much dependent of the variables used. Instead of focussing more on variables you can optimize the performance by reducing the loop executions and function calls provided you dont create infinitely more variables

Finally your both examples or way of declaring variables can't be pared and judged which is better

I think it's a very valid question today as well w.r.t. angular ponents.

Setting best practices w.r.t. your use cases for your code base might be a best bet.

Your reasoning regarding view rendering and change detection also sounds logical. Though it might not be very impactful but would help in code readability.

Additionally, one practice that can be followed is having separate file containing variables per ponent, This might be useful for ponents having lot of constants, flags and temporary variables.