JavaScript 101 - Variables
Variables
Variables are the tools that allow us to temporarily store information by representing a value by giving it a name. In JavaScript variable names can be just about any visible character. It is ‘best practice’ for all variables in javascript to start with a letter, $, or _, and only contain letters and numbers and is not a reserved word.
Variables in general consist of two categories of variables. Primitives and Non-Primitives. They vary from language to language, but they are generally considered to be:
Primitives
Variables | Description |
---|---|
integer | A whole number value. |
float | A decimal number value. |
character | Any ASCII/UNICODE character. |
boolean | TRUE or FALSE. |
Non-Primitives
Variables | Description |
---|---|
array | Multiple values. |
function | A logical grouping of reusable code. |
string | Multiple characters. |
object | Logical grouping of variables and functions. |
Primitives are named as such, because they can fit directly in a section of memory (byte, word, or double), thus can be directly mapped to machine code. Non-Primitives take up more that one chunk of memory and have to be interpreted by the software further. There are several methods for grouping multiple chunks together and each have their own trade-offs.
JavaScript by default only has a few types. String, number, boolean, object, function, null and undefined.
Note: {: style=”display: block”}
In JavaScript all variables are a “type” of object. Where in Class Based languages, like PHP, objects
are a “type” of variable. This is why we can do things like someVar.length();
on all variables in JavaScript,
but in PHP the same thing is done by calling a separate function sizeof($someVar);
.
Typed vs. Untyped vs. Loosely Typed
Typed or strongly typed languages (C family of languages) are languages that the type of variable must be declared when the variable is instantiated or defined and can not change type through out the program.
//C, C++, C#
string someString;
int someInt = 8;
Untyped languages such as JavaScript do not enforce any types. They may store a type as a definition for variable
checking ie typeof
.
//JavaScript
var someVar = 8;
someVar = 'Not Eight';
You Might Get Shanked Warning::
Whether JavaScript is ‘Loosely Typed’ or ‘Untyped’ is a hotly debated topic.
Loose(ly)/Weak(ly) Typed languages are somewhere in between. The definition is kinda fuzzy. Some consider PHP to
be a loosely typed language because of the ability to ‘type cast’ variables. Type casting is the ability to state the
type a particular variable in that circumstance. ex: function someFunction( (boolean)$BoolVar ){//do something}
<?php
//PHP
$someVar = 8;
JavaScript is an Untyped, automatically typed, dynamically typed language. Which means that JavaScrip guesses what the type of a variable by the context. NOTE: it is still the job of the developer to insure the correct type is used as needed. Example:
var aBoolean = true;
var aNumber = 1;
if(aBoolean){
//is true
}
if(aNumber){
//is also true
}
if(aBoolean && aNumber){
//is still true
}
if(aBoolean == aNumber){
//is true again
}
//Notice the === instead of ==
if(aBoolean === aNumber){
//is **false** !!
}
Variable Operators
Arithmetic Operators
Operator | Example | Description |
---|---|---|
+ | x=x+3 | Addition |
- | x=y-3 | Subtraction |
* | x=y*3 | Multiplication |
/ | x=r/e | Division |
% | x=5%2 | Remainder |
++ | x++ | Increment |
– | x– | Decrement |
Assignment Operators
Operator | Example | Equates to |
---|---|---|
= | x=y | x=y |
+= | x+=y | x=x+y |
-= | x-=y | x=x-y |
*= | x*=y | x=x*y |
/= | x/=y | x=x/y |
%= | x%=y | x=x%y |
Scope
When JavaScript encounters a variable for the first time it attempts to determine it’s scope by searching the local scope,
then going up the scope until global scope is reached. If it still has not found the variable it will declare a new
global variable. The var
command lets JavaScript know that you want a new variable in current scope. Scope flows down.
Variables created at a higher scope (parent) can be accessed by all lower scopes.
Example
var globalVar1;
globalVar2;
var function parentFunction(){
var localVar;
globalVar3;
//Can access: globalVar1, globalVar2, globalVar3 and localVar
var function childFunction(){
var localVar2;
//Can access: globalVar1, globalVar2, globalVar3, localVar and localvar2
}
}
//Can access: globalVar1, globalVar2 and globalVar3
JavaScript has function level scoping. That means that functions act as a container for variable declared inside them. For you C guy/gals this takes a bit of getting used too. Unlike other languages (C, C++, C#, OOC) and other, if statements, loops and such are not scope containers. Combine that with the asynchronous nature of JavaScript you can end up in a scope nightmare, but well cover that some time later. Until next time keep Coding.