Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>i. Variables</title>
</head>
<body>

<script id="jsbin-javascript">
/*
[Variables]

Variables are containers for holding values.
Without variables the values in our program would disappear and we
wouldn't be able to use them again.

[Declaring and intializing a variable]
The first step to creating a variable is using the keyword var.
The second step is to give our variable a name that indicates
what the values in the variable consist of.


//example //

*/
var color;

/* The code above uses the keyword var, which lets the interpreter know that
"color" is a variable.
We then named our variable color which would let us, or someone in the future viewing
our program know that the values in this variable probably have something to do with
colors.
Variables should always begin with a lowercase letter and the first letter of each following
word should be capitalized. This is called camelCase.
// example //
*/
var everyFirstLetterOfANewWordShouldBeCapitalized;
/*There are certain words that Javascript has reserved, called keywords, that should never be used for
your variable names. A few of these keywords are var, const, let, function. These words mean other
things to the browser so it's best to just not use them when declaring a variable.
/*

After you declare the variable you have to initialize it.
Initializing the variable means you give it a value.
Without initializing the variable by default the value is undefined,
because you didn't define it.
 To intialize a value you use the '=' operator and you give the variable a value.

 //example // */

var color = red;

/* In the above example we used the assignement operator ( = ) and gave our variable
a value of red.

[Variable Reassignment]
Variables can be reassigned to different values.
*/
// example //

var color = red;
console.log(color);
// the console would print out red

var color = blue;
console.log(color);
/* we have reassigned our variable color to have a value of blue so the console
would print out blue
*/

/* [What type of data variables store]
Variables can store any kind of data.
When a variable stores a primitive (number, string, boolean, undefined, null)
that value is stored directly into that variable.
When a variable stores a complex data type (arrays, objects) the variable
points to a place in memory.

The reason that primitives and complex data types are stored differently is because
primitive values have a fixed number in memory whereas complex data types can grow in size.
In other words, primitive data types are stored exactly at the variable
while complex data types reference to a data value.

A good visual example I read was that primitive values are like your mom writing on a
sticky note an item or two for you to pick up
at the grocery store. The items are written directly on the sticky
note. This would be the equivalent of storing a primitive type.

Whereas if your mom wanted you to go grocery shopping she might have written out
a long list that's too big for the size of the sticky note. So on the sticky note she might reference
you to another place where the grocery list is stored. So on the sticky note she might write
"The grocery list is stored inside of the kitchen drawer". That is similar to how a complex data type is stored.
// code example//
*/
var color = blue;
console.log(blue);
// blue is stored directly in the container color

var colorObj = {
          darkColor: black,
          mediumColor: tan,
          lightColor: baby blue
}

/* Unlike the color array which pointed us directly to our one value of
blue, colorObj points us to
an object that holds 3 different values.
*/

/* [Variable Scope]
Variables are either local scope (within a function) or global scoped (outside
a function).

//example of local scope function//

*/
function () {
  // variables with local scope go inside of here //
  //this means that the variable can only be accessed inside of this function//
}

//example of global scope //

var color = "blue";
//color is accessible outside of the function below

function () {
  //color is also accesible inside of this function//
}

/* [Why we use variables]
Another upside of variables is that they save time.
Instead of retyping what a value is every single time, we can simply reference the variable.
Imagine typing a bunch of never ending objects.
Referencing a value by a name convinient because even if the variables value changes or is extremely long
all we have to do is reference it by its name. This also makes it easy to manipulate our value. Instead of
manually changing  all instances of a value, we can just change the variable which would change all of the
values for us.

//example//
*/
/* now if we wanted to change the above color we could just change the variable color, instead
of changing the values in the colorScheme variable */

var color = "blue";

var colorScheme = "The color scheme is + ' ' + color"
console.log(colorScheme); // the console would print out "The color scheme is blue.

var color = "red";
console.log(colorScheme) // the console would now print out "The color scheme is red"
//we didn't have to manipulate anything in the colorScheme variable.


/* [Constant]

ES6, a newer version of Javascript, has a new variable called 'const'.
The const variable is:
- block scoped
- cannot be reassigned new values
- hoisted to the top of the block scope
-must be assigned a value at runtime

This is different from a regular variable because regular variables are
function scoped.

//example //
*/
if (true ) {
const scopeExample = "I am block scoped"
const scopeExample = "I cannot be reassigned a new value"
console.log(const); // the interpreter would say something along the lines of
  //'scopeExample has already been declared'//
}

/*The above example shows that const is block scoped.
It also shows that you cannot reassign a new value, the interpreter would
tell you that scopeExample has already been declared.

/* [let]
Javascript ES6 has another new variable by the name of 'let'.
The let variable
- is scope blocked
- can be reassigned another value
 The difference between 'var' and 'let' is there scope.
 var's scope is the entire function, while lets scope is block scoped.

*/

function varTest() {
  var x = 3;
  if (true) {
    var x = 2;  // vars scope is the WHOLE function, so reassigning var in one part of the function,
    // changes the variable in the whole function
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 3;
  if (true) {
    let x = 2 // let is block scoped. let exists as a completely new variable. lets value
    // is 2 ONLY inside of this BLOCK. when in block scope let is in its own world.
    console.log(x) // 2
  }
  console.log(x) // let's value is still 3 since it was declared outside of the block.
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">
/*
[Variables]

Variables are containers for holding values.
Without variables the values in our program would disappear and we
wouldn't be able to use them again.

[Declaring and intializing a variable]
The first step to creating a variable is using the keyword var.
The second step is to give our variable a name that indicates
what the values in the variable consist of.


//example //

*/
var color;

/* The code above uses the keyword var, which lets the interpreter know that
"color" is a variable.
We then named our variable color which would let us, or someone in the future viewing
our program know that the values in this variable probably have something to do with
colors.
Variables should always begin with a lowercase letter and the first letter of each following
word should be capitalized. This is called camelCase.
// example //
*/
var everyFirstLetterOfANewWordShouldBeCapitalized;
/*There are certain words that Javascript has reserved, called keywords, that should never be used for
your variable names. A few of these keywords are var, const, let, function. These words mean other
things to the browser so it's best to just not use them when declaring a variable.
/*

After you declare the variable you have to initialize it.
Initializing the variable means you give it a value.
Without initializing the variable by default the value is undefined,
because you didn't define it.
 To intialize a value you use the '=' operator and you give the variable a value.

 //example // */

var color = red;

/* In the above example we used the assignement operator ( = ) and gave our variable
a value of red.

[Variable Reassignment]
Variables can be reassigned to different values.
*/
// example //

var color = red;
console.log(color);
// the console would print out red

var color = blue;
console.log(color);
/* we have reassigned our variable color to have a value of blue so the console
would print out blue
*/

/* [What type of data variables store]
Variables can store any kind of data.
When a variable stores a primitive (number, string, boolean, undefined, null)
that value is stored directly into that variable.
When a variable stores a complex data type (arrays, objects) the variable
points to a place in memory.

The reason that primitives and complex data types are stored differently is because
primitive values have a fixed number in memory whereas complex data types can grow in size.
In other words, primitive data types are stored exactly at the variable
while complex data types reference to a data value.

A good visual example I read was that primitive values are like your mom writing on a
sticky note an item or two for you to pick up
at the grocery store. The items are written directly on the sticky
note. This would be the equivalent of storing a primitive type.

Whereas if your mom wanted you to go grocery shopping she might have written out
a long list that's too big for the size of the sticky note. So on the sticky note she might reference
you to another place where the grocery list is stored. So on the sticky note she might write
"The grocery list is stored inside of the kitchen drawer". That is similar to how a complex data type is stored.
// code example//
*/
var color = blue;
console.log(blue);
// blue is stored directly in the container color

var colorObj = {
          darkColor: black,
          mediumColor: tan,
          lightColor: baby blue
}

/* Unlike the color array which pointed us directly to our one value of
blue, colorObj points us to
an object that holds 3 different values.
*/

/* [Variable Scope]
Variables are either local scope (within a function) or global scoped (outside
a function).

//example of local scope function//

*/
function () {
  // variables with local scope go inside of here //
  //this means that the variable can only be accessed inside of this function//
}

//example of global scope //

var color = "blue";
//color is accessible outside of the function below

function () {
  //color is also accesible inside of this function//
}

/* [Why we use variables]
Another upside of variables is that they save time.
Instead of retyping what a value is every single time, we can simply reference the variable.
Imagine typing a bunch of never ending objects.
Referencing a value by a name convinient because even if the variables value changes or is extremely long
all we have to do is reference it by its name. This also makes it easy to manipulate our value. Instead of
manually changing  all instances of a value, we can just change the variable which would change all of the
values for us.

//example//
*/
/* now if we wanted to change the above color we could just change the variable color, instead
of changing the values in the colorScheme variable */

var color = "blue";

var colorScheme = "The color scheme is + ' ' + color"
console.log(colorScheme); // the console would print out "The color scheme is blue.

var color = "red";
console.log(colorScheme) // the console would now print out "The color scheme is red"
//we didn't have to manipulate anything in the colorScheme variable.


/* [Constant]

ES6, a newer version of Javascript, has a new variable called 'const'.
The const variable is:
- block scoped
- cannot be reassigned new values
- hoisted to the top of the block scope
-must be assigned a value at runtime

This is different from a regular variable because regular variables are
function scoped.

//example //
*/
if (true ) {
const scopeExample = "I am block scoped"
const scopeExample = "I cannot be reassigned a new value"
console.log(const); // the interpreter would say something along the lines of
  //'scopeExample has already been declared'//
}

/*The above example shows that const is block scoped.
It also shows that you cannot reassign a new value, the interpreter would
tell you that scopeExample has already been declared.

/* [let]
Javascript ES6 has another new variable by the name of 'let'.
The let variable
- is scope blocked
- can be reassigned another value
 The difference between 'var' and 'let' is there scope.
 var's scope is the entire function, while lets scope is block scoped.

*/

function varTest() {
  var x = 3;
  if (true) {
    var x = 2;  // vars scope is the WHOLE function, so reassigning var in one part of the function,
    // changes the variable in the whole function
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 3;
  if (true) {
    let x = 2 // let is block scoped. let exists as a completely new variable. lets value
    // is 2 ONLY inside of this BLOCK. when in block scope let is in its own world.
    console.log(x) // 2
  }
  console.log(x) // let's value is still 3 since it was declared outside of the block.
}


</script></body>
</html>