JavaScript
Javascript is a high-level, object-oriented, multi-paradigm programming language. JavaScript is primarily known as the language of most modern web browsers, and its early quirks gave it a bit of a bad reputation. However, the language has continued to evolve and improve. JavaScript is a powerful, flexible, and fast programming language now being used for increasingly complex web development and beyond!
The role Javascript plays in web development is as follows:
- HTML
- is the actual content of the page.
- CSS
- is the presentation of the web page.
- Javascript
- is the actual programming language.
In recent years Javascript has been seen popping up outside of the web browser world with tools like nodejs allowing Javascript applications to interact with just a web server to make it more of a backend programming language. Or implementations like angular bringing Javascript to the mobile or desktop world. Also tools like react bringing Javascript to native desktop apps. These addvances in the Javascript world make learning Javascript a vital tool to almost any development field.
This guide is going to reference "modern" JavaScript. Modern JavaScript is noted as any version of JavaScript after ES6: JavaScript Versions.
This first page will cover the absolute basic Fundamentals of JavaScript. If you feel like you can skip this part feel free to jump to another section of the guide:
TODO Link to other topics
JavaScript Fundamentals
This is section is going to cover the basic fundamentals of JavaScript. If you are fairly versed in other programming languages you can probably skip this section and go to one of the more advanced topics listed above.
Data Types
In JavaScript, there are seven fundamental data types:
- Number:
Number in JavaScript is similar to an
int
or afloat
data type in most other programming languages. - String: In JavaScript strings can be surrounded by single quotes: ' … ' or double quotes " … ". Though we prefer single quotes.
- Boolean: In JavaScript booleans are just standard booleans described in the data types guide.
- Undefined: This data type is denoted by the keyword undefined (without quotes). It also represents the absence of a value though it has a different use than null.
- Null: This data type represents the intentional absence of a value, and is represented by the keyword null (without quotes).
- Symbol: A newer feature to the language, symbols are unique identifiers, useful in more complex coding. No need to worry about these for now.
- BigInt:
BigInt in JavaScript is similar to a
double
data type in most other programming languages.
These datatypes are considered primitive data types. They are the most basic data types in the language. Objects are more complex, and we'll cover them later on.
Its also important to note that JavaScript has dynamic typing. This means we do not have to manually define the type of data we will store in each variable. Instead data types are determined automatically.
Tips
- You can use the keyword
typeof
to see what data type a value or variable is. - Since JavaScript variables are dynamic you can change a variables data type but assigning it a value of a new data type and it will be updated on the fly.
Comments
JavaScript uses //
for its Comment notation and /* */
for its
Block Comment notation.
Declaring variables
Declaring variables in JavaScript can be done with the let
, const
, and
var
keywords. The let
and const
variables were added in ES6+ (modern
JavaScript). Again I want to point out that JavaScript uses dynamic variable
declaration so we don't actually have to define what data type our variable
is. This also means we can reassign a different value to the variable and it
will change the variables data type for us.
let
allows you to mutate (change) the variable:let age = 30; age = 31;
const
makes a variable immutable (unchangable):const year = 2021; // This would throw an error year = 2022;
It is worth noting that when using const the variable has to be assigned a value or JavaScript will throw an error about
const
missing a declaration.var
is more of a legacy feature of JavaScript and works pretty much the same aslet
:var job = 'programmer'; job = 'teacher';
Usage of
var
should be mostly avoided as it is a legacy feature and has mostly been replaced bylet
.
Operators
In JavaScript operators are treated just like they are in most other
languages and JavaScript also suppports the ++
and --
operators.
Operators allow us to change or work with values to put it simply. Let's look at an example of some simple arithmetic operators:
const now = 2037; const ageJonas = now - 1991; const ageSarah = now - 2018; console.log(ageJonas, ageSarah); // Prints: 46 19 console.log(ageJonas * 2, ageJonas / 10, 2 ** 3); // Prints: 92 4.6 8 // 2 ** 3 means 2 to the power of 3 const firstName = 'Jonas'; const lastName = 'Cuomo'; console.log(firstName + ' ' + lastName); // Prints: Jonas Cuomo
Now let's look at some assignment operators:
let x = 10 + 5; // 15 x += 10; // 25 x *= 4; // 100 x ++; // 101 x --; // 100
Let's also show some comparison operators:
console.log(ageJonas > ageSarah); // Prints: true console.log(ageSarah >= 18); // Prints: true
Tips
- Here is a guide on operator precedence which describes the order in which operators get executed when combined together in one statement: Operator Precedence.
Functions
In JavaScript functions work pretty standard to most other programming
languages. Please refer to the functions guide if you are unfamiliar with the
concept of functions. JavaScript does not require us to define a return type
for our functions as JavaScript is a dynamic type language. In JavaScript we
also don't have to define a data type for any arguments we assign to our
functions. It is important to note that we define functions with the
function
keyword in JavaScript. Let's look at some examples of functions in
JavaScript:
function fullName (first, last) { console.log(first, last); return first + last; } console.log(fullName('Jonas', 'Cuomo')); // Prints: Jonas Cuomo
You will notice that we can also nest functions which will use the output of
the inner function as an input argument for the outter function. In this case
I am referring to how we nested our call to the fullName
function in
console.log
. console.log
is a built in operator in JavaScript, which
although isn't technically a function it can be thought of as one. Refer to
my operators guide for a more indepth look at what operators are and they
differ from functions.
Expression Functions
The example covered above is what is known as a "declaration" function in JavaScript. This is probably the most standard way of defining a function in JavaScript, however it is not the only way. We can also define an "expression" function. An expression function is very similar in concept and even follows all the same rules mentioned above, however we assign the function definition to a variable and then call the function by the variable name. This sounds confusing so let's look at an example:
const fullName = function (first, last) { console.log(first, last); return first + last; } console.log(fullName('Jonas', 'Cuomo')); // Prints: Jonas Cuomo
Although this may look weird it is important to learn as sometimes we will be required to create expression functions. The reason this work in JavaScript is because in JavaScript functions are just a value so we can assign them to a variable like we would any other value. This will become important later as we dive deeper into functions.
One important difference to note between declaration functions and expression functions is that we can actually call declaration functions before they have been defined whereas with expression functions we have to have defined the function in our code before we can call it.
Arrow Functions
JavaScript also has a form of functions called "arrow" functions. Arrow
functions behave just like expression functions, but are much easier and
quicker to write. We wirte arrow functions with: =>
and with arrow
functions a return statement is assumed. Let's take a look at how we would
write our above examples as an arrow function:
const fullName = (first, last) => first + last; console.log(fullName('Jonas', 'Cuomo'));
TODO Data Structures
In JavaScript we have many data structures available to us to use in our programs. The simplest of these are arrays.
TODO Arrays
Arrays in JavaScript follow a fairly standard syntax to most dynamic programming languages. Let's look at an example:
// Literal syntax: const friends = ['John', 'Jacob', 'Jingle']; console.log(friends); // Prints: ['John', 'Jacob', 'Jingle'] console.log(friends[1]); // Prints: Jacob console.log(friends[friends.length - 1]); // Prints: Jingle friends[2] = 'Jay'; console.log(friends); // Prints: ['John', 'Jacob', 'Jay'] // TODO: Even though array was declared with const entries can be updated. // More on this later // Using new keyword: const friends = new Array('John', 'Jacob', 'Jingle'); console.log(friends); // Prints: ['John', 'Jacob', 'Jingle']
What's next
Well now we have covered the absolute basics of JavaScript and many basic topics of programming as a whole. Let's now finally dive into some of the meat of the JavaScript programming language. Here are some of the topics I have covered, if JavaScript is completely new to you I would suggest going through them in the order listed:
Other tips
Here are just some other random tips about JavaScript:
Strict mode
Strict mode is a feature in JavaScript that will cause more errors and fail
our program when we do things wrong whereas without it JavaScript will silently
fail and continue running our program. Using strict mode will force us to
write more secure JavaScript applications. To use strict mode add
'use strict';
to the beginning of your program.