JavaScript Foundations : Variables

Team TreeHouse's description of the course

Team TreeHouse’s description of the course

Basics

With the exception of the instructor’s robot friend, it was pretty much the same as the Basics in the Intro course.
One new thing though was getElementById.


var myDiv = document.getElementById('myDiv');
myDiv.style.background = "black";
myDiv.style.color = "#ffffff";

 

getElementById accesses an element in the HTML with a specific id name. In this case, my HTML file has a div element called ‘myDiv.’ My HTML file links to a JavaScript file that references the ‘myDiv’ element. Then, I created a variable in the JS file called “myDiv” that I can use throughout the rest of my JavaScript code.

 

Naming

Naming variables in JavaScript is pretty easy. In some languages, they can only start with lowercase letters. In JavaScript, variable names can start with any letter, upper or lowercase. They can also start with _ and $ symbols.

Variables cannot start with numbers, but they can be used anytime after the first character. There are other illegal characters like %, – and @ symbols that can’t be used anywhere in the variable names.

There are also some reserved words in JavaScript like if, else, continue, switch, private that you cannot use as variable names. Imagine trying to name a variable “if” and calling it later. You’ll confuse the computer because it wouldn’t know if you’re calling the variable or starting a new if statement. You’d never have functioning code.

You’ll see an error like this one:

SystemError: Unexpected token (character)

where character is the symbol or reserved word you typed in.

 

Null and Nullified

It’s possible to declare a variable that is empty.

var myVar;

This results in the variable being “undefined.” It represents a value that was never defined.

 

Null is used when a variable has an empty value, but is not empty by default.

var myVar = null;

 

 

console.log(typeof myVar);

 

 

Scope

When you create a variable, you can’t always use that variable at any point in your code. Variables belong to a scope, and that scope determines where your variable is usable.

If you create a variable within a function, you can only use that variable inside of that function.

Functions are pieces of code that store reusable code that we can access later. Function names follow the same rules as variable functions.

function sayHello () {
var hello = "Hello ";

You can also nest functions inside of other functions.

function sayHello () {
var hello = "Hello ";
function inner () {
var extra = " There is more!"
console.log(hello + world + extra);
}
inner();
}

The function inner is nested inside of the function sayHello which is why you can call it while in the sayHello function. That’s also why the inner function can access not just the world variable but the hello variable as well. It is within the scope of the variable.

It makes sense as I’m typing it out but I’m not sure if it will make sense to anyone that reads this at some point…

 

Shadowing

Two variables in different scopes can have the same name. This is called shadowing.
Do you have a headache yet?

Shadowing is something I’m going to need more practice with understanding. When I got to the quiz, there were two seemingly identical questions about which variable gets printed in the console, but they had different answers.

Hoisting

If you happen to declare a variable in the middle of a scope, like in the middle of a function, the declaration is hoisted to the top of the function. It’s like writing the declaration and giving it a value separatly.

 

TL;DR

The first part of the JavaScript Foundations course was basically a very detailed reiteration of the same stuff from the Intro to Programming course I did a few weeks ago.

 

 

The Foundations courses on Team Treehouse are all pretty lengthy (both CSS Foundations and JavaScript Foundations are about 6 hours long) and it makes finishing the track seem a nearly impossible task. These particular courses are geared toward people with not much experience with programming, and I don’t have experience with JavaScript. There are definitely some aspects that I could use a course on, but I also feel myself getting bored of it.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s