JavaScript 101 - Variables feature image Photo Credit: Dmitry Baranovskiy

Contents

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


comments powered by Disqus