Hello World!
In the programming world, once a new apprentice wants to learn the
magic of code, they are introduced with a program called "Hello,
World!". This is one of the most simple programs you can write with
any language.
The program consists of printing "Hello, World!" to the screen. In
JavaScript, we can print words, numbers and data with the
command [Link]().
For example, if we want to print "Hello, World!" we would write:
[Link]('Hello, World!');
When we want to print text, we have to write the text in the
parentheses of [Link](). We also have to wrap the text with '
' or " " so the compiler that runs the program knows that the text we
wrote isn't code, but actual text we want to print.
Type conversion
While working with variables, you can change the data type of the
variable. This will be useful later on when working with web apps and
forms. There are different ways to convert from data type to data
type:
Converting to a String
Converting values to a string looks like this:
let value = '';
value = String(55); // Value is: '55'.
value = String(true); // Value is: 'true'.
value = String(5 + 20); // Value is: '25'.
We can also use the toString() method to convert to a String:
let number = 25;
let string = [Link]();
Converting to a Number
Similar to converting to a string, converting to a number looks like
this:
let value = 0;
value = Number('5'); // Value is: 5.
value = Number(true); // Value is: 1.
value = Number(false); // Value is: 0.
value = Number(null); // Value is: 0.
value = Number('Hello, World!'); // Value is: NaN.
Whenever converting to a number, we can get the
value NaN. NaN means Not a Number and we get NaN whenever we
try to turn something that can't be a number into a number.
We can also use the parseInt() and parseFloat() functions:
const someNumber = parseInt('100'); // Value is: 100.
const otherNumber = parseInt('100.25'); // Value is: 100.
const anotherNumber = parseFloat('100.25'); // Value is 100.25.
We use parseInt() for whole numbers and parseFloat() for numbers
with decimal places.
Type coersion
Type coercion is when JavaScript converts types of data for us
automatically. Let's say we are trying to sum up two numbers, 5 and
6, but one of them in our application is of type String and the other
of type Number. What do you think would happen then?
const firstNumber = '5';
const secondNumber = 6;
const sum = firstNumber + secondNumber;
Believe it or not, the output from this program will be: '56'. The
output will be a string because JavaScript recognizes that one of the
variables that we are adding together is a string, so it transforms the
other variable into a string as well. Then, because we are adding
them together, it adds '5' and '6' and gets '56'.
Why doesn't it turn them into numbers? Well, because when one
variable is already a string, that string could contain anything. It could
be a digit, random text or anything else. We cannot transform
random text into a number, so that's why JavaScript decides to turn
the number into a string. This is one example of type coercion. There
are many more, but you will get to know them as you learn more
coding.
Naming variables
Variable names should be descriptive and easy to understand. Don't
be afraid to write long variable names. Now, there are some rules to
keep in mind while writing names for variables.
The names of variables can only contain letters, numbers,
underscores _ and dollar signs $. They also must not start with a
number. For example:
const number = 5; valid
const you&i = 'love'; invalid
const HeUiOna4 = true; valid
const 4times = false invalid
const $time_flies = true; valid
Naming conventions
You will often write variable names that contain multiple words. How
should you connect the words?
The most popular way is called Camel Case. It consists of starting
with lowercase letters and capitalizing the first letter of every word
after the first word. Valid examples of Camel Case are
userPassword
shouldTurnOnLightSwitch
secondList
number.
Some also write variable names with underscores like
user_password
should_turn_on_light_switch
second_list
number
In JavaScript, it is best to use the Camel Case naming convention, as
most built-in commands are written that way.
Simple math
Time to do some math!
Simple math with numbers
There are some basic operations you can easily do in JavaScript. We
will use the following variables to explain all operations:
const num1 = 100;
const num2 = 50;
let value;
Addition & Subtraction
We use the + symbol to add two numbers. We use the - symbol to
subtract two numbers.
value = num1 + num2; // Value: 150
value = num1 - num2; // Value: 50
Multiplication & Division
We use the * symbol to multiply two numbers. We use the / symbol
to divide two numbers.
value = num1 * num2; // Value: 5000
value = num1 / num2; // Value: 2
Modulo
We use the % symbol to calculate the remainder from dividing two
numbers.
value = num1 % num2; // Value: 0