At the end of this article, you should be able to:
- explain basic control flow and if/else statements.
*even newer versions have come out (ES7, ES8, etc) but this release is where a major paradigm shift happened. We will be referring to any concepts released after ES6, to simply ES6.
console (we will learn more about the console later).
fileName.js) and loaded into your browser via the
script tag in your HTML.
The anatomy of a variable is first the keyword, a space, the name we are giving the variable, an equal sign, the value we are assigning the variable, and then a semicolon.
There are three ways to declare a variable.
var is the ES5 way of declaring a variable. This is a generic variable keyword.
let is a new ES6 variable keyword. This will assign a variable much like
var, but with a little bit different behavior. Most notably, it differs by creating “block level scope”.
const is also new in ES6. A
const variable is a variable that cannot be changed. It’s short for “constant”.
Primitive Data Types (String, Number, Boolean)
The term ‘primitive data type’ refers to the fact that these are the most basic data types in the language. All other data types (which we will learn about in later lessons) use these types.
Strings are blocks of text. They will always be defined with quotation marks around them, either single or double. Any text with quotes around it is a string.
+ — * / =
Something you may not have seen before is the Modulo (%). This math operator will divide the two numbers and return the remainder.
Properties and Methods
Primitive data types (and other data types) have built-in functionality known as
methods. These extend the functionality of the primitive data types and allow us to gather information about them, or manipulate them in some way. Both properties and methods will be accessed using the
dot notation where we give the name of the variable, a dot, then the name of the property or method.
Properties allow us to access data from a data type. There are many different properties on every data type that will give you a bit of information about that specific object.
One we will look at here is the
length property of a
string. It will give us the length of the string, as in how many characters are in the string (spaces count).
Methods allow us to manipulate a data type. Methods are different from properties in that they need to have parentheses on the end.
The method we will look at here is the
toString method. It will convert a Number or Boolean to a string.
Functions allow us to perform many computations and return a final product. When we run a computer program, we are running a series of functions, and reading or manipulating what they return. You may not have realized this, but we have already worked with a type of function: a
Anatomy of a Function
A function will start with the function keyword. This tells whatever is running your program that what follows is a function and to treat it as such. After that comes the name of the function. We like to give functions names that describe what they do. Then comes open and close parentheses. And finally, open and close brackets. In between these brackets is where all of our function code will go.
In this example, we declare a function logsHello and we set it up to console.log ‘hello’. We can then see that in order to run this function, we need to write its name followed by parentheses. This is the syntax to run a function. A function always needs parentheses to run.
Now that we can run a basic function, we are going to start passing it arguments.
If we add a variable to the parentheses when we declare the function, we can use this variable within our function. We initiate the value of this variable by passing it into the function when we call it. So in this case, name = ‘Dan’. We can pass other variables into this as well:
We can add multiple arguments by placing a comma in between them:
Return statement and Scope
In the last example, we introduced the
return statement. We will not
console.log everything that comes out of a function. Most likely we will want to return something. In this case, it is the sum of the two numbers. Think of the return statement as the only way for data to escape a function. Nothing other than what is returned can be accessed outside of the function. Also note that when a function hits a return statement, the function immediately stops what it is doing and returns.
If we tried to
console.log something that we declared inside of the function it would return
undefined because we do not have access to it outside of the function. This is called scope. The only way to access something inside of the function is to return it.
We can also set variables to equal what a function returns.
We can see that ‘difference’ is set inside of the function. The variable inside the function only belongs inside the function.
Global objects and methods
global objects extend the functionality of the language for us for free. We have already seen, and have been using, the console object and its method
log. Another one of these objects is
Math has a number of methods on it just like
log. To add to this, some of our data types also have built-in methods.
We can use the
pow method on
Math to return a number risen to an exponent. It will take two numbers.
Math.round, Math.floor, Math.ceil
Math also has methods that will round numbers for us.
.round will round a number to the nearest whole number.
.floor will always round a number down to the nearest whole number.
.ceil will always round up to the nearest whole number.
Learn to explain basic control flow and if/else statements.
Control flow allows us to write code based on conditional statements. Understanding this flow is an important part of learning to program.
Often times, as a computer is reading and executing our code, we want code to run only if something is true or not. This is known as control flow. Not all code on the screen is executed in order, or at all. We will learn to use some basic control flow today, and will dive deeper into it in our next lesson.
In this example we are going to use control flow and comparison operators. Control flow is a way for our function to check to see if something is
true, and either running the code supplied if it is, or moving on if it is not. For this we will use the
Here we are taking a number (
age) and checking to see if the statement is
true. The statement
16 > 15 is true, so we will return
true, and the function will stop. If it is not, it will skip that code and the function will return
The “Greater Than” symbol (
> ) that you see in the last example is called a Comparison Operator. Comparison Operators evaluate two items and return either
false. These operators are:
!== . We will learn more about these operators in the next lesson.