JavaScript’s variables can hold values of different types. Each JavaScript value, however, has a strictly defined type.
Let’s start with the differences between string and numbers in JS.
Strings
All text information in JavaScript is considered to be a string.
To create a string — just wrap any sequence of characters in quotes.
Quotes can be single, double or backtick.
let hello = 'Hello, World!';
let name = "John";
let s = `some string`;
In all three cases, we’re saving string values into the variables hello
, name
and s
.
In JavaScript, you can concatenate the strings together using the +
operator.
let name = 'Jack';
let surname = 'Jones';
let fullName = name + surname;
Let’s try to log the value of the variable fullName
:
console.log(fullName);
Here’s the output:
JackJones
To add a space between Jack
and Jones
, we should update our code a bit.
Let’s start with the same string Jack
, add a string that consists of a single space character to it and follow up with a string Jones
.
As strings Jack
and Jones
are stored in the variables name
and surname
, we can use them.
let fullName = name + ' ' + surname;
console.log(fullName);
The output will change, and you’ll notice an extra space between the name and surname.
Jack Jones
Numbers
Apart from strings, JavaScript variable very often hold numbers.
Number can be both integers and floating point.
let a = 1;
let b = 0.5;
let c = -15.25;
let year = 2021;
In the code snippet above we’ve created 4 variables a
, b
, c
and year
and saved 4 values 1
, 0.5
, -15.25
and 2021
in them.
Take a note that this time we haven’t used quotes.
You can print out numbers to the console the same way as you’ve printed strings.
console.log(year);
console.log(c);
Two messages will appear:
2021
-15.25
The differences between numbers and strings become evident when we try to save them.
let x = 2;
let y = 3;
let sum = x + y;
console.log(sum);
Once you run this program you’ll see the number 5
in the console.
Let’s check what happens when we wrap x
and y
in quotes:
let x = '2';
let y = '3';
let sum = x + y;
console.log(sum);
In this case the string 23
will be logged to the screen as the values were wrapped in quotes. JavaScript perceives them as strings and thus was unable to add them as numbers.
Dynamic typing
JavaScript is a dynamically typed language. This means that the type of the variable isn’t strictly defined when the variable is created, but it changes based on the value that this variable holds.
We can create a variable, save a number in it and then overwrite it with a string.
let x = 1;
let y = 2;
console.log(x + y);
y = 'hello';
console.log(x + y);
We’ve saved the number 1
and 2
into the variables x
and y
. After this, we added them and printed the result to the screen. No surprises here and the output was 3
.
Right after the first console.log
we’ve overwritten the value of y
with the string hello
. Now JavaScript can’t sum x
and y
in a proper mathematical fashion. Number 1
is “glued” to the string hello
and we end up with 1hello
.
3
1hello
Coding tasks
Let’s try to print some strings and number to the screen to see their differences and similarities in JavaScript.
Task 1
The developer had a task to save the values 2
and 3
into the variables x
and y
and print out their sum to the screen. Looks like he made a mistake and used strings instead of numbers.
let x = '2';
let y = '3';
console.log(x + y);
Fix the code by changing strings to numbers.
Task 2
In this task the variables were created, but they were initialized with empty strings.
let greeting = '';
let name = '';
console.log(greeting + ' ' + name);
Save the strings Hello
and Hero
into the variables greeting
and name
.
Task 3
The string 2 + 2 = 4
should appear on the screen, but we got an error instead.
const result = 4;
console.log('2 + 2 = ' + x);
You should fix the bug.
Task 4
Let’s start with the blank page. Print out 3 numbers to the screen — 0
, 2.5
and -100
.
Each number should appear on a separate string.