Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

const Declarations in es6 (ES2015)

2:14 JavaScript lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Martin

traceur? seriously? are we gonna have some mootools lessons soon? :D anyway keep going with es6 lessons guys :)

In reply to egghead.io
Avatar
Jacob

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?

Avatar
Jacob

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

In reply to Jacob
Avatar
Brandon

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?

Avatar
Mike

Nicely explained.

Avatar
Venkata

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

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."

var VALUE = 'hello world';
VALUE = 'foo bar';
console.log('value: ', VALUE);

Notice how if I console log out value, what is returned to us is foo bar, because that's the last assignment that was given to that variable.

ECMAScript 2015 introduces us to constant declaration, a const declaration allows us to declare a variable that is read only.

const VALUE = 'hello world';
VALUE = 'foo bar';
console.log('value: ', VALUE);

In the example if I try to reassign the value to foo bar, 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.

Read Only Error

In the example, I have declared value to be an object. 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: 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.

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.

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.

if(true){
  const foo = 'bar';
}
console.log('foo: ', foo); // foo is not defined

However if we move the console.log within that block scope, we'll see that bar is returned.

if(true){
  const foo = 'bar';
  console.log('foo: ', foo);
}
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?