5. Numbers

This tutorial will teach you what datatypes are, and how to use numbers in JavaScript.

Datatypes

In JavaScript, there exists different type of values, and we call these datatypes. So far, you have mostly been using the string datatype, whose values can be crated by encapuslating some characters between two ` characters, like `This is a string!`. You use this for example when you create a Text component that should have a background color and some specific text:

// The values `Hi there` and `red` are both string values!
Text.text(`Hi there!`).backgroundColor(`red`)

But JavaScript contains many more datatypes than just strings. Let's take a look at the number datatype!

Creating a number

Number is a datatype in JavaScript that represents a number (big surprice! xD). You can create new number values simply by writing them, for example:

• Write 51 to create the number value 51
• Write -140 to create the number value -140
• Write 6.57 to create the number value 6.57
• Write -13.7 to create the number value -13.7

Just as strings (and all datatypes), number values can be stored in constant and variables.

class StartPage extends Page{
	
	X = 4
	Y = 2
	
	createGui(){
		return Rows.children(
			Text.text(`a: ${p.X} + 1 is equal to 5.`),
			Text.text(`b: ${p.X} + ${p.Y} is equal to 6.`),
			Text.text(`c: ${p.X} * ${p.Y} is equal to 8.`),
		)
	}
	
}

As you can see in the example above, just as we can use the special ${ ... } syntax in strings created with two ` characters to insert a string value into it, we can also use it to insert at number value into it (the special ${ ... } syntax can also be used to insert values of other datatypes too; it does not only works for strings and numbers).

Mathematical operations

Most often, an application needs to do computations with numbers, such as computing the sum of two numbers. For each of the ordinary mathematical operations, JavaScript has special symbols to denote them:

You can use these mathematical operations anywhere in your JavaScript code you can use a number, for example:

• When creating a constant/variable
• In ${ ... } expressions in strings created with the ` symbol

class StartPage extends Page{
	
	X = 4
	Y = 1 + 1
	
	createGui(){
		return Rows.children(
			Text.text(`a: 1 + 2 is equal to ${1 + 2}.`),
			Text.text(`b: ${p.Y} + 2 is equal to ${p.Y + 2}.`),
			Text.text(`c: ${p.X} + ${p.Y} is equal to ${p.X + p.Y}.`),
			Text.text(`d: ${p.X} * ${p.Y} is equal to ${p.X * p.Y}.`),
		)
	}
	
}

Mathematical operations with multiple operands

Just as in ordinary math, you can use multiple mathematical operations at the same time. Ordinary operator precedence applies, i.e. * and / are computed before + and -. If you want + and - to be computed before * and /, surround them with parenthesis.

class StartPage extends Page{
	
	X = 2
	
	createGui(){
		return Rows.children(
			Text.text(`a: 1 + 2 + 3 is equal to ${1 + 2 + 3}.`),
			Text.text(`b: 1 + ${p.X} + 3 is equal to ${1 + p.X + 3}.`),
			Text.text(`c: ${p.X} + ${p.X} + ${p.X} is equal to ${p.X + p.X + p.X}.`),
			Text.text(`d: 1 + 2 * 3 is equal to ${1 + 2 * 3}.`),
			Text.text(`e: (1 + 2) * 3 is equal to ${(1 + 2) * 3}.`),
		)
	}
	
}

Changing a number in a variable

Just as for strings, we can use p.theVariableName = 123 to store a new number in the variable (in this example, storing the number 123 in the page variable named theVariableName). But, where 123 is written, we don't have to write a single number like this, but we can also make use of any mathematical operation we want. A very common thing apps do is to simply increment the value stored in a variable by 1 using an addition operation.

class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Text.text(`The counter variable is currently ${p.counter}.`),
			Button.text(`Increment counter`).handler(p.incrementCounter)
		)
	}
	
	incrementCounter(){
		// When the computer executes this code, it will:
		// 1. Compute p.counter + 1, by first:
		//     1. Retrieve the current number in p.counter (1 the first time the button is clicked)
		//     2. Compute what "that value" + 1 is (1 + 1 = 2 the first time the button is clicked)
		// 2. Store that computed value (2 the first the button is clicked) in p.counter
		p.counter = p.counter + 1
	}
	
}

To increment/decrement the number stored in a variable is very common thing to do in apps, but reading and understanding how code like p.counter = p.counter + 1 works can be quite tricky for beginners. Especially, it can be very confusing that p.counter appears both on the left and the right side of the = symbol.

There exists shortcut syntax in JavaScript one can use to increment/decrement a variable by another number, and this shortcut syntax is much easier to read and understand. There also exist shortcut syntax to mutliply/divide a variable by another number.

class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Text.text(`The counter variable is currently ${p.counter}.`),
			Button.text(`Increment counter`).handler(p.incrementCounter)
		)
	}
	
	incrementCounter(){
		// Increment the number stored in p.counter by 1.
		p.counter += 1
	}
	
}

Exercises

Complete the exercises below to see if you have fully mastered what has been taught in this tutorial.

That's it!

Good work, now you know the basics about how to use numbers in Bagawork! 🥳 It's not that hard, is it? In next tutorial, you'll see more useful examples of how we can use numbers.