JavaScript: From First Steps to Professional

const & Accessing Variables

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
JavaScript: From First Steps to Professional

Check out a free preview of the full JavaScript: From First Steps to Professional course

The "const & Accessing Variables" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana briefly discusses the difference between the const and let keywords, how to utilize a variable, and demonstrates various naming conventions for variables.


Transcript from the "const & Accessing Variables" Lesson

>> I think there was a question also in chat about another purple word [LAUGH] in our syntax highlighting theme here. So another special keyword in JavaScript called const. So const is sort of an alternative to let that also helps us declare a variable and assigned to it. With const, the value of the variable that I'm creating can't ever be changed.

So with let, we saw that I can use the equals operator, the assignment operator to assign a value to the variable, and I could actually assign different variables over and over. I could change the value of that variable over and over. With const, I can't do that. I have to, first of all, if I'm using const, I'm saying, hey, JavaScript, remember this value with this variable name forever and ever as long as this particular process or whatever is running.

[LAUGH] So the difference is, with const, once I have assigned a value to that variable and I have to assign a variable, I can't just declare the variable and not assign it. I have to assign it a value, and I can never change the value that that variable is assigned to.

So that is the difference between let and const. And we're going to come back to that a little bit later. But just to go back to our whiteboard here, this is sort of, we could think about it as saying, what did I call that variable? Unchangeable, Variable or something like that.

With const, I'm saying, hey, JavaScript, this value, whatever it is, A string never give up, let's say, or never gonna give you up. JavaScript, I want you to remember this, I'm gonna use a red arrow to indicate forever. I want you to remember that this value, never gonna give you up, is the value of my unchanging variable.

So it's kind of a different relationship, and we're gonna talk a little bit about that in a moment. But what we have to do is we can't just declare unchanging variable with no value. I could maybe give it null as a value. For example, I could say, hey, JavaScript, remember null forever.

Might not be super useful, but I could do it if I needed to. And that association is never gonna be broken in JavaScript mind. It's always gonna be the value that I assigned to this variable when I declared it. So const is a alternative to let when we are creating variables in our programme.

And we're gonna talk a little bit about the difference between let and const and changing values over time a bit later. So now how about when I use a variable? So in this case, I have a couple of phinos that are sort of like values but not exactly, which are called, one more time?

>> Expressions.
>> Expressions, excellent, yeah. So I have a couple of expressions using variables here. And essentially, what I can do now, once I have declared and assigned a value to this variable, I can use it like a value in my programs. So the same way that I could do a, Let's go back to my console.

So the same way that I could do, let's say, 42 minus 10. If I create a variable called answerToLife and give it a value of 42, so declaring and assigning a variable, there's a Hitchhiker's Guide to the Galaxy reference. Now, I can use that just like I would use the literal value 42 in my code.

So as far as JavaScript sees, in an expression like this, it's going to see the word answerToLife, look for the value it remembers as the value of that variable, and then use that value in whatever expression you're doing, whatever operation you're trying to do. Make sense? Cool, I see lots of nodding.

I feel like I hear the chat nodding. [LAUGH] And similarly, that variable might be a string, right? So we can do whatever string things we usually do, right? Of like ask for the uppercase version of the string or ask the index of some character in the string. So depending on what type of value this variable remembers, we can use the variable as if it was that value in our code.

Question so far, I see a couple of thinky faces. [LAUGH] So I don't know if there's thinkie emoji in the chat. Yes, question.
>> So one thing I've noticed is we don't specify any data types to these variables, it's all kinda, as you said earlier, loosey-goosey. Can you specify a data type?

So where you have a variable and you only want it to be a string or you only want it to be a number, can you do that or everything is just kind of what it is?
>> Loosey-goosey, yeah, so [LAUGH] and I'm sure Mark might have more to say on this matter.

But essentially, so in JavaScript, we say that JavaScript has dynamic typing, and it doesn't really care what type of value you give it to remember for particular variable. So JavaScript itself does not have the concept of a variable only of a certain type. Some other languages do, some statically-type languages do have that concept of a number variable versus a string variable versus a Boolean variable.

JavaScript has the concept of variable. And so, yes, it is super loosey-goosey in JavaScript, and that can cause all kinds of headaches. So the industry or the community as it were has come up with ways to deal with that, which you can also learn about in other courses on Frontend Masters, for example.

The most popular of which, Mark, you wanna chime in? [LAUGH]
>> TypeScript.
>> TypeScript. So TypeScript, as the name might suggest, is a JavaScript-ish language that has stronger types. And in TypeScript, you can do exactly this. So you can say this thing, this variable is gonna always hold a value of this type.

Or we're gonna talk later about functions, you can say this function is going to always require a number as an input. JavaScript itself doesn't have that. So that's why languages like TypeScript have been invented, created. And it's not the only one, but it's probably the most widely known and used by far in order to work around this.

So great question, and the answer is, nope, JavaScript don't care. It's just, you do whatever you want. [LAUGH] Yeah, good question. Okay, let's take a moment and talk about names for variables. So I said before that I can name the variable whatever I want, that was a lie.

I lie, I can name the variable almost whatever I want. So what are valid variable names in JavaScript? Well, they usually contain mostly letters, sometimes they have other things, like underscores or numbers in them. And so the top three bullets in this list here are all perfectly legal valid variable names in JavaScript.

The most common thing you'll see is variables of the first form, so where you have validVariable with a lowercase valid and then a capital V variable. You also might see, and these variable names with underscores joining the words, which is less common in JavaScript but does show up sometimes, but is more common in other languages.

Python, for example, you'll see a lot more of the second type of variable name than of the first one. JavaScript tends to go towards the first one. You can do other things, you could start a JavaScript variable with a capital letter. You could have numbers in them, at the end or in the middle.

You could have an underscore. It's not so common, though, so it's maybe less normal that you'd see one, but that's technically fine. What you cannot do is start a variable with a number or use other characters or things like emoji, unfortunate, actually doesn't know, I don't think so.

[LAUGH] But you can't have an exclamation point in your variable name, for example. So that last one, 0chanceThisWillWork, is so named for a reason. So the most common type of variable names or structure of variable names I should say are in what we call camelCase In JavaScript. So camelCase, an example is that validVariable that we see at the beginning here, where it's sort of shaped like a camel.

There's capital letters in the middle that look like the hump of the camel's back. So I call it camelCase. And the second bullet point here with the underscores. Anybody know what that's called, as opposed to camelCase, Paul?
>> Snake case.
>> Snake case, yeah. You can also have all caps with underscores, which is screaming snake case, and yada, yada, yada.

There's a whole bunch of different conventions, but in JavaScript, the convention, and this is just a preference, this is just a cultural thing, is usually camelCase variables. With the exception of sometimes constants, things that are never ever gonna change and that are kind of representing values, sometimes we have all caps variable for them or screaming snake case.

Anyway, it's not super important except to know, don't start your variables with a number. Don't put weird characters in them. When in doubt, go for camelCase. It's a cute little camel.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now