Expressions, Variables, and Primitives

10 Aug 2015

Exercises

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=(5-1))/(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.

Explain how this is possible:

var y;
y=x+1-1;  //10
typeof y; //number
y=x-1+1;  //1
typeof y; //number

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.

var x;
var y;
x = 10;
y = x;
y = y + 5;
console.log(x);
console.log(y);

Does modifying y thus modify x?

var x = 20;
x = x + 5;
console.log(typeof x);
x = "a string";
console.log(typeof x);
console.log(typeof (x + undefined));

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() and Math.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 line-by-line and letter-by-letter 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 Atom-JSHint plugin for Atom to get obnoxious--err, 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:

PCS JS Immersion