Javascript Basics: Variables, Functions, and Scopes //plus comments!

First Experience

I’m learning Javascript after learning Ruby. Below are my notes from http://jqfundamentals.com/chapter/javascript-basics. Feel free to follow along!

My First Original Function

1
2
3
4
5
6
7

var explanation = function(name, message) {
  var exclamation = 'But ' + name + ', ';
  log( exclamation + ' ' + message);
};

explanation('Jerry', "I was over the rainbow");
explanation('Jasmine', "I wanted some tea.");

3 Lessons:

1. Define a variable using var variable_name =
2. A function takes parameters that you can use inside that function
3. All variable assignments or methods end with a ;

1 Minute Assignment:

Write an original function using the basic pattern above.

Comments

1. // is used to make a comment
2. /* is used to begin a multi-line comment
3. */ is used to end a multi-line comment

Variables

1. Variables do not begin with a number or hyphen
2. Functions can only be called when defined as a variable
3. Define a function as a variable using var or function

1
2
3
4
5
6
7
8

function myage(a, b, declaration) {
  function age(a, b) {
    return a*b;
  }
  log( declaration + ' ' + age(5, 5) + ' years old.')
}

myage(5, 5, 'I am');

2 Takeaways:

1. For functions within a function, the nested functions should use the parameters provided in the outer functions and not introduce new parameters.
2. “Function Expressions” begin with a var, and are superior to “function declarations” because the former they are more predictable and can be used in larger scopes. See http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ for more detail.

1 Minute Assignment:

Write a function inside a function like above and successfully call it.

Return Value

1. Use return to perform math
2. Wrap a command in the log(); method to print the return value in the console
3. There can be no return values after errors.

1
2
3
4
5
6
7
8
9

var myFunction = function() {
  var foo = 'bar';
  return foo
};

log(myFunction());
log( typeof foo );
hilarious;
log(myFunction());

Above, the return values are bar and undefined. The command hilarious; is not defined and also breaks the Javascript, preventing it from reprinting bar.

If you’re not using a dynamic editor, use console.log() to print Javascript into your browser’s console.

Scope

• Functions create a scope wherein variables defined within are not acknowledged wihtout. This is why log( typeof foo) returns undefined, because foo is undefined outside of myFunction.

  It’s worth noting that the same function without ‘return’ will return undefined because it is outside scope.

1
2
3
4

var myFunction = function() {
  var foo = 'bar';
  foo
};

• Because of variable scope, you can have different variables that share the same name, but exist in different scopes.

1
2
3
4
5
6
7

var foo = 'qux';
var myFunction = function() {
  var foo = 'bar';
}
log(foo); //returns 'qux'
myFunction(); //does it redefine foo as 'bar'?
log(foo); //nope, still returns 'qux'

• Therefore it’s best to name variables uniquely and descriptively to avoid confusion between scopes.

• Generally, use var to assign all variables because otherwise, the variable you define will default to a global scope.

1
2
3
4
5
6
7

function test() {
  a = 1;
}

test();

log( a ); // logs 1

Don’t do the above because if you set the variable a in other places in your code, there will be conflict.

To solidfy your understanding, try the following exercise:

Culminating Exercise

Build an “ATM” using only javascript. Create a file called atm.html and insert your code within two script tags. Your ATM should tell you what your starting balance is and allow you to deposit, withdraw, and exit the ATM. Assuming that you’re new to Javascript, aim for a minimal ATM program in 45 minutes.

Try the following methods in your browser’s console, as they will prove very useful. Good luck!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script>
  //interact with the user
  alert('your message');    //sends a one-way message to user
  prompt('your message');   //returns user input 

  //such as:
  var name = prompt('What is your name?');

  //interpret user input
  isNaN('seventeen'); // evaluates to true or false
  parseInt("17");     // =>17 

  //perform actions based on conditions
  if (condition) {
    someMethod();
  } else if (condition) {
    someMethod();
  }

  //conditions
  name === 'Alex' // evaluates to true or false

</script>