9. JavaScript: Data Types

Welcome to your first JavaScript lesson: 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

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

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

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

Reassigning Variables and Interpolation

Re-assigning Variables

// The line below declares the variable house and assigns it to "Air Nomads"
var nation = "Air Nomads";
console.log(nation);
//=> "Air Nomads"


// The line below re-assigns the variable house to "Fire Nation"
nation = "Fire Nation";
console.log(nation);
//=> "Fire Nation"

Interpolation

var nation = "Air Nomads";
var nationDescription = "peaceful and spiritual";
var 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.

  var first = "Karlie";
  var last = "Kloss";

Numbers

var attempts = 0;
var 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

var element = "Water";
cabbagesDestroyed = 3;

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

3 + 5
//=> 8

12 / 2
//=> 6

18 - 8
//=> 10

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

var kyoshiWarriors = 42;
var villagesToDefend = 12;
var 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!"

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

var 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 10. JavaScript: Data Types One-Pager!