HTML Academy
Operations order
Introduction to programming11/15
Back to the list of tasks
  • 1. Career start
  • 2. Making the program a bit more complicated
  • 3. Console log
  • 4. Data types
  • 5. Complex data types
  • 6. Unknown data
  • 7. Variables
  • 8. Declaring and assigning variables
  • 9. Operations
  • 10. Operations order
  • 11. A few more operations
  • 12. Release of Brekkie-meter v0.1, part 1
  • 13. Release of Brekkie-meter v0.1, part 2
  • 14. Summary of “Getting to know JavaScript”
  • 15. First program: MufFit v0.1
Release of Brekkie-meter v0.1, part 1
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

A few more operations

Each data type supports its own operations. Arithmetic operations are intended for numbers, not strings.

The most important string operation is string joining or concatenation. Example:

var name = 'Muffin';

'Instructor' + 'Muffin';   // result: 'InstructorMuffin'
'Instructor ' + 'Muffin';  // result: 'Instructor Muffin'
'Instructor ' + name;      // result: 'Instructor Muffin'

Concatenation and addition use the same plus sign. But how does JavaScript understand what operation it should use, addition or concatenation? It looks at the types of operands: if they are strings, they are merged; of they are numbers, they are added up.

And we come to a difficult topic here: what happens if the operands are of different types? For example:

'Milk, g: ' + 50;  // result: 'Milk, g: 50'
'2' * 50;          // result: 100

In this case, JavaScript tries to convert the operands into the same type and perform the operation. A corresponding type will be chosen depending on the type of operation.

A plus can be an addition or concatenation sign, but since one of the operands is a string, addition is out of the question. That’s why the number 50 is converted into the string '50' and merged with the string 'Milk, g: '.

The asterisk is a multiplication sign. That is why JavaScript attempts to convert the string '2' into a number and succeeds. Then the numbers 2 and 50 are multiplied and we get 100 as a result.

That’s because JavaScript can change the type of operands on the go, that why it’s called a language with dynamic type casting. Of course, there are a lot of nuances and issues with type casting. We will look at this matter in detail later in the course. Let’s also agree that we won’t have any issues with that in our first programs. They are simple and users enter data carefully.

Let’s go back to concatenation now. What makes it so good? It helps make program messages more informative and “human”. Let’s practice.

Comments

  • script.js
JavaScript
// Muffin had a bit of a bigger // breakfast than usual today var milkInGrams = 60; var breakfastCalories = milkInGrams * (42 / 100); console.log(breakfastCalories); var dryFeedInGrams = (500 - breakfastCalories) / 4; console.log(dryFeedInGrams);

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Console

The code has changed, click “Run” or turn autorun on.

Result

Goalscompleted

Make your console output more informative by merging variables with tips. To do that, replace the variables inside console.log() with expressions:

  1. Inside the first console.log command, replace breakfastCalories with 'Boss, the breakfast had ' + breakfastCalories + ' calories.'
  2. Inside the second console.log command, replace dryFeedInGrams with 'You can eat ' + dryFeedInGrams + ' more grams of dry food.'

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.