fix(curriculum): Convert blockquote elements to triple backtick syntax for JavaScript Algorithms and Data Structures (#35992)
* fix: convert js algorithms and data structures * fix: revert some blocks back to blockquote * fix: reverted comparison code block to blockquotes * fix: change js to json Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: convert various section to triple backticks * fix: Make the formatting consistent for comparisons
This commit is contained in:
@ -8,7 +8,15 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.
|
||||
The variables in the following example are different:
|
||||
<blockquote>function myFunction() {<br> return "You rock!";<br>}<br>let varOne = myFunction; // set to equal a function<br>let varTwo = myFunction(); // set to equal the string "You rock!"</blockquote>
|
||||
|
||||
```js
|
||||
function myFunction() {
|
||||
return "You rock!";
|
||||
}
|
||||
let varOne = myFunction; // set to equal a function
|
||||
let varTwo = myFunction(); // set to equal the string "You rock!"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
@ -9,9 +9,22 @@ challengeType: 1
|
||||
JavaScript allows the use of both single (<code>'</code>) and double (<code>"</code>) quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.
|
||||
Having two choices is great when a string has contractions or another piece of text that's in quotes. Just be careful that you don't close the string too early, which causes a syntax error.
|
||||
Here are some examples of mixing quotes:
|
||||
<blockquote>// These are correct:<br>const grouchoContraction = "I've had a perfectly wonderful evening, but this wasn't it.";<br>const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quoted.'";<br>// This is incorrect:<br>const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';</blockquote>
|
||||
|
||||
```js
|
||||
// These are correct:
|
||||
const grouchoContraction = "I've had a perfectly wonderful evening, but this wasn't it.";
|
||||
const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quoted.'";
|
||||
// This is incorrect:
|
||||
const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';
|
||||
```
|
||||
|
||||
Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\) escape character:
|
||||
<blockquote>// Correct use of same quotes:<br>const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';</blockquote>
|
||||
|
||||
```js
|
||||
// Correct use of same quotes:
|
||||
const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
@ -8,7 +8,24 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
<code>Off by one errors</code> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print <code>undefined</code>.
|
||||
When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors:
|
||||
<blockquote>let alphabet = "abcdefghijklmnopqrstuvwxyz";<br>let len = alphabet.length;<br>for (let i = 0; i <= len; i++) {<br> // loops one too many times at the end<br> console.log(alphabet[i]);<br>}<br>for (let j = 1; j < len; j++) {<br> // loops one too few times and misses the first character at index 0<br> console.log(alphabet[j]);<br>}<br>for (let k = 0; k < len; k++) {<br> // Goldilocks approves - this is just right<br> console.log(alphabet[k]);<br>}</blockquote>
|
||||
|
||||
```js
|
||||
let alphabet = "abcdefghijklmnopqrstuvwxyz";
|
||||
let len = alphabet.length;
|
||||
for (let i = 0; i <= len; i++) {
|
||||
// loops one too many times at the end
|
||||
console.log(alphabet[i]);
|
||||
}
|
||||
for (let j = 1; j < len; j++) {
|
||||
// loops one too few times and misses the first character at index 0
|
||||
console.log(alphabet[j]);
|
||||
}
|
||||
for (let k = 0; k < len; k++) {
|
||||
// Goldilocks approves - this is just right
|
||||
console.log(alphabet[k]);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
@ -10,7 +10,17 @@ Branching programs, i.e. ones that do different things if certain conditions are
|
||||
This logic is spoken (in English, at least) as "if x equals y, then ..." which can literally translate into code using the <code>=</code>, or assignment operator. This leads to unexpected control flow in your program.
|
||||
As covered in previous challenges, the assignment operator (<code>=</code>) in JavaScript assigns a value to a variable name. And the <code>==</code> and <code>===</code> operators check for equality (the triple <code>===</code> tests for strict equality, meaning both value and type are the same).
|
||||
The code below assigns <code>x</code> to be 2, which evaluates as <code>true</code>. Almost every value on its own in JavaScript evaluates to <code>true</code>, except what are known as the "falsy" values: <code>false</code>, <code>0</code>, <code>""</code> (an empty string), <code>NaN</code>, <code>undefined</code>, and <code>null</code>.
|
||||
<blockquote>let x = 1;<br>let y = 2;<br>if (x = y) {<br> // this code block will run for any value of y (unless y were originally set as a falsy)<br>} else {<br> // this code block is what should run (but won't) in this example<br>}</blockquote>
|
||||
|
||||
```js
|
||||
let x = 1;
|
||||
let y = 2;
|
||||
if (x = y) {
|
||||
// this code block will run for any value of y (unless y were originally set as a falsy)
|
||||
} else {
|
||||
// this code block is what should run (but won't) in this example
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
@ -8,7 +8,15 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
The final topic is the dreaded infinite loop. Loops are great tools when you need your program to run a code block a certain number of times or until a condition is met, but they need a terminal condition that ends the looping. Infinite loops are likely to freeze or crash the browser, and cause general program execution mayhem, which no one wants.
|
||||
There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the <code>while</code> loop inside <code>loopy()</code>. Do NOT call this function!
|
||||
<blockquote>function loopy() {<br> while(true) {<br> console.log("Hello, world!");<br> }<br>}</blockquote>
|
||||
|
||||
```js
|
||||
function loopy() {
|
||||
while(true) {
|
||||
console.log("Hello, world!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it.
|
||||
</section>
|
||||
|
||||
|
@ -8,7 +8,14 @@ challengeType: 1
|
||||
<section id='description'>
|
||||
You can use <code>typeof</code> to check the data structure, or type, of a variable. This is useful in debugging when working with multiple data types. If you think you're adding two numbers, but one is actually a string, the results can be unexpected. Type errors can lurk in calculations or function calls. Be careful especially when you're accessing and working with external data in the form of a JavaScript Object Notation (JSON) object.
|
||||
Here are some examples using <code>typeof</code>:
|
||||
<blockquote>console.log(typeof ""); // outputs "string"<br>console.log(typeof 0); // outputs "number"<br>console.log(typeof []); // outputs "object"<br>console.log(typeof {}); // outputs "object"</blockquote>
|
||||
|
||||
```js
|
||||
console.log(typeof ""); // outputs "string"
|
||||
console.log(typeof 0); // outputs "number"
|
||||
console.log(typeof []); // outputs "object"
|
||||
console.log(typeof {}); // outputs "object"
|
||||
```
|
||||
|
||||
JavaScript recognizes six primitive (immutable) data types: <code>Boolean</code>, <code>Null</code>, <code>Undefined</code>, <code>Number</code>, <code>String</code>, and <code>Symbol</code> (new with ES6) and one type for mutable items: <code>Object</code>. Note that in JavaScript, arrays are technically a type of object.
|
||||
</section>
|
||||
|
||||
|
Reference in New Issue
Block a user