JavaScript Values, Types, and Operators

Your first steps with JavaScript: variables, console.log, and running files with Node.js.

You're about to write your first JavaScript code! JavaScript is the programming language of the web - it runs in every browser and powers interactive websites. But it's also much more: with Node.js, JavaScript runs on servers, mobile apps, and even desktop applications.

Real-world scenario: When you click "Like" on a social media post, submit a form on a website, or see a live chat message appear, that's JavaScript in action. Companies like Facebook, Netflix, and Spotify rely heavily on JavaScript for their user interfaces and server operations.

What You'll Learn Today

What JavaScript is and why it's everywhere
JavaScript's core data types: numbers, strings, and booleans
Basic operations: arithmetic, string concatenation, and comparisons

Why Start with JavaScript?

Beginner-friendly: Forgiving syntax and immediate feedback
Versatile: Works in browsers, servers, and mobile apps
High demand: Most requested programming language in job postings
Great community: Tons of resources and help available

Core Concept Overview

What is JavaScript?

JavaScript is a programming language that:

Makes websites interactive and dynamic
Runs in web browsers and on servers or just your local computer outside of a browser via Node.js
Is used for front-end (user interface) and back-end (server) development
Enables features like animations, form validation, and real-time updates
Powers web applications like Gmail, Facebook, and Twitter
Is essential for modern web development
Communicates with databases and APIs. Here, APIs are third-party services that provide data or functionality your app can use, like weather information or payment processing.

JavaScript is NOT Java (despite the name):

The name was a controversial marketing decision in the 90s, and 30 years later, the confusion remains as does an ongoing lawsuit against Oracle.
For all intents and purposes, Java is to JavaScript as car is to carpet.
If you are studying Java at the same time, please review Mozilla's comparison of the 2️⃣. If this is your first time programming, you may actually find JavaScript easier to learn than others who might be coming in with other preconceptions.

What is EcmaScript?

The standardized specification that JavaScript follows
Ensures consistency across different environments (browsers, Node.js)
New versions introduce modern features (ES6, ES7, etc.). As of this writing ✍️, we are currently on ES2024.

Before continuing on, please reference Mozilla's explanation on JS and EcmaScript You can stop when you get to, "Getting Started with JavaScript."

JavaScript Environments, Runtimes, and Engines

Environment: Where JavaScript runs (browser, server, etc.)
Runtime: The platform that executes JavaScript code (Node.js, V8 engine)
Engine: The core component that interprets and runs JavaScript (V8, SpiderMonkey)

Summarily, each browser has its own JavaScript engine (e.g., Chrome uses V8, Firefox uses SpiderMonkey). Node.js uses the V8 engine from Chrome to run JavaScript on servers and local machines.

Because of EcmaScript, JavaScript behaves similarly across different environments, but there can be some edge cases where behavior differs slightly.

For consistency, we will encourage the use of Chrome browser, but any modern browser should work fine. If you would like to use FireFox, get the FireFox Developer Edition, which has extra tools for developers. Note: For Mac, don't waste time manually installing. Use brew install --cask firefox-developer-edition to install via Homebrew.

Before continuing on, please read Values, Types and Operators

Values

Everything on a computer is ultimately represented as data. In programming, we work with different types of data to perform operations and create functionality.

Numbers

In JavaScript, numbers are used to represent both integers (whole numbers) and floating-point numbers (decimals). There is no differentiating between the two types like in some other languages. 42 and 3.14 are both of the same type: number. As are -7, 0, 2.71828, and 2.998e8 (scientific notation).

Even, Infinity and -Infinity are considered numbers in JavaScript.

And last and certainly least as it's not a bright spot on the design of JavaScript, we have NaN (Not-a-Number). Yes, you read that right. NaN, 'Not a Number' is actually a number type in JavaScript. It represents bad math such as 0/0. Here, the / is the division operator, so we are trying to divide zero by zero, which is mathematically undefined. In JavaScript, this one way to end up with NaN.

Summarily, if you see NaN in your code, it means something went wrong with a calculation.

Strings

Strings are sequences of characters used to represent text. In JavaScript, strings are enclosed in single quotes ('...'), double quotes ("..."), or backticks (located to the left of the '1' key). Backticks are typically used for something more advanced called template literals, which we will cover later.

For simplicity, just think of strings as human dialogue or text, so use double quotes for strings like you would in English.

"Hello, World!" and "12345" are both strings, even though the second one looks like a number. If it's in quotes, it's a string. If it's not in quotes, it's a number (assuming it's a valid number).

Booleans

Booleans represent logical values and can be either true or false. They are often used in conditional statements to control the flow of a program based on certain conditions.

Simply put, true means "yes" or "on", and false means "no" or "off".

Going back to strings, if you see something like "true" or "false" (with quotes), that is a string, not a boolean. Only the unquoted true and false are booleans, and that's almost always what you want unless you are literally communicating the words or strings, "true" or "false" to a user.

Empty Values

JavaScript has two special values that represent the absence of a meaningful value: null and undefined.

The difference in meaning between undefined and null is an accident of JavaScript’s design, and it doesn’t matter most of the time. In cases where you actually have to concern yourself with these values, I recommend treating them as mostly interchangeable.

Most of the time we are dealing with meaningful values, so the only time that these confusing 😕 empty values will come up is when JS returns them to us.

Types 🏷️

We classify data into different types based on what kind of information it represents. The data type determines what operations can be performed on it and how it is stored in memory.

Primitive Data Types

We just reviewed 4 of the most common types 🏷️ ☝️:

Number: Represents numeric values (e.g., 42, 3.14, -7)
String: Represents text (e.g., "Hello, World!", "12345")
Boolean: Represents logical values (true or false
Empty values: null or undefined, which generally represent nothing or no value or the absence of any value

Each of these specific types is more generally categorized as a primitive data type.

Primitive data types are the most basic building blocks of data in programming. They represent a single, indivisible value. This means that they are a discrete or single data point. Case and point, if you took the entire text of Moby Dick or It or any other book and wrapped it in quotes, it would be a single string.

Primitive data types are also immutable. They cannot be changed or broken apart further. You can create new values based on them, and you can even discard or garbage collect the previous value, but you cannot change the original value itself, ever.

When you call methods on primitives (like "hello".toUpperCase()), JavaScript temporarily wraps the primitive in a special wrapper object (String, Number, or Boolean), calls the method on that object, and then returns a new primitive value. The original primitive is unchanged:

const greeting = "hello";
const loudGreeting = greeting.toUpperCase();

console.log(greeting); // "hello" (original string is unchanged)
console.log(loudGreeting); // "HELLO" (new string primitive)

Operators

In order to do anything useful with the aforementioned data types, aside from a way to classify or type them, we need to perform operations on them. Operations are actions that can be performed on data, such as arithmetic calculations, comparisons, or manipulations.

Operators operate on operands, which are the values or variables that the operators act upon.

Arithmetic Operations

JavaScript supports several arithmetic operations, including:

Addition (+): Adds two numbers or concatenates two strings.
Subtraction (-): Subtracts one number from another.
Multiplication (*): Multiplies two numbers.
Division (/): Divides one number by another.
Modulus (%): Returns the remainder of a division operation.

String Concatenation

The + operator is also used for string concatenation, which combines two or more strings into one: "Hello, " + "World!" results in "Hello, World!".

Unary Operators

Unary operators operate on a single operand. Common unary operators include:

Negation (-): Negates a number (e.g., -5 becomes 5).
Increment (++): Increases a number by 1 (e.g., x++).
Decrement (--): Decreases a number by 1 (e.g., x--).
Typeof (typeof): Returns the type of a variable or value (e.g., typeof 42 returns "number").

As a reminder, primitive data types such as numbers are immutable, so using ++ or -- does not change the original value but creates a new value based on the operation.

And, note that typeof always returns a string.

Logical Operations

Logical operators are used to combine or modify boolean values:

AND (&&): Returns true if both operands are true (e.g., true && false is false).
OR (||): Returns true if at least one operand is true (e.g., true || false is true).
NOT (!): Reverses the boolean value (e.g., !true is false).

Comparison Operators

Comparison operators are used to compare two values and return a boolean result:

Equal (==): Returns true if two values are equal (e.g., 5 == 5 is true).
Strict Equal (===): Returns true if two values are equal and of the same type (e.g., 5 === '5' is false).
Not Equal (!=): Returns true if two values are not equal (e.g., 5 != 4 is true).
Strict Not Equal (!==): Returns true if two values are not equal or not of the same type (e.g., 5 !== '5' is true).
Greater Than (>): Returns true if the left value is greater than the right value (e.g., 5 > 4 is true).
Less Than (<): Returns true if the left value is less than the right value (e.g., 5 < 4 is false).
Greater Than or Equal (>=): Returns true if the left value is greater than or equal to the right value (e.g., 5 >= 5 is true).
Less Than or Equal (<=): Returns true if the left value is less than or equal to the right value (e.g., 5 <= 4 is false).

Before continuing on, open up your browser console (F12 or right-click → Inspect → Console tab) and try out some of these operations. Type them in and hit Enter to see the results.

Browser Console Tab

For best results, open this up from a fresh tab in your browser so you don't have any other code from a website 🏃🏾‍♂️‍➡️ that might interfere.

Template Literals

Template literals are a modern way to work with strings in JavaScript. They allow for easier string interpolation and multi-line strings. To create a template literal, you use backticks (`) instead of single or double quotes. To be clear, these are backticks, not apostrophes. The key for these is usually located to the left of the 1 key on most keyboards.

String interpolation allows you to embed expressions inside a string using ${} syntax. This makes it easier to create dynamic strings without needing to use the + operator for concatenation.

`Is it true that 5 + 5 = ${5 + 5}?`;

Without template literals, you would have to write:

"Is it true that 5 + 5 = " + (5 + 5) + "?";

Before continuing on, please revisit your browser console and try out some template literals. Type them in and hit Enter to see the results.

JS is a Dynamically Typed Language

JavaScript is a dynamically typed language, meaning 3️⃣ things:

You don't need to declare variable types explicitly (the interpreter figures it out for you)
Variables can change types during execution. Something that was a number in one moment can become a string in the next.
JavaScript performs type coercion, automatically converting values between types when necessary (e.g., when using the + operator with a string and a number).

"2" + 2 results in "22" (string concatenation), while "2" * 2 results in 4 (numeric multiplication). In either case, because JS is dynamically typed, it figures out what you mean based on the context.

Summarily, even though we said earlier that the type of a value determines what operations can be performed on it, JavaScript is flexible and will try to make sense of what you mean based on the situation. And with the basic operations that we are currently performing, almost any combination of types will work. Worst case, you get NaN if something goes really wrong with a calculation.

Key Terms

Primitive Data Types: Basic types that represent single values (e.g., number, string, boolean)
String: Text data enclosed in quotes
Number: Numeric data (integers or decimals)
Boolean: True or false values
Operators: Symbols that perform operations on values (e.g., +, -, *, /, ==, &&)
Operands: The values or variables that operators act upon
Type Coercion: Automatic conversion of values between different types
String Interpolation: Embedding expressions inside a string using ${} syntax

HW: Review and Reflection

Task: Complete the exercises mentioned in the lesson. This includes the readings and working in the dev console ☝️.
Deliverables:
- Share screenshots of your code and the output in the console.
- Write an MD reflection document (e.g Gist) on what you have learned. Consider the following questions:
  - What was the most challenging part of the lesson?
  - Have you taken or are you currently taking other programming courses? If so, how do they compare to what you've learned in this lesson? If not, what are your first impressions of programming so far?