Learn Computer Science With JavaScript: Part 1, The Basics

Learn Computer Science With JavaScript: Part 1, The Basics

Introduction

JavaScript is a language that we can use to write programs that run in a browser or on a server using Node. Because of Node, you can use JavaScript to build full web applications like Twitter or games like Agar.io.  

This is the first lesson in a four-part series where I will teach you the programming fundamentals you will need so you can learn to build your own apps. In part 1, I will introduce you to the syntax of JavaScript and ES6. ES6 stands for ECMAScript 6, which is a version of JavaScript.

Contents

• Installation and setup
• Designing a program
• Syntax
• Variables
• Data types
• Review
• Resources

Installation and Setup

First, we will set up our development environment so that we can run our code on our own computer. Alternatively, you can test code examples on an online editor like repl.it. I prefer you get started writing and running code on your computer so you can feel like a real programmer. Plus, I want you using Node so you can put it on your resume and impress your employer.  

First, you will need a text editor to write your code in. I recommend Sublime Text. Next, download and install Node to your computer. You can get the software on the Node.js website. Confirm the installation worked by typing the command node -v from your terminal. If everything is fine, you will see the version number of your Node installation. 

One of the things you can do with Node is run JavaScript code from within your terminal. This takes place in what is called a REPL. To try it out, enter the command node in your terminal. 

Next, let's print the message “Hello, World”. Type the following into the terminal:

> console.log("Hello, World");

To exit the REPL, press Control-C twice. Using the REPL comes in handy when you want to test simple statements like the example above. This can prove more convenient than saving code to a file—especially if you’re writing throwaway code. 

To execute a program you have written in a file, in your terminal run the command node filename, where filename is replaced with the name of your JavaScript file. You do not have to type the js extension of the filename to run the script. And you must be in the root directory where the file lives.

Let’s try an example. Create a file named hello.js. Inside, we will put the following code:

console.log("Hello, World");

Run the code from the terminal:

$ node hello

If all is well, you will see the text "Hello, World" output to the terminal. From now on, you can test the code examples from this tutorial either by using the Node REPL or by saving to a file.  

Designing a Program

Before you write any code, you should take the time to understand the problem. What data do you need? What is the outcome? What tests does your program need to pass? 

When you understand the requirements of the program, then you can write the steps to solve it. The steps are your algorithm. Your algorithm is not code. It is plain English (replace English with your native language) instructions for solving the problem. For example, if you want to write an algorithm for cooking top ramen, it might look like this:

1. Remove top from cup.
2. Empty seasoning pack into cup.
3. Fill cup with water.
4. Microwave on high for 2 minutes.
5. Cool for 1 minute.

Yes, I was hungry when I thought of this. And no, this is not something you would actually be given as a programming problem. Here is an example of a problem that is more practical. It is an algorithm to calculate the average of a list of numbers.

1. Calculate the sum all of the numbers.
2. Get the total number of numbers.
3. Divide the sum by the total.
4. Return the result.

Understanding the problem and coming up with an algorithm are the most important steps in programming. When you feel confident in your algorithm, then you should write some test cases. The tests will show how your code should behave. Once you have your tests, then you write code and tweak it until your tests pass. Depending on how complex your problem is, each one of the steps in your algorithm may need to be broken down further.  

Task

Write an algorithm to calculate the factorial of a number. The factorial of a number *n* is the product of all integers from 1 to *n*. For example, 4! (4 factorial) is 1 x 2 x 3 x 4 = 24.  

Syntax

A program is similar to the language we speak with. The only difference is a programming language is meant to communicate with the computer (and other programmers who have to use it). The rules for constructing the program are its syntax. Programs consist of statements. A statement can be thought of as a sentence. In JavaScript, you must put a semicolon at the end of a statement. Example:

a = 2 + 2;

Statements consist of expressions. Expressions are like the subject/predicate parts of a sentence. In a programming language, expressions have a value. Expressions consist of keywords like var and for which are the built-in vocabulary of the language; data like a number or string; and operators like + and =. Example:

2+2

Here is a list of arithmetic operators:

• + - Addition
• - - Subtraction 
• * - Exponentiation
• * - Multiplication
• / - Division
• % - Remainder
• ++ - Increment
• -- - Decrement

The remainder operator returns the remainder after dividing two numbers. For example, 4 % 2 returns 0, and 5 % 3 returns 2. The remainder operator is commonly used to find out if a value is even or odd. Even values will have a remainder 0.  

Task

Find the value of the following expressions. Write down your answers first, and then check them in your REPL.

• 9 % 3
• 3 % 9
• 3 % 6
• 3 % 4
• 3 % 3
• 3 % 2

Variables

A variable is a name that represents a value in the computer’s memory. Any value we would like to store or to use over and over should be placed in a variable. One way of creating variables is with the var keyword. But the preferred way is to use the let or const keywords. Here are some examples of using let to create variables:

Declaring a variable:

let a;

Declaring and initializing a variable:

let a = 1;

Reassigning a variable:

a = 2;

Constants are variables that cannot change. They can only be assigned once. Constants that have objects or arrays as values can still be modified because they are assigned by reference. The variables do not hold a value; instead, they point to the location of the object. Example:

const a = {foo:1,bar:2};

a.baz = 3;

console.log( a );    // displays { foo: 1, bar: 2, baz: 3 }

However, this will give you an error:

const a = {foo:1,bar:2};

a = {};

console.log( a );

Data Types

Data types have rules for how they can be operated on. For example, if we add two numbers, we get their sum. But if we add a number with a string, we get a string. Here is a list of the different data types:

• Undefined: a variable that has not been assigned a value
• Null: no value
• Boolean: an entity that has the value true or false
• String: a sequence of characters
• Symbol: a unique, unchanging key
• Number: integer and decimal values
• Object: a collection of properties

A string is a data type that consists of characters. A string will be surrounded with single quotes or double quotes. Strings also have methods you can use to perform actions on them. The following are some examples of actions you can perform on strings.

Determine if a string begins with a substring:

"Hello, World".startsWith("hello");    //true

Determine if a string ends with a substring:

"Hello, World".endsWith("World");    //true

Determine if a substring is located anywhere in a string:

"Hello, World".includes("World");    //true

Repeat a string a specified number of times:

"Hello".repeat(3);    //HelloHelloHello

We can turn a string into an array with the spread operator: ...

let str = [..."hello"];

console.log(str);    //[ 'h', 'e', 'l', 'l', 'o' ]

Template literals are a special kind of string that use backticks: ` `. We can use them to insert variables within a string like this:

let name = "World";

let greeting = `Hello, ${name}`;

console.log(greeting);    //Hello, World

We can create multiline strings like this:

`
<div>

    <h1>Hello, World</h1>

</div>

`

Review

We have seen how to set up our development environment using Node. The first step to programming is writing the steps to solve the problem. This is called the algorithm. The actual code will consist of many statements. Statements are the program’s instructions and are made up of expressions. Expressions are useful in our program if we assign them to variables. Variables are created with the let or const keyword. 

In part 2, I will explain conditionals. 

Resources

• repl.it
• Sublime Text
• Node.js
• ES6 specification
• You Don’t Know JS: ES6 and Beyond