JavaScript Programming – A Complete Guide For Beginners

JavaScript is a well-known programming language and a widely used client-side scripting
language. Client-side scripting refers to scripts that function within your web browser.
JavaScript is designed to add interactivity to web pages by handling the content returned from a web server.
Indeed, JavaScript is the most popular programming language you want to learn as a web
developer – and with this guide, we make sure that you will not miss a single thing you have to comprehend as a JavaScript developer.
If you’re reading this, you may already have some knowledge of HTML and CSS (Cascading
Style Sheet). You might know that your journey into Web Development requires learning
how to programmatically manipulate things on a web page through the use of JavaScript.
No programming language article for absolute beginners would be useful without explaining
the basics of the programming language. In the case of JavaScript, we believe these to be the following: Values, Variables, Arithmetic, Data Structures, Equality, Conditionals, and
Functions.
No doubt, there are other main points in JavaScript that are also useful, but a basic level of
knowledge of these seven things will put you in a good place to begin your journey — not
only with programming in JavaScript but with programming in general.

This Guide for JavaScript beginners will feature (What you'll learn) –

•  A rich overview of JavaScript.
•  Step-by-step learning of all the basics:
•  Values
•  Variables
•  Arithmetic
•  Data Structures
•  Equality
•  Conditionals
•  Functions

Who this Guide is for –

1.  Beginner web development learners who have no or only little JavaScript experience.
2.  Developers who know the basics of JavaScript and want to strengthen their
   knowledge.
3.  Everyone who is interested in learning JavaScript and want to know all about how it
   works.

So, let’s get started!!

Overview of JavaScript –
JavaScript programming language is a tool for developers to add interactivity to web pages.
In short:

•  HTML structures your content
• CSS styles it
•  JavaScript makes it come to life.

These three languages allow web developers to create dynamic online experiences.
Also, JavaScript lets you do a bunch of things on a website such as:

•  Auto-update content, like a social media feed
•  Animate visual elements
•  Add visual feedback on user interactions
•  Add interactive maps
•  Trigger pop-ups after user actions

However, these use cases only represent the tip of JavaScript, Web developers also can use it to:

•  Create single-page applications with frameworks (React & Vue.js).
• Run backend web servers with Node.js.

JavaScript is a quite versatile language, used in both programming models, i.e. functional &
OOP (object-oriented programming).

A Step By Step Learning of All the Basics –
1. Values –
There are 8 various types of values in JavaScript. Seven of these are what we refer to
as Primitives. The seven types of values are – Boolean, Null, Undefined, Number,

BigInt, String, and Symbol. The 8th type of value in JavaScript is known as Object.
For this section, we are only going to focus on the three most generally used
Primitives, which are Strings, Numbers, and Booleans.

• Strings:
  Strings are values that have been enclosed in between a pair of speech marks
  or apostrophes.
  Examples: “hello”, “1968”, 'Liverpool F.C.‘
  If you enclose it in apostrophes or speech marks, it becomes a string.
• Numbers:
  This includes whole numbers such as the number 5, and decimal numbers such
  as 12.5.
  Examples: 29, 3.5, 1, 5555555.
  If you place a number inside a speech mark like “5” it will become a string.
  Doing so can bring issues if you later try to use that number for performing
  arithmetic.
• Booleans:
  These are basically true or false statements, which are displayed as true or
  false.

2. Variables –
Variables enable you to hold data by tagging it with a name.
For example – "Pi" is an infinitely long number.
var pi = 3.1415926535;
You see here that we create a variable by writing "var" and then the name we want to give to our variable, and in this case, "pi". We then apply the equals "=" sign and then write whatever value we need at the end. Finally, we complete assigning our variable by placing a semicolon ";" at the end.
Moreover, there are actually two other ways that we can create variables, by swapping
out the use of "var" either with "let" or "const". In fact, most of the JavaScript community encourages the use of "let" and "const" instead of "var", due to the variations in ‘scope’ and the possible effect this can have on your code.

3. Arithmetic –
These are the main four Operators:
+ (addition)
– (subtraction)
* (multiplication)
/ (division)
Examples:
6 + 8
9 — 3
5 * 4
10 / 2
In these cases, we don’t have to strictly implement the actual numbers. If we have
values that are numbers that have been specified to variables, we can use them as
well.
Decimals, or Floats as you might have heard them, do not calculate in JavaScript in
the same way that a human would do. Sometimes, it might work. For example: 0.2 +
0.2 will return 0.4. But 0.4 + 0.3 + 0.2 + 0.1 will return 0.9999999999 in JavaScript,
whereas a human might consider it to return 1. If you plan to create something in
JavaScript that relies on a precise calculation, learn about some JavaScript libraries
that are designed to manipulate this.

4. Data Structures –
Data structures provide us with more compact ways to hold values. For example,
suppose you want to store a shopping list full of items you think to purchase at the
grocery store. It would be inconvenient to try and store each item in its own variable
Example: let item 1 = “apples”; let item2 = “cereal”;
The following will show us two methods that we could tackle both.

• Arrays:

You can consider an array as a data structure that permits us to hold onto lists
of information which makes it perfect for use with our grocery list example, so
let’s try it:
let groceryList = ["apples", "cereal", "milk"];
You will observe that we enclose the list of items inside of square brackets"[
]". Here, we simply use those square brackets and that forms the array.
Besides, being a unique way to store lists of information, arrays also provide a
number of beneficial methods that give us simple ways to read items in our
array, as well as to add and delete items. These are identified as array
methods.

•  Objects:
  Objects give a way to store a series of values in a single data structure, with
  each value having its own key, which is sort of like creating an inner variable
  inside of an object.
  For example:
  const companyAddresses = { london: “1 Live Street”, berlin:
  “Hedemannstasse 30”, italy: "Via Santa Teresa 85" };
  Just like arrays, you can store several values in there, such as numbers and
  booleans. The way that you write an object in JavaScript is not restrained to
  the way that it was written above. You can also write out the object in an
  easier format, like:

  const companyAddresses = {
  london: “1 Live Street”,
  berlin: “Hedemannstasse 30”,
  italy: "Via Santa Teresa 85"
  };

   

  Once you’ve created an object, you can then access the attributes within
  whenever you want to.

5. Equality –
Measures of equality and inequality, correlate closely to boolean values, if so far that
a measure of equality will return either "true" or "false" as an output.

Let’s assume that we have a person called Mark. Mark claims that he has green eyes
and is 25 years old. Let’s create an object for Mark based on what he has informed us:

const markInput = {
age: 25,
eyeColor: "Green"
};
Now let’s assume that we also have a record of Mark that we have pulled in from a
database. That record looks like this:
const markDatabase = {
age: 35,
eyeColor: "Green"
};

Have you noticed anything different between what Mark has told us and what his
record states? If we want to verify whether what Mark has told us is true, we could
write something such as:
markInput.age === markDatabase.age
This would return "true" if both ages are equal, and "false" if they’re not. In this
example, it would return "false" as the age for markInput was 25 while the age for markDatabase was 35. If we did the same equality check for eyeColor, it would return
"true", as both records have the eyeColor stated as "Green".
Moving back to the age check, what if the two values we were checking were 35 and
"35". What do you think would result here? Well, if we tried to check it like so:
35 == "35"
It would actually return “true". The reason here is because we are using the double
equals operator "==" which checks for equal values, but doesn’t care too much if the
types are different which in this example they are, because the first value is a number
and the second value is a string. Actually, there is an operator for checking against
both value and type, which is what we had used earlier. This is the triple equals
operator "===". So we if had the following:

35 === "35"
It would return "false".
There are many different types of equality we can check for:
== (equal value)
=== (equal value AND type)

!= (not equal value)
!== (not equal value OR type)
> (is greater than)
< (is less than)
>= (is greater than or equal to)
<= (is less than or equal to)

6. Conditionals –
Conditionals enable us to process incoming data and decide what step we want our
program to take next.
For example, let’s assume that we were creating a website that we only want users to
access if they were at least 19 years old. Here we could use a conditional to decide
whether to let the user in or not.
Let’s take a look at an example of how this might work:

let age = 20;
if(age >= 19) {
// let the user in
} else {
// don't let the user in
}

In the example, we have made use of an "if/else" statement. The first part — the "if"
looks a lot like a regular function, in terms of the syntax used and overall structure. In
our example, we want to see if the user is at least 19 years old. So here we write age
>= 19. This is actually the same as writing age >= 19 === true, as conditionals check
for ‘truthiness’ by default.

7. Functions –
Functions are one of the fundamental building blocks of any programming language.
It is basically a set of statements that executes a task or computes a value.
In order to start to learn how we write and use functions, let’s take a glance at a
simple function that calculates two numbers together:

function addTogether(x,y) {
return x + y;
}

In JavaScript language, whenever we want to create a function, we use the "function"
keyword at the beginning. This informs JavaScript that we are going to create a
function. The second thing is the "name" of the function. Just like variables, it’s
usually a great idea to give these functions semantic names. In our example, we’ve
defined our function "addTogether" because that’s how our function will operate –
calculate two numbers together.
So here we have specified our two parameters, “x”, and “y”. You can see that we then
have an opening curly brace "{" some content, which in our example is "return x + y";
and then a closing curly brace "}". So, our function applies those two parameters and
returns the value of those two parameters summed together. So if those two
parameters were “20” and “30”, our function would return “50”.
Thus, there is really so much more to learn about functions and how powerful they are
in your programming toolkit.

Wrapping Up –
We hope you enjoyed exploring our complete guide for beginners in the JavaScript
programming language. For a few, it may be an entirely new programming model, but we
believe you will give it a chance. We suggest you start writing some JavaScript code right
away for better knowledge. After all, the great way to commit things to memory is through
practice!

Also Read:
1.) Best Programming Courses for Students
2.) 12 Popular JavaScript Libraries to Know