bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/React/React Core
React•React Core

React ES6 Variables

Variables

Before ES6 there was only one way of defining your variables: with the var keyword. If you did not define them, they would be assigned to the global object. Unless you were in strict mode, then you would get an error if your variables were undefined.

Now, with ES6, there are three ways of defining your variables: var , let , and const .

Example

var

var x = 5.6;

If you use var outside of a function, it belongs to the global scope.

If you use var inside of a function, it belongs to that function.

If you use var inside of a block, i.e. a for loop, the variable is still available outside of that block.

var has a function scope, not a block scope.

Example

let

let x = 5.6;

let is the block scoped version of var , and is limited to the block (or expression) where it is defined.

If you use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.

let has a block scope.

Example

const

const x = 5.6;

const is a variable that once it has been created, its value can never change.

const has a block scope.

The keyword const is a bit misleading.

It does not define a constant value. It defines a constant reference to a value.

Because of this you can NOT

  • Reassign a constant value
  • Reassign a constant array
  • Reassign a constant object
  • Change the elements of constant array
  • Change the properties of constant object

Previous

React ES6 Arrow Functions

Next

JavaScript Array map()

This chapter

Overview
45

Lessons

142m

Read time

1. React Tutorial2. React Introduction3. React Getting Started4. Your First React App5. React Render HTML6. Upgrade React7. React ES68. React ES6 Classes9. React ES6 Arrow Functions10. React ES6 Variables11. JavaScript Array map()12. React ES6 Destructuring13. React ES6 Spread Operator14. React ES6 Modules15. React ES6 Ternary Operator16. React ES6 Template Strings17. React JSX18. React JSX Expressions19. React JSX Attributes20. React JSX If Statements21. React Components22. React Class Components23. React Props24. React Destructuring Props25. React Props Children26. React Events27. React Conditional Rendering28. React Lists29. React Forms30. React Submit Forms31. React Forms - Textarea32. React Forms - Select33. React Forms - Multiple Input Fields34. React Forms - Checkbox35. React Forms - Radio36. React Portals37. React Suspense38. Styling React Using CSS39. React CSS Modules40. React CSS-in-JS41. React Router42. React Transitions43. React forwardRef44. React Higher Order Components45. React Sass Styling