Expressions, Variables, and Primitives
10 Aug 2015Exercises
Invent a new Operator
Imagine and describe an operator of your own design. Decide the number, type, and pattern of its operands (inputs) and how the output is decided. Draw a custom symbol for it!
Evaluating Nested Expressions
Draw a parse tree for and trace the evaluation of the complex expression below:
var x;
((4+(1))*(x=(51))/(7%x) == x)
Experimenting with arithmetic
Experiment with the various arithmetic operations in Javascript. Try testing out the various arithmetic operations in Javascript. Make sure you calculate for yourself what you think the result of these expressions should be.

10 + 30 / 2 / 5

30/0 + 0

30/0 * 0

10 + undefined

10 + "string"*0
Did any of these suprise you? Did you see things you weren't expecting?
What can you explain about the rules for the symbols NaN
and Infinity
? Can you predict the value of these?

typeof Infinity

typeof NaN

Infinity + Infinity

NaN * Infinity
Before you try any of these, discuss them and see if you can come to consensus on what should happen.
Fun with Strings and Coercions
Experiment with string concatenation and how coercions convert between strings and numbers. Try the following expressions in your console only after discussing them and seeing if you can come to a consensus on what happens.
"3" + 4
"this" + "is" + "a" + "string"
+"30" + 5
+"stuff"
Do coercions like this seem useful or dangerous? Discuss and share your consensus with your group.
2.
Explain how this is possible:
var y;
y=x+11; //10
typeof y; //number
y=x1+1; //1
typeof y; //number
3.
Now explain this:
var small=9;
var big=10
small < big; //true
x+small < x+big; //false!
Be the Interpreter!
Execute these programs by hand, on paper, keeping track of the variables and the current statement being evaluated. When you're confident about the code's behavior, verify your prediction using the console, Scratchpad, or node.
1.
var x;
var y;
x = 10;
y = x;
y = y + 5;
console.log(x);
console.log(y);
Does modifying y thus modify x?
2.
var x = 20;
x = x + 5;
console.log(typeof x);
x = "a string";
console.log(typeof x);
console.log(typeof (x + undefined));
3.
var x = 10;
var y = x;
var z = y;
y = z + z;
x = 2*y;
z = "" + x;
console.log(z + z);
More Practice
Expressions with Unknown values
Predict the output of each of the following expressions, and explain the rules which determine that answer. (Hint: The rules for operator ==
are complicated, but do your best!)
If the output depends on the value or type of variable x
, identify the conditions (what x
is) when the expression will output true (or false, if that's simpler). Assume the cases are independent, and x
is reset to an unknown value before each.
Just because x
is unknown, don't assume that it equals undefined
! You should consider the expression's behavior for any possible value of x
.
Some of these are tricky! Don't trust your first instinct.
"1" == 1
"1" === 1
x == 'x'
x == (x+'')
'' == ' '
x = true
var x; x == 'undefined'
'9'<'10'
typeof x + 1 === "number"
typeof x % 2 === "number"
typeof (x % 2) === "number"
x++ == ++x
++x == x++
"1"+x == 1+x
"0"+1 == 1
(typeof (x+1))===(typeof x)
(x=(typeof (x+(typeof x))))==x
Fractional Improvement
Suppose you represent a fraction (n/d) with 2 integer variables: n for the numerator and d for the denominator. If n is greater than d, the fraction is "improper", but it can be rewritten as a proper fraction. For example, "7/4" is improper, but it can be rewritten as "1 3/4", which is proper.
Assuming variables n and d are defined in advance (but you don't know their values), write a series of expressions to generate a string expressing the proper form of the fraction n/d. For example, when n===7 and d===4, your resulting string should be "1 3/4". You may assume both n and d are positive integers and n > d, but otherwise you should be able to handle any values of n and d.
Solve it first by making use of a function called Math.floor.
Now solve it without calling any functions, using merely operators. (Hint: you'll need at least the modulo operator %.)
Kinda Mean Numbers
Assume variables x, y, and z are numbers.
Write an expression for the mean (i.e. average) of x, y, and z.
Write a series of expressions to adjust each of x, y, and z halfway toward the mean of the three. That is, reset the value of each variable to something new based on its previous value.
Simple Geometry
Suppose you're encoding geometric shapes in a Cartesian (2D) coordinate system, and you represent a rectangle with four numeric variables:
 l : horizontal position of left edge (relative to some origin);
 r : horizontal position of right edge;
 t : vertical position of top edge;
 b : vertical position of bottom edge.
Write an expression for the rectangle's area.
Write an expression which is true if the rectangle is taller than it is wide, and false otherwise.
Write an expression for the circumference of the biggest circle which can fit inside the rectangle. (Hint: make use of the functions
Math.max()
andMath.min()
.)Write an expression for the area of the smallest circle which completely encloses (i.e. circumscribes) the rectangle.
Imagine subdividing your rectangle into 3 equal rows and 3 equal columns, which would create 9 smaller rectangles, identical in shape but varying by position. Define four new variables describing the centermost small rectangle. (Hint: one of the many solutions is very similar to the solution of "Kinda Mean #2" above.)
Summary
Write down, individually, your own summary of the following ideas:
 what pieces go into making a webpage
 server vs. client code
 what a programming language does
 what an operator does
 how nested operators work
 expressions vs. statements
 what variables are
 what a "type" is in programming
 type coercions
 how string concatenation works
Then share them with the rest of your group and discuss your answers.
For later
Code Quality
Are you typing everything right? Are you sure you didn't make any typos?
Carefully going linebyline and letterbyletter to make sure you've typed everything just right is a giant pain, so we use programs to verify that everything looks okay. Try it out. Don't be surprised if you have a few mistakes already. :)
npm install g jshint
jshint myfile.js
You can also install the AtomJSHint plugin for Atom to get obnoxiouserr, I mean, helpful jshint notes right in your editor.
Stepping Through Execution
Often it's helpful to walk through pieces of code step by step, the same way the computer is working through it. You'll find that you can sometimes better understand what's happening this way, and also may discover solutions to problems in your code.
There are two nifty utilities that try to make this process more visual: