1. Getting Started with JavaScript

Objective: By end of this checkpoint, you will learn basic JavaScript Concepts

Key Terms

• JavaScript
• program
• statement
• syntax
• single line comment
• multi-line comment
• variable
• camelCase
• datatype

What is JavaScript?

JavaScript is the programming language used to make websites dynamic and interactive. It’s a client-side programming language, which means the code gets executed in the user’s web browser (such as Chrome and Firefox). With the advent of Node.js and other technologies, it can also be used as a server-side language, making it extremely versatile. JavaScript is used primarily for front-end web development and works closely with HTML and CSS.

What is Programming?

A programmer writes programs, just as an author writes a book.

A program is just a set of instructions that a computer can read and use to perform a task. Each individual instruction is a line of code known as a statement, which is similar to a sentence in a book. While a sentence in English ends with a period (.), a JavaScript statement usually ends with a semicolon (;). Syntax refers to the symbols and rules that define the structure of the language, similar to grammar and punctuation, and the semicolon (;) that ends a JavaScript statement is part of the syntax.

Comments

A comment is a human-readable note written in the code.

Comments are written in plain English with the purpose of explaining the code. Although comments don’t technically perform any function in the program, it’s crucial to get into the habit of proper documentation to help you or future collaborators understand the intent of your code.

There are two types of comment in JavaScript:

• A single line comment, written as two forward slashes // followed by the comment.

For example: // This is a single line comment.

• A multi-line comment, which is sandwiched between /* and */ and can span many lines.

For example:

Variables

A variable is a container that stores data values.

You know a variable as something that can change. In basic algebra, it’s a letter that represents a number. x is a common variable name, but it can just as easily be represented by y, z, or another name.

Initially, x has no value or meaning. But you can apply a value to it. For example:

x = 5

Now, x represents 5. You can think of x as a container that’s storing 5, which is a number.

In JavaScript, variables work the same, except they can contain more than just numbers as a value. They can actually contain all sorts of data values and we’ll learn about them in this checkpoint and beyond.

Modern JavaScript variables are created and declared using the let and const keywords. For a comparison of the differences between the two, refer to this article for an explanation.

We can use our algebra example above to create a JavaScript statement.

let x = 5;

This means that the variable x contains the numeric value of 5.

Building on what we’ve learned so far, you can see that we have a JavaScript statement that declares a variable, x, assigns the number data type, 5, with a single equals sign, =, and the statement ends with a semi-colon, ;.

Variables only need to be declared with let or const the first time they’re used. And as you’ve already learned, a variable’s value can change.

A variable can only contain one value at a time. Since the JavaScript program is executed from top to bottom, the value of x is now 6.

Here is an example of a variable with a different data type:

let greeting = "Oh hi, Mark!";

Now the greeting variable contains the string “Oh hi, Mark!”.

A few important things to know about variables:

• A variable name can have letters, numbers, a dollar sign ($), and an underscore (_), but it cannot begin with a number.
• A variable cannot be any word on the list of reserved keywords.
• Variables are case sensitive.
• The naming convention is camelCase. This means a variable always starts in lowercase but each subsequent word starts with an uppercase letter.

Tip: Although a variable can have any name, it’s important to choose names that are descriptive yet concise.

Datatypes

Now that we know about variables, we can learn about the types of data that a variable can hold.

A datatype is a classification of data. Programming languages need to have different datatypes to interact properly with values. You can do math with a number, but not with a sentence. So the computer classifies them differently. There are six (6) primitive, or basic, datatypes: strings, numbers, Boolean, null, undefined, and Symbol (new in ES6). Primitives can only hold a single value. Anything that is not one of these primitives is an Object. Objects can contain multiple values.

JavaScript is known as a weakly-typed language, or loosely-typed language. This means the language will automatically determine the data type based on the syntax you use.

Testing

alert() and console.log() are two easy ways to print a value in JavaScript. For example:

Here is a demo of these methods. An alert is a popup window and console.log will print to the Inspector, which you can find by right-clicking in the browser and selecting Inspect. If you need to print a value in JavaScript, we recommend that you avoid alert() and instead use console.log(). This is because every time alert() is called, a popup window appears in your browser, so it gets very annoying after a while.

You can always find out the type of a variable by using typeof. For example: