React native variable declaration

Question

Whats the difference between these way of declaring variables in react-native.

import React, { Component } from 'react';
import { AppRegistry, Image, View, Text, } from 'react-native';
export default class Hello extends Component {
render() {
**const var1 = 'hi';**
return ( );
}}

import React, { Component } from 'react';
import { AppRegistry, Image, View, Text, } from 'react-native';
**const var1 = 'hi';**
export default class Hello extends Component {
render() {
return ( );
}}

Possible duplicate of What is the scope of variables in JavaScript? — ztadic91
– ztadic91, Commented Mar 24, 2018 at 22:37
@acdcjunior yes I do, my question is more specific to react native. Would you be able to answer ?? — veeRN
– veeRN, Commented Mar 24, 2018 at 23:07

acdcjunior · Accepted Answer · 2018-03-24 23:50:56Z

10

The difference between those variables is scope.

In both cases, due to the use of const, var1 will only be accessible after its declaration.

The scope of a const variable is it's running execution context. In your two examples, the execution contexts are different.

In the second example:

import React, { Component } from 'react';
import { AppRegistry, Image, View, Text, } from 'react-native';
const var1 = 'hi';
export default class Hello extends Component {
  render() {
    return ( );
  }
}

The execution context where var1 is declared is the file.

This means that at any point in the file after const var1 = 'hi'; the var1 variable is available and its value is 'hi'.

In your first example:

import React, { Component } from 'react';
import { AppRegistry, Image, View, Text, } from 'react-native';
export default class Hello extends Component {
  render() {
    const var1 = 'hi';
    return ( );
  }
}

The execution context of the declaration is the method render().

Similarly, it means that at any point in the render() method and ONLY inside that render() method after the const var1 = 'hi'; statement the var1 variable is available and its value will be 'hi'.

tl;dr

In summary, when you use const var1 = 'hi'; inside a method, the var1 (constant) variable will only be available inside that method. OTOH, when you declare const var1 = 'hi'; in the file, outside of any class or {} or function, var1 will be available in the whole file.

In both cases, though, var1 will only be defined/available after the const var1 = 'hi'; declaration statement.

answered Mar 24, 2018 at 23:50

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

veeRN Over a year ago

Thanks for the very detailed explanation, really appreciate it, exactly what I was looking for.. will it make any performance difference defining the variables in file scope vs method scope?

acdcjunior Over a year ago

In general, you'll want to keep the scope of your variables as "focused" as possible. This is more a maintainability measure than a performance one.

acdcjunior Over a year ago

As far as performance goes, doesn't make any difference if you declare a variable in one or another scope. The variable will be "allocated" as long as that scope is in execution.

acdcjunior Over a year ago

So if you have a variable declared inside a method, it will allocate memory every time that method runs (but will stay allocated just when that method is running). If you declare in a file, it will be available until any code (a class, a function) of that file exists and uses it (there's less allocate-deallocate, but otoh they will stay longer in memory while being not used). As you can see, there are advantages and drawbacks for both.

acdcjunior Over a year ago

In general, though, a single variable is very unlikely to affect your apps performance. You shouldn't worry about it. (You will know when you should, it will be very obvious, like opening a spreadsheet of a million rows.) As said, we prefer to keep scopes small/focused because it is easier to understand and maintain code. When a variable has a wide scope (like in your second/file example), there's too much code that can access it (or change it when it is not a const), so a future programmer may have a harder time trying to fully grasp really why that variable is useful.

|

Collectives™ on Stack Overflow

React native variable declaration

1 Answer 1

tl;dr

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

tl;dr

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related