JavaScript variables Vs LWC properties

Did you know that we cannot use JavaScript variables and LWC properties one for another in Lightning Web Components? Let's understand the difference.

Did you know that we cannot use JavaScript variables and LWC properties one for another in Lightning Web Components?

There are considerable difference between how JavaScript variables and LWC properties work and behave.

Here are some of the noteworthy differences between the two

  • We declare a LWC property without var, let and const where as a native JavaScript variable has to be defined with one of the mentioned keywords.
  • LWC properties are by default reactive, where are JavaScript variables by default  are not reactive.
  • LWC properties can be used in templates where as JavaScript variables cannot be used in template files.  
  • We can set the values to LWC properties from parent component which cannot be done to a native JavaScript variable.  
  • We need to use this notation to access LWC properties where as we use native JavaScript variables directly.
  • We can use decorators (@wire, @api, @wire) for LWC properties but not native JavaScript variables.
  • We can wire named import and default imports to LWC properties but not native JavaScript variables.
  • We can export JavaScript variables from LWC components but not LWC properties.

These are a few things I have noticed. Let me know in the comments if you can think of any other differences.