Note: This is a pre-release of BagaWork. Many things will likely change before the first stable release.

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
Localization

In some natural languages, such as Swedish, one does not use period (.), but a comma (,), as the decimal separator. JavaScript is based on English, and uses period as the decimal seperator, so using a comma will not work.

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

Example

Example of an app that creates a page constant that stores a number.

Open in Online Editor
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:

Operation Symbol Example Result
Addition + 4 + 2 6
Subtraction - 4 - 2 2
Multiplication * 4 * 2 8
Division / 4 / 2 2

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
Example

Example of an app with some mathematical expressions.

Open in Online Editor
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.

Example

Example of an app using two mathematical operations at the same time.

Open in Online Editor
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.

Example

Example of an app that increments the number stored in a variable by 1 each time a button is clicked.

Open in Online Editor
class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Text.text(`The counter variable is currently ${p.counter}.`),
			Button.text(`Increment counter`).onClick(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.

Operation Ordinary syntax Shortcut syntax
Increment p.counter = p.counter + 2 p.counter += 2
Decrement p.counter = p.counter - 2 p.counter -= 2
Multiply p.counter = p.counter * 2 p.counter *= 2
Divide p.counter = p.counter / 2 p.counter /= 2
Example

The same app as before, but uses the shortcut syntax for increament the number stored in a variable instead.

Open in Online Editor
class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Text.text(`The counter variable is currently ${p.counter}.`),
			Button.text(`Increment counter`).onClick(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.

Exercise 1

This BagaWork project contains a page looking like this:

Change the code in it, so it works as shown below.

Hint

You will need to:

  • Add one variable to keep track of the current number
  • Add one method to decrement the counter by one when the first button is clicked
  • Add one method to increment the counter by one when the second button is clicked
  • Change so the current number in your variable is shown instead of the hardcoded 0

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.