JavaScript 101

Part 1
Statements, Variables, Functions, and Primitive Data Types


Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun


Tell us about yourself.

  • Who are you?
  • What do you hope to get out of this class?
  • What is your favorite city?

What we'll cover today

  • Intro to Programming
  • Brief history of JavaScript
  • What does JavaScript do?
  • Statements
  • Variables
  • Primitive data types
  • Functions
  • Scope
  • Coding conventions

Intro to Programming

What is programming?

A way of telling the computer what to do. Commands!

Types of Programming

  • High-level: abstracts things away from the computer, makes it easier for us
  • Assembly: specific to the computer
  • Machine code: actual code executed by the computer

Compiled v. Interpreted Languages

Compiled Languages

Source code is translated to machine code before it can run. Usually these are lower-level languages closer to machine code.

Interpreted Languages

Code is executed automatically. Each statement is translated into subroutines that are already compiled into machine code. These are higher-level languages abstracted from machine code.

Compiled v. Interpreted Languages

The Language of the Web

Also used for plug-in scripting (Adobe/Mozilla/Chrome), game scripting, and more.

Brief History of JavaScript

  • 1995: At Netscape, Brendan Eich created "LiveScript", which gets renamed to "JavaScript".
  • 1996: Microsoft releases "JScript", a port, for IE3.
  • 1997: JavaScript was standardized in the "ECMAScript" spec.
  • 2005: "AJAX" was coined, and the web 2.0 age begins.
  • 2006:jQuery 1.0 was released.
  • 2010: Node.JS was released.
  • 2012: ECMAScript Harmony spec nearly finalized.

What can JavaScript do?


Each separate instruction in Javascript is called a 'statement'. A 'simple' statement represents a single instruction and ends with a semi-colon.


Type this in the JavaScript console in your web browser:

console.log('Hello World!');

What happens?


Variables store values so we can re-use them later.

Variables are one of the basic building blocks of Javascript.


Variables have to be declared before you can use them. There are two ways to do this.

Option 1:

var x;
x = 5;

Option 2:

var x = 5;

In both cases, x is our variable. 5 is the value of that variable.


You can also re-assign variables:

var z = 5;
z = 1;

What does this print out?

Data Types


Variables can store different "types" of data.

Primitive Data Types: Strings

An immutable string of characters.

var greeting = 'Hello Kitty';
var restaurant = "Taco's Place";

Primitive Data Types: Numbers

Whole numbers (6, -102) or floating point (5.8737).

var myAge = 28;
var pi = 3.14;

Primitive Data Types: Booleans

Represents logical values true or false.

var catsAreBest = false;
var dogsRule = true;

It looks like a string, but it's not.

Primitive Data Types: undefined

Represents a value that hasn't been defined.

var notDefinedYet;

Primitive Data Types: null

Represents an explicitly empty value.

var goodPickupLines = null;

How does JavaScript know what data type something is?

Loose Typing

You don't tell JS what type of data type it is, it guesses. You can use typeof to see what it thinks:

var hello = "Hello, world";
typeof hello;

What does that return?



Variable Naming


  • Begin with letters, $ or _
  • Only contain letters, numbers, $ and _
  • Case sensitive
  • Avoid reserved words
  • Choose clarity and meaning
  • Prefer camelCase for multipleWords (instead of under_score)
  • Pick a naming convention and stick with it

Variable Naming


var numPeople;
var $mainHeader;
var _num;
var _Num;

Not okay :(

var 2coolForSchool;
var soHappy!;
var 10019;


var TACOparty;



Variables and Expressions

Variables can also store the result of any "expression":

var x = 2 + 2;
var y = x * 3;

This includes strings, too:

var name = 'Shawn';
var greeting = 'Hello ' + name;



If you get stuck, raise your hand.


Private notes in your code.


Comments are human-readable text ignored by the computer:

// You can write single-line comments
var x = 4; // Or you can comment after a statement

  Or you can write multi-line comments, if you have something very long
  to say like this gratuitously long description.


There is a time and a place for comments.

Comments are good when:

  • You're learning something new
  • There's something that needs fixing
  • Something is not finished, or needs to be done


Comments should not:

  • Explain what your code is doing
  • Provide instructions to the user


Too many comments is a code smell.

It means your code isn't easy to understand.

But! Don't worry about this too much when you're learning!



Functions are re-usable collections of statements.

First, you declare the function:

function sayMyName() {
  console.log("Destiny's Child");

Then call it as many times as you want:


Functions are not run straight away, they are stored in memory until they are called.


Circular dependencies

Don't do this (no, seriously, don't):

function chicken() {

function egg() {


This is a loop that will never end. We want to avoid stuff like this.



Function Arguments

Functions can accept any number of named arguments:

function sayMyName(name) {
  console.log('Hi, ' + name);

sayMyName('Testy McTesterFace');

function addNumbers(num1, num2) {
  var result = num1 + num2;

addNumbers(3, 10);

Function Arguments

You can also pass variables:

var number = 10;
addNumbers(number, 2);


Return values

Return Values

The return keyword returns a value to whoever calls the function (and exits the function):

function addNumbers(num1, num2) {
  var result = num1 + num2;
  return result; // Anything after this line won't be executed

var sum = addNumbers(5, 2);

You can use function calls in expressions:

var biggerSum = addNumbers(2, 5) + addNumbers(3, 2);


Variables and Functions

Variable Scope

Variables have "function scope". They are visible in the function where they're defined.

There are two scopes we have to be worried about:

  • Local scope
  • Global scope

Local scope

Restricted to the function it is defined in.

function addNumbers(num1, num2) {
  var localResult = num1 + num2;
  console.log("The local result is: " + localResult);
addNumbers(5, 7);

What happens when we run this code?

Global scope

Available to your entire program.

var globalResult;
function addNumbers(num1, num2) {
  globalResult = num1 + num2;
  console.log("The global result is: " + globalResult);
addNumbers(5, 7);

Coding Conventions



Use newlines between statements and use spaces (2 or 4, pick one and stick to it) to show blocks.


function addNumbers(num1,num2) {return num1 + num2;}

function addNumbers(num1, num2) {
return num1 + num2;


function addNumbers(num1, num2) {
  return num1 + num2;



Raise your hand if you get stuck.

Getting help

Google for questions or check Stack Overflow. Also look on the Mozilla Developer Network.

Before you share your problematic code, post it to


Yes, just like high school.


Save your code to for easy lookup and console access.

See you next week!