9. JavaScript: Data Types

Data Types

Strings

'Hello, World!'

"Hi, coding scholar!"

"✨ 🎩 💖 "

console.log()

console.log('Hello, World!');

console.log

In JavaScript, console.log() is a built-in function that lets you print messages to the console (a tool that developers use to see what their code is doing).

It’s like saying, “Hey JavaScript, show me this so I can check it!”

Why use it?

• To see the value of a variable

• To check if your code is running

• To debug (figure out what’s going wrong)

So if you're ever wondering what your code is doing, console.log() is your best friend!

👉

The image to the right will show you how to toggle your console in CodeSandbox if you aren’t seeing the output.

 

Variables

• Use const when the value won't change. It's short for "constant." This should be your default choice. If you're not sure, start with const!

• Use let when the value will change later in your program, like a score that goes up or a location that updates.

let nation = "Air Nomads";
const nationDescription = "peaceful and spiritual";
const ally = "Aang";

let nation = "Air Nomads";
const nationDescription = "peaceful and spiritual";
const ally = "Aang";

console.log(nation);
//=> "Air Nomads"

Reassigning Variables and Interpolation

Re-assigning Variables

// Declare the nation variable and assign it to "Air Nomads"
let nation = "Air Nomads";
console.log(nation);
//=> "Air Nomads"


// Re-assign the nation variable to "Fire Nation"
nation = "Fire Nation";
console.log(nation);
//=> "Fire Nation"

Interpolation

let nation = "Air Nomads";
const nationDescription = "peaceful and spiritual";
const ally = "Aang";

console.log(`Welcome to the ${nationDescription} ${nation}! Once you master this training path, you’ll work alongside powerful allies like ${ally}.`);
//=> Welcome to the peaceful and spiritual Air Nomads! Once you master this training path, you’ll work alongside powerful allies like Aang.

  const first = "Karlie";
  const last = "Kloss";

Numbers

let attempts = 0;
let cabbagesDestroyed = 0; // A running joke in the series!

console.log(attempts);
//=> 0

// The line below re-assigns points to its previous value (0) plus 1.
attempts = attempts + 1;
console.log(attempts);
//=> 1

// The line below re-assigns points to its previous value (1) plus 1.
// It is a shortcut that does the exact thing as the example above!
attempts += 1;
console.log(attempts);
//=> 2

const element = "Water";
cabbagesDestroyed = 3;

console.log(`Great work! You mastered the ${element} Whip technique after ${attempts} attempts, but you accidentally destroyed ${cabbagesDestroyed} cabbage carts.`);

• Modulo returns the remainder after dividing. So 10 % 3 gives you 1 because 3 goes into 10 three times with 1 left over.

• Exponentiation raises a number to a power. 2 ** 3 is the same as 2³, or 2 × 2 × 2.

(3 + 2) * 8
//=> 40

const kyoshiWarriors = 42;
const villagesToDefend = 12;
const avgSquadSize = kyoshiWarriors / villagesToDefend;

console.log(avgSquadSize);
//=> 3.5

console.log(`The Kyoshi Warriors are brave, but they can't be everywhere at once. We have ${kyoshiWarriors} warriors available to protect ${villagesToDefend} different Earth Kingdom villages. That means we can deploy an average squad size of ${avgSquadSize} warriors per village!`);
//=> "The Kyoshi Warriors are brave, but they can't be everywhere at once. We have 42 warriors available to protect 12 different Earth Kingdom villages. That means we can deploy an average squad size of 3.5 warriors per village!"

  const a = 12;
  const b = 65;
  const c = 31;
  const d = 98;

const characterProfile = `
================================
| NAME: ${characterName}
| ROLE: ${characterRole}
| ------------------------------
| Stat 1: ${stat1}
| Stat 2: ${stat2}
| TOTAL POWER SCORE: ${totalPower}
| ------------------------------
| Signature Move: "${specialMove}"
================================
`;

console.log(characterProfile);

For a summary of this lesson, check out the 9. JavaScript: Data Types One-Pager!