Introduction to JavaScript: Basics

Mahendra Choudhary
Nov 23, 2019 · 11 min read
Image for post
Image for post

JavaScript is the programming language that lets the Internet work. The Internet would be nothing without JavaScript and in this lesson, you will find out why.

At the end of this article, you should be able to:

  • understand what Javascript is and explain its use in web development.
  • explain and use JavaScript primitive data types and variables.
  • explain and use JavaScript functions as properties and methods on primitive data types.
  • explain global object in JavaScript and be able to use the Math object.
  • explain basic control flow and if/else statements.

Learn

Learn to understand what Javascript is and explain its use in web development.

Overview

JavaScript is the third of the major building blocks of a web page. Without it, we wouldn’t have the dynamic content and usability we expect from modern websites. We will now learn what it is (and isn’t) and how it is used, not only on the web but in all of its applications.

What is JavaScript and why do we use it?

JavaScript is a programming language that was first created in 1994 as a way to add functionality and user interaction to a website. If we think back to our analogy of a web page as a house (Introduction to Web Development Fundamentals), we will remember that we said that JavaScript is the electricity, plumbing, and gas. It is what makes the web page “run”. JavaScript was originally designed to be used purely on the front end as a way for web developers to add functionality to their web pages, and in its early days, it did just that. Recently, the introduction of the “V8 engine” by Google has improved the speed and functionality of JS. That led to the development and release of exciting new front end JavaScript frameworks and eventually Node.js, a way to run JavaScript on a server (back end). This new development has led to a resurgence of JavaScript. Now, JavaScript is one of the world’s most widely-used programming languages. We can find JavaScript used on the front end, back end, mobile, Internet of Things (Iot), game development, and really anywhere a traditional programming language would be used. Recently, the newest version of the JavaScript language was released, ES6*.

*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.

JavaScript vs Java (and other languages)

Keep in mind, JavaScript != Java. Although they share similar names (this was, unfortunately, considered a feature by JavaScript’s early pioneers) that is where the similarities end.

The creators of JavaScript wanted to borrow concepts from other programming languages, such as Java and C. Those of you with backgrounds in other languages may see things that look very familiar, mainly the use of classes and Object-Oriented Programming (OOP) architecture. Keep in mind that JavaScript is not a true OOP language and many things you may be familiar with from another language won’t work with JavaScript.

JavaScript is considered a ‘loosely’ typed language, in which types do exist, but they are not enforced. You do not have to declare a type when creating a variable or an array, for instance.

How to ‘run’ JavaScript

JavaScript, being the de-facto language of the Internet, is usually run from within an Internet browser. In fact, you can write all of the JavaScript you want and watch it run in real-time right in your browser by pressing F12 (for Windows), or Cmd+option+J (for Mac) (for Google Chrome). This will open up your console (we will learn more about the console later).

While this is one way to run your JavaScript, most JavaScript is run from a file with the extension of .js (e.g., fileName.js) and loaded into your browser via the script tag in your HTML.

We had mentioned Node.js earlier, and while we are not going to go further than this small piece about it, JavaScript can be run on a server (back end) as well. It is loaded into a computer using a special command line, and the Node.js program will run the JavaScript.

Learn

Learn to explain and use JavaScript primitive data types and variables.

Overview

In order to understand the JavaScript language, the first step is to understand and be able to use variables and primitive data types.

Variables

At the heart of JavaScript are variables. A variable is a way to store the value of something to use later. (A note for those with previous programming knowledge: JavaScript is a loosely-typed language, which means that a variable can be set (and reset) to any type. We do not need to declare its type when initiating the variable.)

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.

Image for post
Image for post

var

var is the ES5 way of declaring a variable. This is a generic variable keyword.

let

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

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

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.

Image for post
Image for post

Numbers

Numbers are just that, numbers. Numbers do NOT have quotes around them. They can be negative as well. JavaScript does have a limitation on the size of a number (+/- 9007199254740991), but only very rarely will that limitation come up.

Image for post
Image for post

Booleans

Booleans come from low-level computer science. It is a concept that powers binary code and the very core of computers. You may have seen binary code in the past (e.g., 0001 0110…). That is Boolean logic. It essentially means you have two choices, on or off, 0 or 1, true or false. In JavaScript, we use Booleans to mean true or false. This may seem simple at first but can get complicated later on.

Image for post
Image for post

Math Operators

One of the first jobs a computer had was to compute numbers. In JavaScript, we have built-in math operators that work exactly as they do on your calculator.

+ — * / =

Image for post
Image for post

%

Something you may not have seen before is the Modulo (%). This math operator will divide the two numbers and return the remainder.

Image for post
Image for post

Learn

Learn to explain and use JavaScript functions as properties and methods on primitive data types.

Overview

As we progress through our introduction to JavaScript, we will learn the types of things we can do with those primitive data types. In this objective, we will learn about functions.

Properties and Methods

Primitive data types (and other data types) have built-in functionality known as properties and 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.

Image for post
Image for post

Properties

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).

Image for post
Image for post

Methods

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.

Image for post
Image for post

Functions

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 method.

Anatomy of a Function

Image for post
Image for post

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.

Image for post
Image for post

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.

Arguments

Now that we can run a basic function, we are going to start passing it arguments.

Image for post
Image for post

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:

Image for post
Image for post

We can add multiple arguments by placing a comma in between them:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

We can see that ‘difference’ is set inside of the function. The variable inside the function only belongs inside the function.

Learn

Learn to explain global object in JavaScript and be able to use the Math object.

Overview

Global objects are pre-written code available to us in JavaScript. They extend the functionality of the language. It is important to learn what these objects are, and how to use them.

Global objects and methods

JavaScript has a number of built-in objects for us to use. These 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. Math has a number of methods on it just like console has log. To add to this, some of our data types also have built-in methods.

Math.pow

We can use the pow method on Math to return a number risen to an exponent. It will take two numbers.

Image for post
Image for post

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.

Image for post
Image for post

Learn

Learn to explain basic control flow and if/else statements.

Overview

Control flow allows us to write code based on conditional statements. Understanding this flow is an important part of learning to program.

Control Flow

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 if keyword:

Image for post
Image for post

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 false.

The “Greater Than” symbol ( > ) that you see in the last example is called a Comparison Operator. Comparison Operators evaluate two items and return either true or false. These operators are: < , <=, >, >=, ===, !== . We will learn more about these operators in the next lesson.

Tutorials

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store