Web Foundations Lesson 5 of 7

JavaScript values and types

20 min, 4 exercises

Builds on lessons 1 to 4. Start at lesson 1

Learn

Values and their types

Time for actual programming. JavaScript runs your code top to bottom, one statement at a time, and the easiest way to see what it is doing is console.log(), which prints whatever you hand it:

console.log("Hello!");
console.log(2 + 3);

Every piece of data in JavaScript is a value, and every value has a type. The three you will meet first:

  • string: text, in quotes. "pizza" or 'pizza' both work.
  • number: 42, 3.14, -7. No quotes. JavaScript does not split whole numbers and decimals into different types; they are all just numbers.
  • boolean: exactly two values, true and false. Used for yes or no questions.

Learn

Joining strings and typeof

Quotes change everything. 5 + 5 is 10, but "5" + "5" is "55", because + on strings glues them together (that is called concatenation). Mix a string and a number and JavaScript turns the number into text: "Level " + 3 gives "Level 3".

When you are not sure what something is, ask with typeof:

console.log(typeof 42);      // number
console.log(typeof "42");    // string
console.log(typeof true);    // boolean

Learn

Comments, semicolons and maths

The // starts a comment: JavaScript ignores the rest of that line. Semicolons end statements. JavaScript can often guess where they go, but writing them is a good habit.

Math works like you would expect: + - * /, plus % for the remainder after division (10 % 3 is 1). Brackets set the order, just like in maths class.

Try

Run it: values and types

The example is already in the editor. Run it, change one thing, and run it again.

example.js to run
console.log("Hello, world!");
console.log(7 * 6);
console.log("5" + "5");
console.log("Level " + 3);
console.log(10 % 3);
console.log(typeof 3.14, typeof "hi", typeof false);

Practice

Print text and a product

Print exactly two lines: first the text Hello, JavaScript!, then the result of 12 * 4 (let JavaScript do the maths, do not type 48 yourself).

Constraint

  • Work it out with code. Printing the answer as text doesn't count.
exercise_1.js to run
console.log("Hello");

Practice

Pick a value per type

The code prints the types of three values but the values are wrong. Change the three values so the output is number, string, boolean on separate lines.

Constraint

  • Work it out with code. Printing the answer as text doesn't count.
exercise_2.js to run
console.log(typeof "99");
console.log(typeof 99);
console.log(typeof "true");

PracticePredict the output

Strings meet numbers

What does this print? Work it out line by line before you run anything.

exercise_3.js
console.log("3" + 4);
console.log(3 + 4);
console.log("Level " + 2 + 1);
console.log(2 + 1 + " lives");

Your turn

Song length in minutes

Neon Rain is 217 seconds long. Print its length in minutes and seconds, exactly like this:

Neon Rain: 3 min 37 s

Let JavaScript work out both numbers from 217 with %, - and /. Then do the same on a second line for Low Tide, which is 245 seconds: Low Tide: 4 min 5 s.

Constraint

  • Let JavaScript work out the minutes and seconds.
  • Use % for the seconds left over.

On your own. Hints open after your first check.

exercise_4.js to run

  
  

  

  





    
    

    
  

  

    
JavaScript