freeCodeCamp/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md

77 lines
3.1 KiB
Markdown
Raw Normal View History

---
id: 587d7b83367417b2b2512b37
title: Understanding the Differences between the freeCodeCamp and Browser Console
challengeType: 1
forumTopicId: 301193
---
## Description
<section id='description'>
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
You may have noticed that some freeCodeCamp JavaScript challenges include their own console. This console behaves a little differently than the browser console you used in the last challenge.
The following challenge is meant to highlight the main difference between the freeCodeCamp console and your browser console.
When you run ordinary JavaScript, the browsers console will display your <code>console.log()</code> statements the exact number of times you requested.
The freeCodeCamp console will print your <code>console.log()</code> statements for each test of that challenge, as well as one more time for any function calls that you have in your code.
This lends itself to some interesting behavior and might trip you up in the beginning, because a logged value that you expect to see only once may print out many more times.
If you would like to see only your single output and not have to worry about running through the test cycles, you can use <code>console.clear()</code> and check the browsers console.
</section>
## Instructions
<section id='instructions'>
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
First, use <code>console.clear()</code> to clear the browser console. After that, use <code>console.log</code> to log the <code>output</code> variable.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: You should use <code>console.clear()</code> to clear the browser console.
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
testString: const removeJSComments = code.replace(/\/\*[\s\S]*?\*\/|\/\/.*$/gm, ''); const noSpaces = removeJSComments.replace(/\s/g, ''); assert(noSpaces.match(/console.clear\(\)/));
- text: You should use <code>console.log()</code> to print the <code>output</code> variable.
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
testString: const noSpaces = code.replace(/\s/g, ''); assert(noSpaces.match(/console\.log\(output\)/));
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='js-seed'>
```js
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
// Open your browser console.
let output = "Get this to log once in the browser console and twice in the freeCodeCamp console";
// Use console.clear() on the next line to clear the browser console.
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
// Use console.log() to print the output variable.
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
// Check the two consoles to see the difference. The freeCodeCamp console should have printed the variable twice, once for each test of this challenge. The browser console should only print the variable once because you cleared it first.
```
</div>
</section>
## Solution
<section id='solution'>
```js
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
// Open your browser console.
let output = "Get this to log once in the browser console and twice in the freeCodeCamp console";
// Use console.clear() on the next line to clear the browser console.
console.clear();
fix(curriculum): update debugging challenge (fcc vs browser console) (#36703) * fix: debugging-challege+difference-in-consoles * fix: grammar * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * Update curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.english.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix/remove-comments-for-first-test
2019-08-30 17:31:57 -05:00
// Use console.log() to print the output variable.
console.log(output);
// Check the two consoles to see the difference. The freeCodeCamp console should have printed the variable twice, one for each test of this challenge. The browser console should only print the variable once because you cleared it first.
```
</section>