Module 1: JavaScript Fundamentals

Working with the Console

The console is an essential tool for JavaScript developers. It allows you to execute code, see output, and troubleshoot errors. Let's explore how to use it effectively.

Opening the Console

In Chrome, you can open the console by right-clicking on a webpage, selecting "Inspect", and then clicking on the "Console" tab. Alternatively, you can use the keyboard shortcuts:

• Windows/Linux: Ctrl + Shift + J
• Mac: Command + Option + J

Using console.log()

The most common console method is console.log(), which prints values to the console:

console.log("Hello, world!");
console.log(42);
console.log(true);
                

Troubleshooting with the Console

The console is excellent for tracking errors. JavaScript will record most technical errors in the console. Common errors you might encounter:

// Reference Error (trying to use something that doesn't exist)
Console.log("This will cause an error"); // Capital C is incorrect

// Syntax Error (errors in the code structure)
console.log("Missing closing quotation mark);

// Type Error (performing operations on incompatible types)
const num = 42;
num.toUpperCase(); // Numbers don't have this method
                

1. console.log("BloomTech");
2. console.log(42 + 8);
3. console.log(true);
4. Console.log("Will this work?");
5. console.log("Quotation marks need to be closed);
                    

1. Prints "BloomTech" to the console
2. Prints 50 to the console (evaluates the expression first)
3. Prints true to the console
4. Causes a Reference Error (Console with capital C doesn't exist)
5. Causes a Syntax Error (missing closing quotation mark)
                    

JavaScript Values and Types

JavaScript works with several different types of values, including numbers, strings, booleans, objects, and more.

Primitive Data Types

• String: Text enclosed in quotes (e.g., "Hello" or 'World')
• Number: Numeric values (e.g., 42, 3.14)
• Boolean: Logical values (true or false)
• Undefined: Represents a variable that has been declared but not assigned a value
• Null: Represents the intentional absence of any value

Checking Types with typeof

You can use the typeof operator to determine the type of a value:

console.log(typeof "Hello"); // "string"
console.log(typeof 42);      // "number"
console.log(typeof true);    // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);    // "object" (This is a known JavaScript quirk)
                

Declaring Variables

Variables are used to store values for later use. JavaScript provides three ways to declare variables:

Using let

let declares a block-scoped variable that can be reassigned:

let age = 25;
console.log(age); // 25

age = 26;
console.log(age); // 26
                

Using const

const declares a block-scoped variable that cannot be reassigned:

const pi = 3.14159;
console.log(pi); // 3.14159

// This would cause an error:
// pi = 3.14; // TypeError: Assignment to constant variable
                

Using var (older method)

var is the older way to declare variables and has different scoping rules:

var name = "Alice";
console.log(name); // "Alice"

name = "Bob";
console.log(name); // "Bob"
                

Most modern JavaScript code favors let and const over var.

let firstName = "Alex";
const age = 28;
let isProgrammer = true;

console.log("Name:", firstName);
console.log("Age next year:", age + 1);
console.log("Is a programmer?", isProgrammer);

firstName = "Taylor";
console.log("New name:", firstName);

// What happens with this code?
// age = 29;
// console.log("New age:", age);
                    

Name: Alex
Age next year: 29
Is a programmer? true
New name: Taylor

// The commented code would cause an error because
// we cannot reassign a value to a constant variable.
// TypeError: Assignment to constant variable.
                    

String Properties and Methods

Finding String Length

You can find the length of a string using the .length property:

const greeting = "Hello, world!";
console.log(greeting.length); // 13

const emptyString = "";
console.log(emptyString.length); // 0
                

Accessing Characters with Indices

You can access individual characters in a string using square bracket notation with an index (starting from 0):

const name = "JavaScript";
console.log(name[0]); // "J"
console.log(name[4]); // "S"

// Getting the last character
console.log(name[name.length - 1]); // "t"
                

String Concatenation

You can combine strings using the + operator:

const firstName = "John";
const lastName = "Doe";
const fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"
                

Template Literals

Template literals provide an easier way to create strings with embedded expressions:

const name = "Alice";
const age = 30;
const message = `${name} is ${age} years old.`;
console.log(message); // "Alice is 30 years old."

// Multi-line strings
const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you!`;
console.log(poem);
                

const language = "JavaScript";
console.log(language.length);
console.log(language[0]);
console.log(language[4]);
console.log(language[language.length - 1]);

const first = "Web";
const last = "Development";
console.log(first + " " + last);

const courseName = "BloomTech";
const courseNumber = 101;
console.log(`Welcome to ${courseName} course #${courseNumber}!`);
                    

10
J
S
t
Web Development
Welcome to BloomTech course #101!
                    

Exercise 1: Console Calculator

Create a simple calculator that logs results to the console:

// Define variables for the numbers and operations
const num1 = 10;
const num2 = 5;

// Addition
console.log(`${num1} + ${num2} = ${num1 + num2}`);

// Subtraction
console.log(`${num1} - ${num2} = ${num1 - num2}`);

// Multiplication
console.log(`${num1} * ${num2} = ${num1 * num2}`);

// Division
console.log(`${num1} / ${num2} = ${num1 / num2}`);
                

Exercise 2: Temperature Converter

Convert temperatures between Celsius and Fahrenheit:

// Celsius to Fahrenheit conversion: (C × 9/5) + 32 = F
const celsiusTemp = 25;
const fahrenheitTemp = (celsiusTemp * 9/5) + 32;

console.log(`${celsiusTemp}°C is equal to ${fahrenheitTemp}°F`);

// Fahrenheit to Celsius conversion: (F - 32) × 5/9 = C
const fahrenheit = 98.6;
const celsius = (fahrenheit - 32) * 5/9;

console.log(`${fahrenheit}°F is equal to ${celsius.toFixed(2)}°C`);
                

Try It Yourself!

Open your browser console and try these exercises. Modify the values and expressions to see how the results change.

Open CodePen to Practice