{"id":4185,"date":"2023-05-01T04:16:35","date_gmt":"2023-05-01T04:16:35","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4185"},"modified":"2023-06-10T11:30:23","modified_gmt":"2023-06-10T11:30:23","slug":"react-es6-tutorial-variables","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-es6-tutorial-variables\/","title":{"rendered":"React – ES6 Tutorial – Variables"},"content":{"rendered":"

What is ES6?<\/em><\/h2>\n

ES6 stands for ECMAScript 6.<\/em><\/p>\n

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.<\/em><\/p>\n

Variables<\/h2>\n

Before ES6 there was only one way of defining your variables: with the\u00a0var<\/code>\u00a0keyword. 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.<\/p>\n

Now, with ES6, there are three ways of defining your variables:\u00a0var<\/code>,\u00a0let<\/code>, and\u00a0const<\/code>.<\/p>\n

Example<\/h3>\n

var<\/p>\n

var x = 5.6;<\/pre>\n
If you use\u00a0var<\/code>\u00a0outside of a function, it belongs to the global scope.<\/p>\n
If you use\u00a0var<\/code>\u00a0inside of a function, it belongs to that function.<\/p>\n
If you use\u00a0var<\/code>\u00a0inside of a block, i.e. a for loop, the variable is still available outside of that block.<\/p>\n
\n
var<\/code>\u00a0has a\u00a0function<\/em>\u00a0scope, not a\u00a0block<\/em>\u00a0scope.<\/strong><\/span><\/p>\n<\/div>\n
\n
Example<\/h3>\n
let<\/p>\n
let x = 5.6;<\/pre>\n
let<\/code>\u00a0is the block scoped version of\u00a0var<\/code>, and is limited to the block (or expression) where it is defined.<\/p>\n
If you use\u00a0let<\/code>\u00a0inside of a block, i.e. a for loop, the variable is only available inside of that loop.<\/p>\n
\n
let<\/code>\u00a0has a\u00a0block<\/em>\u00a0scope.<\/span><\/strong><\/p>\n
Example<\/h3>\n
const<\/p>\n
const x = 5.6;<\/pre>\n
const<\/code>\u00a0is a variable that once it has been created, its value can never change.<\/p>\n
\n
const<\/code>\u00a0has a\u00a0block<\/em>\u00a0scope.<\/span><\/strong><\/p>\n<\/div>\n
The keyword\u00a0const<\/code>\u00a0is a bit misleading.<\/p>\n
It does not define a constant value. It defines a constant reference to a value.<\/p>\n
Because of this you can NOT:<\/p>\n