Repository files navigation

In this lab, we're going to work with strings. Strings in JavaScript are wrapped in single or double quotes, or in back ticks.

1. Manipulate strings in JavaScript
2. Practice interpolating with template literals

Imagine we're planning a birthday party for Bill Nye. There are going to be a lot of people there, so we're going to use JavaScript to help us keep everything straight.

First, we need to practice greeting everyone. (I don't know about you, but I sometimes get nervous and say the dumbest things — but we don't want to embarrass ourselves in front of Bill Nye!)

One might think that we could just type

Hello,everybody!

in our browser's console and be done with it. Give it a try. (If you're on a Mac, that would beCommand +Option +J together.)

You should see something like

Uncaught ReferenceError: Hello is not defined(…)

Well, that won't work. (This is why we practice!) In order to greet our guests, we need to tell JavaScript that we're using astring. A string is a collection of characters (letters, numbers, and symbols) wrapped in single or double quotes (or, as we'll see, in back ticks). So to greet everyone, we can write,

'Hello, everybody!'

or

"Hello, everybody!"

Single or double quotation marks can contain a string variable..

What if we want to say hi to a special guest, like Neil deGrasse Tyson? When we wrap strings in single or double quotes, we can join them together using the+ operator:

varspecialGuest="Neil deGrasse Tyson""Hello, "+specialGuest+"!"// "Hello, Neil deGrasse Tyson!"

This is calledconcatenation. Notice that the value of thespecialGuest variable isalso a string!

TOP TIP: Your console might be getting a little full at this point. If at any point you'd like to clear it out and start fresh, you can either click the button in the top left corner of the console — in Chrome, it looks like this:

Alternatively, you can pressctrl + L orcommand + K. As long as you don't refresh the page, anything you've declared will stick around for you to reference — you'll just get a nice blank slate on which to code.

When we wrap strings in back ticks, we can use placeholders (${}) and insert variables or evaluated JavaScript directly:

varspecialGuest="Neil deGrasse Tyson";`Hello,${specialGuest}! High${3+2}!`// "Hello, Neil deGrasse Tyson! High 5!"

This is calledinterpolation.

You'll find a file calledindex.js in this directory. Your mission, should you choose to accept it, is to get its tests (intests/index-test.js) to pass.

You can run the tests using thelearn command in your terminal or the Learn IDE. Give that a go now.

All three tests have failed! This is okay, and it's expected — you haven't written any code yet, after all.

Inindex.js, you'll see five lines of code:

vargreeting="";varspecialGuest="Neil deGrasse Tyson"vargreetSpecialGuest=""+specialGuest+"!";vartopic="space";varconversation=`${topic}`;

Each line has a test associated with it. When the tests fail, they show us what theexpected value is — your job is to make that expectation a reality by modifying the code provided.

When you first runlearn, you should see something like this:

Let's walk through that first error together. First, we see the test title:

1) strings defines`greeting`:

The title tells us what the test expects our code to do. In this case,"strings" refers to the general problem space in which we're working —we're handling strings.

Continuing on with the test output, we can now make better sense of the next few lines:

AssertionError:'!' =='Hello, everybody!'+ expected - actual-!+Hello, everybody!

This is a lot to take in, so we'll go through it slowly.

What couldAssertionError mean? Well, it probably means that our testasserted (or expected) that something would be true, and that thing wasn't true.

What is that thing? The test expected the empty string,'', to be equal to the string'Hello, everybody!' — but, of course, these strings are not equal.

+ expected - actual is a key for reading the statements below it.+ expected tells us that the expected output shows up in that yellowish green;- actual tells us what actually happened.

But reading on, we only see+Hello, everybody! — what's going on? Why isn't there any- actual output? Well, therewas no actual output — it's just an empty string! That must be the problem!

Next, the title tells us thatindex.js "definesgreeting." Let's look inindex.js — sure enough, we see, at the top of the file,var greeting = "";. Seems like a reasonable place to start.

What if, instead of assigning"" togreeting, we assign"Hello, everybody!", like the test expects. Go ahead and change that line inindex.js so it reads

vargreeting="Hello, everybody!";

save the file, and rerun your tests. You should see

Nice! You got the first test to pass.

Now use the skills that you learned above to read through the rest of the test output and fix those errors, too! Always remember to save your file before re-running your tests.

NOTE: Because we're dealing with some low-level language features, you might spot some easy ways to "cheat" on this lab, or this lab might seem frustratingly easy. We've given you some starter code to point you in the right direction — try to solve the lab as intended! You can then compare your solution with ours (found in thesolution branch of this repository).

When your tests are passing, submit your answer by typing inlearn submit in the command line or else create a pull request (uselearn submit if "pull request" sounds a bit terrifying).

Good luck!

ViewJavaScript Strings Lab on Learn.co and start learning to code for free.