JavaScript Variables

September 04, 2014 in Web Development Articles

Written by Todd Wright


What I Wish I had Picked up in Introduction to JavaScript

I’ve been doing JavaScript for a few years, quite a few actually. I learned JavaScript back in the 1990s from the masters who were concerned with rocking the image swaps, scrolling banners, and onSubmit event handlers. This was a great time when the bulk of JavaScript for a page fit on a single editor page and browser inconsistencies were primarily handled by not using a particular feature.

The world changed. JavaScript is extremely popular (and powerful!). This language enables all kinds of coolness that abounds on the dynamic web today. A scan of the most popular sites will see a vast array of tricks that to the developer’s eye will stand out as a fantastic bit of code. The modern web app is usually an aggregation of 3 distinct languages (yes, you need them all): HTML, JavaScript, and CSS. Of the three, JavaScript can often be the trickiest.

Var Keyword

The var keyword in JavaScript was often taught as syntactical sugar, optional. It is not. As your code base of JavaScript explodes, the nuances of the var keyword become quite important! I am still amazed how often a JavaScript developer misunderstands the importance of good style and good habits when it comes to var. The var keyword scopes a variable. Two scopes are commonly defined, global and local.

Global scope are all those variables that are defined at the top level of your code.

<script language="javascript">
var msg="Global scoped variable";
</script>

The msg variable above is available everywhere in the page. The global scope is incredibly powerful for sharing variables around (remember, variables point to things: values, functions, and objects objects). The danger that everyone speaks about is the pollution of that namespace. There is only one global scope, and once you add a variable to that scope, another definition of that variable in the global scope is a collision.

Local scope is a set of variables that are available within a smaller set of code lines – generally a top-level function. Variables defined within a local scope are available to that narrower scope, but not the outer scopes.

<script language="javascript">
var msg="Global scoped variable";
var sayMessage = function(){
   var innermsg = "Inner-scoped variable";
   console.log(innermsg);
}
sayMessage();
console.log(innermsg); //The variable is not visible here.
</script>

Variables are defined with the var keyword, which places them in a scope. Assigning a value to a variable without the var keyword implicitly creates the variable in the global scope. Did you catch that? That is a really important concept! JavaScript will implicitly add your new variable to the global scope if you forget the var keyword.

<script language="JavaScript">
var msg="Global scoped variable";
var sayMessage = function(){
   innermsg = "Inner-scoped variable"; //Oops! Missed the var keyword!
   console.log(innermsg);
}
sayMessage();
console.log(innermsg); //The variable is now visible!
</script>

JavaScript is exploding on our pages. It is not unheard of to have hundreds (or thousands) of lines of JavaScript on a page. A very simple practice of using var to declare your variables will save you hours of painful JavaScript debugging!!

Keep an eye out for a few more articles that will dive much deeper into the “Why” and patterns around this scoping topic.

Accelebrate offers private JavaScript training for groups and instructor-led online JavaScript classes for individuals.


Written by Todd Wright

Todd Wright

Todd is a Java developer and trainer specializing in Enterprise Java Technology (J2EE), Perl, and XML related software. Todd is a published author of several software development and design technical training books.


Learn faster

Our live, instructor-led lectures are far more effective than pre-recorded classes

Satisfaction guarantee

If your team is not 100% satisfied with your training, we do what's necessary to make it right

Learn online from anywhere

Whether you are at home or in the office, we make learning interactive and engaging

Multiple Payment Options

We accept check, ACH/EFT, major credit cards, and most purchase orders



Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan