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?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — ztadic91, Mar 24 '18 at 22:37
@acdcjunior yes I do, my question is more specific to react native. Would you be able to answer ?? — veeRN, Mar 24 '18 at 23:07

score 10 · Accepted Answer · answered Mar 24 '18 at 23:50

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 '18 at 23:50

acdcjunior

132,397
37
331
304

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? – veeRN Mar 24 '18 at 23:57
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 Mar 25 '18 at 00:00
Thanks a lot.. appreciate it – veeRN Mar 25 '18 at 00:03
1

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 Mar 25 '18 at 00:03
2

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 Mar 25 '18 at 00:07
1

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. – acdcjunior Mar 25 '18 at 00:10
And, just as final note, this behavior is not specific to react-nactive, it is the same in all environments of javascript. (The small scope guideline is actually for **all** languages.) But that's it! Cheers! :D – acdcjunior Mar 25 '18 at 00:12

React native variable declaration

1 Answers1

tl;dr