const Declarations in es6 (ES2015)

Jacob Carter
InstructorJacob Carter
Share this video with your friends

Social Share Links

Send Tweet
Published 9 years ago
Updated 6 years ago

Read only variables are available in JavaScript (es6/es2015). We will use const declarations and their benefits, like read only and block scope.

[00:00] As a developer coding in JavaScript with ES5, if you want to declare a variable whose value is to remain constant, it's a best practice to name that variable in all upper case letters. This doesn't actually prevent the variable from being reassigned to a different value, but is more like a note to other developers, saying, "Hey, this is my intention." Notice how if I console log out value, what is returned to us is fubar, because that's the last assignment that was given to that variable.

[00:25] ECMAScript 2015 introduces us to constant declaration, a const declaration allows us to declare a variable that is read only. In the example if I try to reassign the value to fubar, we'll see the value is read only error thrown, because we have declared this variable as a constant. It's important to understand that what a const is, is not actually a constant variable, but a constant reference. In the example, I have declared value to be an object.

[00:52] Down below, I can assign and reassign properties of that object without breaking my const rules. If I console.log out value, we'll see an object with a key-value pair of foo and bar returned to us. However, if I try to reassign the value of foo to just the string literal bar, our value is read only error is once again thrown, because I have changed the reference of this const declaration. There are many common use cases for why you might want to use a const in your application.

[01:19] Perhaps you're using a third-party API, where you want to specify an API key, an API secret that will remain constant throughout the use of your application. Some other common use cases include assigning a port number in a node application, perhaps creating a margin that is used for profit and loss calculations within an application, or maybe you just want a constant reference to pi, which you know will not change.

[01:42] Another important thing to note is that like let declaration, const declarations adhere to block scope. Block scope can simply be understood as anything between two curly brackets. In the example, if true { const foo = bar, and then outside of those curly brackets I try to console.log foo, we will see the error foo is not defined. This is because the console.log is outside of the scope of the const declaration. However if we move the console.log within that block scope, we'll see that bar is returned.

Varghese Pallathu
Varghese Pallathu
~ 9 years ago

In this redux (https://github.com/reactjs/redux/blob/master/examples/counter/components/Counter.js) example, I see some code:

const { value, onIncrement, onDecrement } = this.props

Your course did not cover something like this. Could you please explain what does the above do?

Jacob Carter
Jacob Carterinstructor
~ 9 years ago

This syntax is creating four variables. One for each property of the props object and one for the object as a whole. See this babel translation of the code to ES5. http://tinyurl.com/hwpox2p

Xiao Chen Xing
Xiao Chen Xing
~ 8 years ago

Can you talk about the use and values of const function? Is it also just protecting the function variable being assigned to a different value?

Mike
Mike
~ 8 years ago

Nicely explained.

Venkata Janapareddy
Venkata Janapareddy
~ 8 years ago

Could you please tell me how you are running the js file in the built in terminal? Thanks

Markdown supported.
Become a member to join the discussionEnroll Today