Learn JavaScript in Construct, part 2: language basics

31

Index

Tagged

Features on these Courses

Stats

14,301 visits, 37,529 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY-NC 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 24 Sep, 2021. Last updated 16 Dec, 2021

Data types

So far we've only been working with strings (i.e. text), such as the string "Hello world!". JavaScript supports several other data types. Here we will only cover two others: numbers and booleans.

Numbers

You can also use number values instead of strings for variables and constants. (We actually saw these previously when we used 1 + 1 in the console, and for the constant PI.)

let score = 100;
console.log(score);

In JavaScript, all numbers are floating point, meaning they can store both integers like 10 and fractional values like 1.5.

You can use mathematical operators on numbers: + for addition, - for subtraction, * for multiplication, and / for division. You can try these out in the browser console - try entering each line below. The comment shows the result. You can try your own combinations too.

// Try entering in to the console:
10 + 5    // 15
7 - 4     // 3
6 * 3     // 18
20 / 4    // 5

These calculations can be included in assignments.

let value = 10 + 5;
value = 6 * 3;          // replaces value
console.log(value + 1); // 19

You can also combine calculations like 6 * 3 + 1, which follows the standard order of operations with the multiplication being done first. Parentheses ( and ) can be used to override the order of operations, e.g. 6 * (3 + 1).

You can also use a variable name in a calculation:

let a = 2 + 1.5;
let b = a * 2;
console.log(b);  // 7

Precision

You might notice an odd result with some fractions:

// Try entering in to the console:
0.1 + 0.2   // 0.30000000000000004

It's not accurate! It's very close to, but not exactly, the correct result of 0.3

This is not a mistake. It's actually how all fractional calculations happen in computers. The reason is relatively complex, but in brief, computers do not have unlimited memory, and so only calculate fractions to a limited degree of precision. Consider calculating (2 / 3) * 3 to only 6 decimal places. 2 / 3 would calculate to 0.666667. Multiplying that by 3 would give 2.000001 - close to, but not exactly, the intended answer of 2. In computers this type of rounding happens in binary (base-2, or all 0s and 1s), which means it happens in different situations, such as with 0.1 + 0.2.

As programmers, we just have to live with this. Often fractional calculations will be slightly wrong, but sometimes it doesn't matter, or the programmer makes sure that values within a small range are deemed acceptable so rounding errors don't affect the result.

Special numbers

Numbers in JavaScript can hold three possible special values: positive infinity (Infinity), negative infinity (-Infinity), and "Not A Number" (NaN).

Positive and negative infinity work as you may expect:

// Try entering in to the console:
1 / 0          // Infinity
-1 / 0         // -Infinity
Infinity + 1   // Infinity

"Not A Number", or NaN, is less obvious. It is a result used when the result cannot be mathematically represented, such as the square root of a negative number, or an invalid calculation.

// Try entering in to the console:
0 / 0          // NaN

In general if you see NaN it means you made a mistake in a calculation. You might need to check your maths is correct, or add extra checks to make sure you aren't attempting to calculate something like 0 / 0. This is not always as obvious as it seems: you might use variables such as numberOfSweets / numberOfPeople, and if both variables are 0, the result will be NaN.

Strings

We've already used strings, but let's cover a few more details.

Why do we refer to text in code as a string? The name is short for "string of characters", which is what this data type really is - a sequence of individual characters, one after another. The name string is usually used to refer to the data type for text in computer programming.

String can use either ', " or ` characters to mark the string, so long as the start and end characters are the same. All three examples below are equivalent.

"Hello world!"
'Hello world!'
`Hello world!`

It doesn't matter which you use, but it's a good idea to be consistent. This guide generally uses double-quotes for strings.

If you want to include a double-quote inside a double-quoted string, you can use a backslash character \ to escape it. That means the double-quote is part of the text, rather than marking the end of the string.

// Try entering in to the console:
"Hello \"world\"!"  // Hello "world"!

This also means backslashes themselves must be escaped as \\. There are various other escape sequences you can use, like \t for a tab, and \n for a new line.

An alternative is to use a different quote for the string, such as single quotes, e.g. 'Hello "world"!'.

We'll cover more about strings in the next part of this guide.

Booleans

A boolean value can only be either true or false. This is useful for on/off values, such as settings, as well as making comparisons.

let b = true;
console.log(b);

We'll come back to booleans later in the guide as they have some key uses in JavaScript programming, particularly with comparisons and if statements. However for now, it's just good to be aware that booleans are another data type in JavaScript.

  • 8 Comments

  • Order by
Want to leave a comment? Login or Register an account!

  • Congratulations!! Very Clear and Objective in the explanations!!!

  • Thank you Ashley, I've been wanting to learn Javascript for sometime now. I tried another console but it was to hard to setup. Using Construct makes it simple. I am not a full time code developer, but the first language I learned on was basic using a mainframe at the Community College way back when. I am a retired teacher working with an English professor developing his English course for online learning. I'm looking forward to implementing the JavaScript in my project to make easier to develop and make it efficient.

  • You might consider including "scope" in the "VAR" section and why "var" is quirky.

      • [-] [+]
      • 3
      • Ashley's avatar
      • Ashley
      • Construct Team Founder
      • 3 points
      • (1 child)

      As explained in part 1 this tutorial isn't intended to go in to detail about the quirks of old legacy features. If you stick to let/const then you don't need to learn about all those quirks.

  • My project contains only an 'On start of layout' event block with "let b = "Hello";" in it but when I run the game, the variable 'b' returns as undefined until I manually declare it in the console.

    Is this normal behaviour or am I missing something? This is the case with any variable I make - for some reason I'm not able to declare on runtime through an event block.

    • To be more specific, the console returns:

      "Uncaught ReferenceError: b is not defined

      at <anonymous>:1:1"

        • [-] [+]
        • 1
        • Ashley's avatar
        • Ashley
        • Construct Team Founder
        • 1 points
        • (0 children)

        That's normal - the console basically works in global scope, and it can't access variables declared in other functions (and script blocks in event sheets are actually inside functions), just like how you can't write code in one function that accesses a local variable inside a different function.