diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.english.md index b4661502a4..89c51dc5b0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.english.md @@ -11,7 +11,13 @@ We can access the data inside arrays using indexes. Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use zero-based indexing, so the first element in an array is element 0.
Example -
var array = [50,60,70];
array[0]; // equals 50
var data = array[1]; // equals 60
+ +```js +var array = [50,60,70]; +array[0]; // equals 50 +var data = array[1]; // equals 60 +``` + Note
There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.english.md index 802e0742f2..e160d20b9b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.english.md @@ -9,7 +9,19 @@ videoUrl: 'https://scrimba.com/c/ckND4Cq'
One way to think of a multi-dimensional array, is as an array of arrays. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside. Example -
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11
+ +```js +var arr = [ + [1,2,3], + [4,5,6], + [7,8,9], + [[10,11,12], 13, 14] +]; +arr[3]; // equals [[10,11,12], 13, 14] +arr[3][0]; // equals [10,11,12] +arr[3][0][1]; // equals 11 +``` + Note
There shouldn't be any spaces between the array name and the square brackets, like array [0][0] and even this array [0] [0] is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.english.md index 41e609a113..2ab107eb40 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.english.md @@ -9,7 +9,30 @@ videoUrl: 'https://scrimba.com/c/cLeGDtZ'
As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays. Here is an example of how to access a nested array: -
var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"
+ +```js +var ourPets = [ + { + animalType: "cat", + names: [ + "Meowzer", + "Fluffy", + "Kit-Cat" + ] + }, + { + animalType: "dog", + names: [ + "Spot", + "Bowser", + "Frankie" + ] + } +]; +ourPets[0].names[1]; // "Fluffy" +ourPets[1].names[0]; // "Spot" +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.english.md index ed87778a7d..17aa081711 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.english.md @@ -9,7 +9,24 @@ videoUrl: 'https://scrimba.com/c/cRnRnfa'
The sub-properties of objects can be accessed by chaining together the dot or bracket notation. Here is a nested object: -
var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": {
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
};
ourStorage.cabinet["top drawer"].folder2; // "secrets"
ourStorage.desk.drawer; // "stapler"
+ +```js +var ourStorage = { + "desk": { + "drawer": "stapler" + }, + "cabinet": { + "top drawer": { + "folder1": "a file", + "folder2": "secrets" + }, + "bottom drawer": "soda" + } +}; +ourStorage.cabinet["top drawer"].folder2; // "secrets" +ourStorage.desk.drawer; // "stapler" +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.english.md index 63a78ff77f..b8f33e3373 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.english.md @@ -10,7 +10,18 @@ videoUrl: 'https://scrimba.com/c/cBvmEHP' The second way to access the properties of an object is bracket notation ([]). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation. However, you can still use bracket notation on object properties without spaces. Here is a sample of using bracket notation to read an object's property: -
var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock",
  "NoSpace": "USS Enterprise"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock
myObj["NoSpace"]; // USS Enterprise
+ +```js +var myObj = { + "Space Name": "Kirk", + "More Space": "Spock", + "NoSpace": "USS Enterprise" +}; +myObj["Space Name"]; // Kirk +myObj['More Space']; // Spock +myObj["NoSpace"]; // USS Enterprise +``` + Note that property names with spaces in them must be in quotes (single or double). diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.english.md index b964787ea2..5eaf0ebc6f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.english.md @@ -10,7 +10,16 @@ videoUrl: 'https://scrimba.com/c/cGryJs8' There are two ways to access the properties of an object: dot notation (.) and bracket notation ([]), similar to an array. Dot notation is what you use when you know the name of the property you're trying to access ahead of time. Here is a sample of using dot notation (.) to read an object's property: -
var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2
+ +```js +var myObj = { + prop1: "val1", + prop2: "val2" +}; +var prop1val = myObj.prop1; // val1 +var prop2val = myObj.prop2; // val2 +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.english.md index 5f625b8526..8bd792c636 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.english.md @@ -9,11 +9,30 @@ videoUrl: 'https://scrimba.com/c/cnQyKur'
Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table. Here is an example of using a variable to access a property: -
var dogs = {
  Fido: "Mutt", - Hunter: "Doberman", - Snoopie: "Beagle"
};
var myDog = "Hunter";
var myBreed = dogs[myDog];
console.log(myBreed); // "Doberman"
+ +```js +var dogs = { + Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle" +}; +var myDog = "Hunter"; +var myBreed = dogs[myDog]; +console.log(myBreed); // "Doberman" +``` + Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows: -
var someObj = {
  propName: "John"
};
function propPrefix(str) {
  var s = "prop";
  return s + str;
}
var someProp = propPrefix("Name"); // someProp now holds the value 'propName'
console.log(someObj[someProp]); // "John"
+ +```js +var someObj = { + propName: "John" +}; +function propPrefix(str) { + var s = "prop"; + return s + str; +} +var someProp = propPrefix("Name"); // someProp now holds the value 'propName' +console.log(someObj[someProp]); // "John" +``` + Note that we do not use quotes around the variable name when using it to access the property because we are using the value of the variable, not the name.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.english.md index 62629c0008..a6f589fc86 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.english.md @@ -11,7 +11,11 @@ videoUrl: 'https://scrimba.com/c/cM2KBAG' Now let's try to add two numbers using JavaScript. JavaScript uses the + symbol as an addition operator when placed between two numbers. Example: -
myVar = 5 + 10; // assigned 15
+ +```js +myVar = 5 + 10; // assigned 15 +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.english.md index 971e49d636..60337c0764 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.english.md @@ -9,7 +9,22 @@ videoUrl: 'https://scrimba.com/c/c3JvVfg'
In a switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found. Think of it like the final else statement in an if/else chain. A default statement should be the last case. -
switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
    break;
}
+ +```js +switch (num) { + case value1: + statement1; + break; + case value2: + statement2; + break; +... + default: + defaultStatement; + break; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.english.md index f8c0a52078..8c8187ab23 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.english.md @@ -11,9 +11,26 @@ You may have heard the term object before. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. Objects are useful for storing data in a structured way, and can represent real world objects, like a cat. Here's a sample cat object: -
var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};
+ +```js +var cat = { + "name": "Whiskers", + "legs": 4, + "tails": 1, + "enemies": ["Water", "Dogs"] +}; +``` + In this example, all the properties are stored as strings, such as - "name", "legs", and "tails". However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows: -
var anotherObject = {
  make: "Ford",
  5: "five",
  "model": "focus"
};
+ +```js +var anotherObject = { + make: "Ford", + 5: "five", + "model": "focus" +}; +``` + However, if your object has any non-string properties, JavaScript will automatically typecast them as strings. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.english.md index e4b68683d5..185d043048 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.english.md @@ -8,7 +8,20 @@ videoUrl: 'https://scrimba.com/c/caeJgsw' ## Description
if/else statements can be chained together for complex logic. Here is pseudocode of multiple chained if / else if statements: -
if (condition1) {
  statement1
} else if (condition2) {
  statement2
} else if (condition3) {
  statement3
. . .
} else {
  statementN
}
+ +```js +if (condition1) { + statement1 +} else if (condition2) { + statement2 +} else if (condition3) { + statement3 +. . . +} else { + statementN +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.english.md index db901d4fcf..b1fe1f6305 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.english.md @@ -10,9 +10,18 @@ videoUrl: 'https://scrimba.com/c/c7ynnTp' Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does. There are two ways to write comments in JavaScript: Using // will tell JavaScript to ignore the remainder of the text on the current line: -
// This is an in-line comment.
+ +```js +// This is an in-line comment. +``` + You can make a multi-line comment beginning with /* and ending with */: -
/* This is a
multi-line comment */
+ +```js +/* This is a +multi-line comment */ +``` + Best Practice
As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others and for your future self. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.english.md index 790023c543..93eb8ff3b1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.english.md @@ -9,10 +9,26 @@ videoUrl: 'https://scrimba.com/c/cKyVMAL'
There are many Comparison Operators in JavaScript. All of these operators return a boolean true or false value. The most basic operator is the equality operator ==. The equality operator compares two values and returns true if they're equivalent or false if they are not. Note that equality is different from assignment (=), which assigns the value at the right of the operator to a variable in the left. -
function equalityTest(myVal) {
  if (myVal == 10) {
     return "Equal";
  }
  return "Not Equal";
}
+ +```js +function equalityTest(myVal) { + if (myVal == 10) { + return "Equal"; + } + return "Not Equal"; +} +``` + If myVal is equal to 10, the equality operator returns true, so the code in the curly braces will execute, and the function will return "Equal". Otherwise, the function will return "Not Equal". In order for JavaScript to compare two different data types (for example, numbers and strings), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows: -
1 == 1 // true
1 == 2 // false
1 == '1' // true
"3" == 3 // true
+ +```js +1 == 1 // true +1 == 2 // false +1 == '1' // true +"3" == 3 // true +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.english.md index 597fa86982..62c855d30e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.english.md @@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/c/cp6GbH4' The greater than operator (>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns true. Otherwise, it returns false. Like the equality operator, greater than operator will convert data types of values while comparing. Examples -
5 > 3 // true
7 > '3' // true
2 > 3 // false
'1' > 9 // false
+ +```js +5 > 3 // true +7 > '3' // true +2 > 3 // false +'1' > 9 // false +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.english.md index fca695126d..8415457674 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.english.md @@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/c/c6KBqtV' The greater than or equal to operator (>=) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns true. Otherwise, it returns false. Like the equality operator, greater than or equal to operator will convert data types while comparing. Examples -
6 >= 6 // true
7 >= '3' // true
2 >= 3 // false
'7' >= 9 // false
+ +```js +6 >= 6 // true +7 >= '3' // true +2 >= 3 // false +'7' >= 9 // false +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.english.md index ec8daf5b3a..c6bf9b05aa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.english.md @@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cdBm9Sr'
The inequality operator (!=) is the opposite of the equality operator. It means "Not Equal" and returns false where equality would return true and vice versa. Like the equality operator, the inequality operator will convert data types of values while comparing. Examples -
1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false
+ +```js +1 != 2 // true +1 != "1" // false +1 != '1' // false +1 != true // false +0 != false // false +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.english.md index 581e315924..5b756dd707 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.english.md @@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cNVRWtB'
The less than operator (<) compares the values of two numbers. If the number to the left is less than the number to the right, it returns true. Otherwise, it returns false. Like the equality operator, less than operator converts data types while comparing. Examples -
2 < 5 // true
'3' < 7 // true
5 < 5 // false
3 < 2 // false
'8' < 4 // false
+ +```js +2 < 5 // true +'3' < 7 // true +5 < 5 // false +3 < 2 // false +'8' < 4 // false +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.english.md index 3d5f54fda0..9cdae6ce82 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.english.md @@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cNVR7Am'
The less than or equal to operator (<=) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns true. If the number on the left is greater than the number on the right, it returns false. Like the equality operator, less than or equal to converts data types. Examples -
4 <= 5 // true
'7' <= 7 // true
5 <= 5 // true
3 <= 2 // false
'8' <= 4 // false
+ +```js +4 <= 5 // true +'7' <= 7 // true +5 <= 5 // true +3 <= 2 // false +'8' <= 4 // false +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.english.md index ce2930b92d..1c53883e82 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.english.md @@ -10,7 +10,12 @@ videoUrl: 'https://scrimba.com/c/cy87atr' Strict equality (===) is the counterpart to the equality operator (==). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion. If the values being compared have different types, they are considered unequal, and the strict equality operator will return false. Examples -
3 === 3 // true
3 === '3' // false
+ +```js +3 === 3 // true +3 === '3' // false +``` + In the second example, 3 is a Number type and '3' is a String type. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.english.md index 9e559f9bfb..a328f16cd0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.english.md @@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cKekkUy'
The strict inequality operator (!==) is the logical opposite of the strict equality operator. It means "Strictly Not Equal" and returns false where strict equality would return true and vice versa. Strict inequality will not convert data types. Examples -
3 !== 3 // false
3 !== '3' // true
4 !== 3 // true
+ +```js +3 !== 3 // false +3 !== '3' // true +4 !== 3 // true +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.english.md index 0521f32c3f..2d80b9b1d0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.english.md @@ -9,9 +9,25 @@ videoUrl: 'https://scrimba.com/c/cvbRVtr'
Sometimes you will need to test more than one thing at a time. The logical and operator (&&) returns true if and only if the operands to the left and right of it are true. The same effect could be achieved by nesting an if statement inside another if: -
if (num > 5) {
  if (num < 10) {
    return "Yes";
  }
}
return "No";
+ +```js +if (num > 5) { + if (num < 10) { + return "Yes"; + } +} +return "No"; +``` + will only return "Yes" if num is greater than 5 and less than 10. The same logic can be written as: -
if (num > 5 && num < 10) {
  return "Yes";
}
return "No";
+ +```js +if (num > 5 && num < 10) { + return "Yes"; +} +return "No"; +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.english.md index 8ed8fa2b18..f20a097574 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.english.md @@ -10,9 +10,26 @@ videoUrl: 'https://scrimba.com/c/cEPrGTN' The logical or operator (||) returns true if either of the operands is true. Otherwise, it returns false. The logical or operator is composed of two pipe symbols (|). This can typically be found between your Backspace and Enter keys. The pattern below should look familiar from prior waypoints: -
if (num > 10) {
  return "No";
}
if (num < 5) {
  return "No";
}
return "Yes";
+ +```js +if (num > 10) { + return "No"; +} +if (num < 5) { + return "No"; +} +return "Yes"; +``` + will return "Yes" only if num is between 5 and 10 (5 and 10 included). The same logic can be written as: -
if (num > 10 || num < 5) {
  return "No";
}
return "Yes";
+ +```js +if (num > 10 || num < 5) { + return "No"; +} +return "Yes"; +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.english.md index 9a66ab63d5..556a108c39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.english.md @@ -11,7 +11,13 @@ In programming, it is common to use assignments to modify the contents of a vari myVar = myVar + 5; to add 5 to myVar. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step. One such operator is the += operator. -
var myVar = 1;
myVar += 5;
console.log(myVar); // Returns 6
+ +```js +var myVar = 1; +myVar += 5; +console.log(myVar); // Returns 6 +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.english.md index 2043567293..4740b213fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.english.md @@ -9,7 +9,11 @@ videoUrl: 'https://scrimba.com/c/cNpM8AN'
In JavaScript, when the + operator is used with a String value, it is called the concatenation operator. You can build a new string out of other strings by concatenating them together. Example -
'My name is Alan,' + ' I concatenate.'
+ +```js +'My name is Alan,' + ' I concatenate.' +``` + Note
Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.english.md index b6ed135402..1b057d7855 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.english.md @@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/c/c2R6BHa' A for loop can also count backwards, so long as we can define the right conditions. In order to count backwards by twos, we'll need to change our initialization, condition, and final-expression. We'll start at i = 10 and loop while i > 0. We'll decrement i by 2 each loop with i -= 2. -
var ourArray = [];
for (var i=10; i > 0; i-=2) {
  ourArray.push(i);
}
+ +```js +var ourArray = []; +for (var i=10; i > 0; i-=2) { + ourArray.push(i); +} +``` + ourArray will now contain [10,8,6,4,2]. Let's change our initialization and final-expression so we can count backward by twos by odd numbers. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.english.md index ea167cca89..def2732913 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.english.md @@ -12,7 +12,11 @@ For example, computers distinguish between numbers, such as the number 12< Variables allow computers to store and manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself. Any of the seven data types may be stored in a variable. Variables are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer variables differ from mathematical variables in that they can store different values at different times. We tell JavaScript to create or declare a variable by putting the keyword var in front of it, like so: -
var ourName;
+ +```js +var ourName; +``` + creates a variable called ourName. In JavaScript we end statements with semicolons. Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or start with a number. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.english.md index fece661520..d158b11299 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.english.md @@ -11,7 +11,11 @@ We can also divide one number by another. JavaScript uses the / symbol for division. Example -
myVar = 16 / 2; // assigned 8
+ +```js +myVar = 16 / 2; // assigned 8 +``` + diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.english.md index 6de51cab0d..772ca86c42 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.english.md @@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/c2QwKH2'
It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable. In this example: -
var someVar = "Hat";
function myFun() {
  var someVar = "Head";
  return someVar;
}
+ +```js +var someVar = "Hat"; +function myFun() { + var someVar = "Head"; + return someVar; +} +``` + The function myFun will return "Head" because the local version of the variable is present.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.english.md index 369697734c..6150a5ae7b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.english.md @@ -8,7 +8,17 @@ videoUrl: 'https://scrimba.com/c/caeJ2hm' ## Description
If you have multiple conditions that need to be addressed, you can chain if statements together with else if statements. -
if (num > 15) {
  return "Bigger than 15";
} else if (num < 5) {
  return "Smaller than 5";
} else {
  return "Between 5 and 15";
}
+ +```js +if (num > 15) { + return "Bigger than 15"; +} else if (num < 5) { + return "Smaller than 5"; +} else { + return "Between 5 and 15"; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.english.md index 1f4c75a3e8..1fcd20e10b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.english.md @@ -8,7 +8,15 @@ videoUrl: 'https://scrimba.com/c/cek4Efq' ## Description
When a condition for an if statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an else statement, an alternate block of code can be executed. -
if (num > 10) {
  return "Bigger than 10";
} else {
  return "10 or Less";
}
+ +```js +if (num > 10) { + return "Bigger than 10"; +} else { + return "10 or Less"; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.english.md index f87a26ddfe..bd55695fef 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.english.md @@ -9,7 +9,14 @@ videoUrl: 'https://scrimba.com/c/cm8n7T9'
For loops don't have to iterate one at a time. By changing our final-expression, we can count by even numbers. We'll start at i = 0 and loop while i < 10. We'll increment i by 2 each loop with i += 2. -
var ourArray = [];
for (var i = 0; i < 10; i += 2) {
  ourArray.push(i);
}
+ +```js +var ourArray = []; +for (var i = 0; i < 10; i += 2) { + ourArray.push(i); +} +``` + ourArray will now contain [0,2,4,6,8]. Let's change our initialization so we can count by odd numbers.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.english.md index 465d385fcb..9b42cad7c4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.english.md @@ -8,7 +8,14 @@ videoUrl: 'https://scrimba.com/c/caeR3HB' ## Description
A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a for loop. This code will output each element of the array arr to the console: -
var arr = [10,9,8,7,6];
for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
+ +```js +var arr = [10,9,8,7,6]; +for (var i = 0; i < arr.length; i++) { + console.log(arr[i]); +} +``` + Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our condition for this loop is i < arr.length, which stops when i is at length - 1.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.english.md index be7164f8df..ae05eeab89 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.english.md @@ -8,13 +8,40 @@ videoUrl: 'https://scrimba.com/c/cDqWGcp' ## Description
The next type of loop you will learn is called a do...while loop. It is called a do...while loop because it will first do one pass of the code inside the loop no matter what, and then continue to run the loop while the specified condition evaluates to true. -
var ourArray = [];
var i = 0;
do {
  ourArray.push(i);
  i++;
} while (i < 5);
+ +```js +var ourArray = []; +var i = 0; +do { + ourArray.push(i); + i++; +} while (i < 5); +``` + The example above behaves similar to other types of loops, and the resulting array will look like [0, 1, 2, 3, 4]. However, what makes the do...while different from other loops is how it behaves when the condition fails on the first check. Let's see this in action: Here is a regular while loop that will run the code in the loop as long as i < 5: -
var ourArray = [];
var i = 5;
while (i < 5) {
  ourArray.push(i);
  i++;
}
+ +```js +var ourArray = []; +var i = 5; +while (i < 5) { + ourArray.push(i); + i++; +} +``` + In this example, we initialize the value of myArray to an empty array and the value of i to 5. When we execute the while loop, the condition evaluates to false because i is not less than 5, so we do not execute the code inside the loop. The result is that ourArray will end up with no values added to it, and it will still look like [] when all of the code in the example above has completed running. Now, take a look at a do...while loop: -
var ourArray = [];
var i = 5;
do {
  ourArray.push(i);
  i++;
} while (i < 5);
+ +```js +var ourArray = []; +var i = 5; +do { + ourArray.push(i); + i++; +} while (i < 5); +``` + In this case, we initialize the value of i to 5, just like we did with the while loop. When we get to the next line, there is no condition to evaluate, so we go to the code inside the curly braces and execute it. We will add a single element to the array and then increment i before we get to the condition check. When we finally evaluate the condition i < 5 on the last line, we see that i is now 6, which fails the conditional check, so we exit the loop and are done. At the end of the above example, the value of ourArray is [5]. Essentially, a do...while loop ensures that the code inside the loop will run at least once. Let's try getting a do...while loop to work by pushing values to an array. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.english.md index b3c2888c0d..ad65ec5dc8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.english.md @@ -15,7 +15,14 @@ The initialization statement is executed one time only before the l The condition statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to true. When condition is false at the start of the iteration, the loop will stop executing. This means if condition starts as false, your loop will never execute. The final-expression is executed at the end of each loop iteration, prior to the next condition check and is usually used to increment or decrement your loop counter. In the following example we initialize with i = 0 and iterate while our condition i < 5 is true. We'll increment i by 1 in each loop iteration with i++ as our final-expression. -
var ourArray = [];
for (var i = 0; i < 5; i++) {
  ourArray.push(i);
}
+ +```js +var ourArray = []; +for (var i = 0; i < 5; i++) { + ourArray.push(i); +} +``` + ourArray will now contain [0,1,2,3,4].
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.english.md index 80b289697d..e285a04776 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.english.md @@ -9,7 +9,16 @@ videoUrl: 'https://scrimba.com/c/c8QbnCM'
You can run the same code multiple times by using a loop. The first type of loop we will learn is called a while loop because it runs "while" a specified condition is true and stops once that condition is no longer true. -
var ourArray = [];
var i = 0;
while(i < 5) {
  ourArray.push(i);
  i++;
}
+ +```js +var ourArray = []; +var i = 0; +while(i < 5) { + ourArray.push(i); + i++; +} +``` + Let's try getting a while loop to work by pushing values to an array.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.english.md index d6c706a5ed..17f687f7cf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.english.md @@ -9,7 +9,16 @@ videoUrl: 'https://scrimba.com/c/cd62NhM'
Variables which are declared within a function, as well as the function parameters have local scope. That means, they are only visible within that function. Here is a function myTest with a local variable called loc. -
function myTest() {
  var loc = "foo";
  console.log(loc);
}
myTest(); // logs "foo"
console.log(loc); // loc is not defined
+ +```js +function myTest() { + var loc = "foo"; + console.log(loc); +} +myTest(); // logs "foo" +console.log(loc); // loc is not defined +``` + loc is not defined outside of the function.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.english.md index c264db146b..e03d664c09 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.english.md @@ -11,11 +11,40 @@ Order is important in if, else if statements. The function is executed from top to bottom so you will want to be careful of what statement comes first. Take these two functions as an example. Here's the first: -
function foo(x) {
  if (x < 1) {
    return "Less than one";
  } else if (x < 2) {
    return "Less than two";
  } else {
    return "Greater than or equal to two";
  }
}
+ +```js +function foo(x) { + if (x < 1) { + return "Less than one"; + } else if (x < 2) { + return "Less than two"; + } else { + return "Greater than or equal to two"; + } +} +``` + And the second just switches the order of the statements: -
function bar(x) {
  if (x < 2) {
    return "Less than two";
  } else if (x < 1) {
    return "Less than one";
  } else {
    return "Greater than or equal to two";
  }
}
+ +```js +function bar(x) { + if (x < 2) { + return "Less than two"; + } else if (x < 1) { + return "Less than one"; + } else { + return "Greater than or equal to two"; + } +} +``` + While these two functions look nearly identical if we pass a number to both we get different outputs. -
foo(0) // "Less than one"
bar(0) // "Less than two"
+ +```js +foo(0) // "Less than one" +bar(0) // "Less than two" +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.english.md index 0780a8a740..06d85c5d80 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.english.md @@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/c/cRbVZAB' Another way to change the data in an array is with the .pop() function. .pop() is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable. In other words, .pop() removes the last element from an array and returns that element. Any type of entry can be "popped" off of an array - numbers, strings, even nested arrays. -
var threeArr = [1, 4, 6];
var oneDown = threeArr.pop();
console.log(oneDown); // Returns 6
console.log(threeArr); // Returns [1, 4]
+ +```js +var threeArr = [1, 4, 6]; +var oneDown = threeArr.pop(); +console.log(oneDown); // Returns 6 +console.log(threeArr); // Returns [1, 4] +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.english.md index ae349d2c9f..8bb294f1db 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.english.md @@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cnqmVtJ'
An easy way to append data to the end of an array is via the push() function. .push() takes one or more parameters and "pushes" them onto the end of the array. -
var arr = [1,2,3];
arr.push(4);
// arr is now [1,2,3,4]
+ +```js +var arr = [1,2,3]; +arr.push(4); +// arr is now [1,2,3,4] +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.english.md index 52395ebd76..99bf0e53fb 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.english.md @@ -9,11 +9,41 @@ videoUrl: 'https://scrimba.com/c/c9yNMfR'
Sometimes you may want to store data in a flexible Data Structure. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of strings, numbers, booleans, arrays, functions, and objects. Here's an example of a complex data structure: -
var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [
      "CD",
      "Cassette",
      "LP"
    ],
    "gold": true
  }
];
+ +```js +var ourMusic = [ + { + "artist": "Daft Punk", + "title": "Homework", + "release_year": 1997, + "formats": [ + "CD", + "Cassette", + "LP" + ], + "gold": true + } +]; +``` + This is an array which contains one object inside. The object has various pieces of metadata about an album. It also has a nested "formats" array. If you want to add more album records, you can do this by adding records to the top level array. Objects hold data in a property, which has a key-value format. In the example above, "artist": "Daft Punk" is a property that has a key of "artist" and a value of "Daft Punk". JavaScript Object Notation or JSON is a related data interchange format used to store data. -
{
  "artist": "Daft Punk",
  "title": "Homework",
  "release_year": 1997,
  "formats": [
    "CD",
    "Cassette",
    "LP"
  ],
  "gold": true
}
+ +```json +{ + "artist": "Daft Punk", + "title": "Homework", + "release_year": 1997, + "formats": [ + "CD", + "Cassette", + "LP" + ], + "gold": true +} +``` + Note
You will need to place a comma after every object in the array, unless it is the last object in the array.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.english.md index 0d688cc5f2..835e53a9ac 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.english.md @@ -9,7 +9,12 @@ videoUrl: 'https://scrimba.com/c/czQM4A8'
Unlike strings, the entries of arrays are mutable and can be changed freely. Example -
var ourArray = [50,40,30];
ourArray[0] = 15; // equals [15,40,30]
+ +```js +var ourArray = [50,40,30]; +ourArray[0] = 15; // equals [15,40,30] +``` + Note
There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.english.md index 6accc1154b..602ec86c2f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.english.md @@ -8,7 +8,19 @@ videoUrl: 'https://scrimba.com/c/cdBKWCV' ## Description
If the break statement is omitted from a switch statement's case, the following case statement(s) are executed until a break is encountered. If you have multiple inputs with the same output, you can represent them in a switch statement like this: -
switch(val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}
+ +```js +switch(val) { + case 1: + case 2: + case 3: + result = "1, 2, or 3"; + break; + case 4: + result = "4 alone"; +} +``` + Cases for 1, 2, and 3 will all produce the same result.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.english.md index 9c319d8a90..9d9d253386 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.english.md @@ -11,7 +11,11 @@ We can also multiply one number by another. JavaScript uses the * symbol for multiplication of two numbers. Example -
myVar = 13 * 13; // assigned 169
+ +```js +myVar = 13 * 13; // assigned 169 +``` + diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.english.md index f15671768a..3c6b7a06ee 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.english.md @@ -8,7 +8,18 @@ videoUrl: 'https://scrimba.com/c/cRn6GHM' ## Description
If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example: -
var arr = [
  [1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
  for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}
+ +```js +var arr = [ + [1,2], [3,4], [5,6] +]; +for (var i=0; i < arr.length; i++) { + for (var j=0; j < arr[i].length; j++) { + console.log(arr[i][j]); + } +} +``` + This outputs each sub-element in arr one at a time. Note that for the inner loop, we are checking the .length of arr[i], since arr[i] is itself an array.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.english.md index a34d16fa53..0421a4b31a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.english.md @@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cy8rahW'
Parameters are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or "passed") into a function when it is called are known as arguments. Here is a function with two parameters, param1 and param2: -
function testFun(param1, param2) {
  console.log(param1, param2);
}
+ +```js +function testFun(param1, param2) { + console.log(param1, param2); +} +``` + Then we can call testFun: testFun("Hello", "World"); We have passed two arguments, "Hello" and "World". Inside the function, param1 will equal "Hello" and param2 will equal "World". Note that you could call testFun again with different arguments and the parameters would take on the value of the new arguments. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.english.md index e4bf078057..cf510b2a93 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.english.md @@ -10,9 +10,19 @@ videoUrl: 'https://scrimba.com/c/cm8PqCa' In the last two challenges, we learned about the equality operator (==) and the strict equality operator (===). Let's do a quick review and practice using these operators some more. If the values being compared are not of the same type, the equality operator will perform a type conversion, and then evaluate the values. However, the strict equality operator will compare both the data type and value as-is, without converting one type to the other. Examples -
3 == '3' // returns true because JavaScript performs type conversion from string to number
3 === '3' // returns false because the types are different and type conversion is not performed
+ +```js +3 == '3' // returns true because JavaScript performs type conversion from string to number +3 === '3' // returns false because the types are different and type conversion is not performed +``` + Note
In JavaScript, you can determine the type of a variable or a value with the typeof operator, as follows: -
typeof 3 // returns 'number'
typeof '3' // returns 'string'
+ +```js +typeof 3 // returns 'number' +typeof '3' // returns 'string' +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.english.md index b405606788..d6fd345601 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.english.md @@ -8,11 +8,25 @@ videoUrl: 'https://scrimba.com/c/cbQmnhM' ## Description
String values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quote. Unlike some other programming languages, single and double quotes work the same in JavaScript. -
doubleQuoteStr = "This is a string";
singleQuoteStr = 'This is also a string';
+ +```js +doubleQuoteStr = "This is a string"; +singleQuoteStr = 'This is also a string'; +``` + The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an <a> tag with various attributes in quotes, all within a string. -
conversation = 'Finn exclaims to Jake, "Algebraic!"';
+ +```js +conversation = 'Finn exclaims to Jake, "Algebraic!"'; +``` + However, this becomes a problem if you need to use the outermost quotes within it. Remember, a string has the same kind of quote at the beginning and end. But if you have that same quote somewhere in the middle, the string will stop early and throw an error. -
goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"';
badStr = 'Finn responds, "Let's go!"'; // Throws an error
+ +```js +goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; +badStr = 'Finn responds, "Let's go!"'; // Throws an error +``` + In the goodStr above, you can use both quotes safely by using the backslash \ as an escape character. Note
The backslash \ should not be confused with the forward slash /. They do not do the same thing.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.english.md index 57b8b74375..27854fd2b3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.english.md @@ -8,9 +8,32 @@ videoUrl: 'https://scrimba.com/c/c3JE8fy' ## Description
If you have many options to choose from, a switch statement can be easier to write than many chained if/else if statements. The following: -
if (val === 1) {
  answer = "a";
} else if (val === 2) {
  answer = "b";
} else {
  answer = "c";
}
+ +```js +if (val === 1) { + answer = "a"; +} else if (val === 2) { + answer = "b"; +} else { + answer = "c"; +} +``` + can be replaced with: -
switch(val) {
  case 1:
    answer = "a";
    break;
  case 2:
    answer = "b";
    break;
  default:
    answer = "c";
}
+ +```js +switch(val) { + case 1: + answer = "a"; + break; + case 2: + answer = "b"; + break; + default: + answer = "c"; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.english.md index e06f71c4b1..1605eca9ec 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.english.md @@ -9,7 +9,14 @@ videoUrl: 'https://scrimba.com/c/cy87wue'
We can pass values into a function with arguments. You can use a return statement to send a value back out of a function. Example -
function plusThree(num) {
  return num + 3;
}
var answer = plusThree(5); // 8
+ +```js +function plusThree(num) { + return num + 3; +} +var answer = plusThree(5); // 8 +``` + plusThree takes an argument for num and returns a value equal to num + 3.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.english.md index 4af35bf63b..c2845684db 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.english.md @@ -9,7 +9,16 @@ videoUrl: 'https://scrimba.com/c/cQe39Sq'
When a return statement is reached, the execution of the current function stops and control returns to the calling location. Example -
function myFun() {
  console.log("Hello");
  return "World";
  console.log("byebye")
}
myFun();
+ +```js +function myFun() { + console.log("Hello"); + return "World"; + console.log("byebye") +} +myFun(); +``` + The above outputs "Hello" to the console, returns "World", but "byebye" is never output, because the function exits at the return statement.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.english.md index 38b9dba648..f78a087fce 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.english.md @@ -9,9 +9,25 @@ videoUrl: 'https://scrimba.com/c/cp62qAQ'
You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value. Sometimes people use an if/else statement to do a comparison, like this: -
function isEqual(a,b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}
+ +```js +function isEqual(a,b) { + if (a === b) { + return true; + } else { + return false; + } +} +``` + But there's a better way to do this. Since === returns true or false, we can return the result of the comparison: -
function isEqual(a,b) {
  return a === b;
}
+ +```js +function isEqual(a,b) { + return a === b; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.english.md index e1da1f8ce4..404ad258b8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.english.md @@ -9,7 +9,22 @@ videoUrl: 'https://scrimba.com/c/c4mv4fm'
If you have many options to choose from, use a switch statement. A switch statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched case value until a break is encountered. Here is a pseudocode example: -
switch(num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  case valueN:
    statementN;
    break;
}
+ +```js +switch(num) { + case value1: + statement1; + break; + case value2: + statement2; + break; +... + case valueN: + statementN; + break; +} +``` + case values are tested with strict equality (===). The break tells JavaScript to stop executing statements. If the break is omitted, the next statement will be executed.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.english.md index 21e48e5916..0c9034c540 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.english.md @@ -11,7 +11,12 @@ In JavaScript, you can store a value in a variable with the assignmentmyVariable = 5; This assigns the Number value 5 to myVariable. Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator. -
myVar = 5;
myNum = myVar;
+ +```js +myVar = 5; +myNum = myVar; +``` + This assigns 5 to myVar and then resolves myVar to 5 again and assigns it to myNum. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.english.md index f1a5991771..a06bbe5eae 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.english.md @@ -11,7 +11,11 @@ We can also subtract one number from another. JavaScript uses the - symbol for subtraction. Example -
myVar = 12 - 6; // assigned 6
+ +```js +myVar = 12 - 6; // assigned 6 +``` + diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.english.md index 5250cd2507..898b21509d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.english.md @@ -9,7 +9,16 @@ videoUrl: 'https://scrimba.com/c/cm8Q7Ua'
Sometimes it is useful to check if the property of a given object exists or not. We can use the .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not. Example -
var myObj = {
  top: "hat",
  bottom: "pants"
};
myObj.hasOwnProperty("top"); // true
myObj.hasOwnProperty("middle"); // false
+ +```js +var myObj = { + top: "hat", + bottom: "pants" +}; +myObj.hasOwnProperty("top"); // true +myObj.hasOwnProperty("middle"); // false +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.english.md index 468d185106..e2c8a61527 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.english.md @@ -9,9 +9,19 @@ videoUrl: 'https://scrimba.com/c/cWPVaUR'
In JavaScript, String values are immutable, which means that they cannot be altered once created. For example, the following code: -
var myStr = "Bob";
myStr[0] = "J";
+ +```js +var myStr = "Bob"; +myStr[0] = "J"; +``` + cannot change the value of myStr to "Job", because the contents of myStr cannot be altered. Note that this does not mean that myStr cannot be changed, just that the individual characters of a string literal cannot be changed. The only way to change myStr would be to assign it with a new string, like this: -
var myStr = "Bob";
myStr = "Job";
+ +```js +var myStr = "Bob"; +myStr = "Job"; +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.english.md index ccee43ff0f..784e149630 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.english.md @@ -12,7 +12,13 @@ In JavaScript all variables and function names are case sensitive. This means th

Best Practice

Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized. Examples: -
var someVariable;
var anotherVariableName;
var thisVariableNameIsSoLong;
+ +```js +var someVariable; +var anotherVariableName; +var thisVariableNameIsSoLong; +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.english.md index 2ec4634ed5..64f75ddb6e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.english.md @@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/ce2p7cL'
A function can include the return statement but it does not have to. In the case that the function doesn't have a return statement, when you call it, the function processes the inner code but the returned value is undefined. Example -
var sum = 0;
function addSum(num) {
  sum = sum + num;
}
var returnedValue = addSum(3); // sum will be modified but returned value is undefined
+ +```js +var sum = 0; +function addSum(num) { + sum = sum + num; +} +var returnedValue = addSum(3); // sum will be modified but returned value is undefined +``` + addSum is a function without a return statement. The function will change the global sum variable but the returned value of the function is undefined.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.english.md index c78f81536f..29cf102fde 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.english.md @@ -9,7 +9,16 @@ videoUrl: 'https://scrimba.com/c/c9yEJT4'
After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update. For example, let's look at ourDog: -
var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};
+ +```js +var ourDog = { + "name": "Camper", + "legs": 4, + "tails": 1, + "friends": ["everything!"] +}; +``` + Since he's a particularly happy dog, let's change his name to "Happy Camper". Here's how we update his object's name property: ourDog.name = "Happy Camper"; or ourDog["name"] = "Happy Camper"; diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.english.md index 7d00971f57..f6ad025088 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.english.md @@ -12,7 +12,18 @@ When the condition evaluates to true, the program executes the stat Pseudocode
if (condition is true) {
  statement is executed
}
Example -
function test (myCondition) {
  if (myCondition) {
     return "It was true";
  }
  return "It was false";
}
test(true); // returns "It was true"
test(false); // returns "It was false"
+ +```js +function test (myCondition) { + if (myCondition) { + return "It was true"; + } + return "It was false"; +} +test(true); // returns "It was true" +test(false); // returns "It was false" +``` + When test is called with a value of true, the if statement evaluates myCondition to see if it is true or not. Since it is true, the function returns "It was true". When we call test with a value of false, myCondition is not true and the statement in the curly braces is not executed and the function returns "It was false".
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.english.md index 701a8f23af..7b5491efda 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.english.md @@ -9,9 +9,29 @@ videoUrl: 'https://scrimba.com/c/cyWJBT4'
In the previous challenge, you used a single conditional operator. You can also chain them together to check for multiple conditions. The following function uses if, else if, and else statements to check multiple conditions: -
function findGreaterOrEqual(a, b) {
  if (a === b) {
    return "a and b are equal";
  }
  else if (a > b) {
    return "a is greater";
  }
  else {
    return "b is greater";
  }
}
+ +```js +function findGreaterOrEqual(a, b) { + if (a === b) { + return "a and b are equal"; + } + else if (a > b) { + return "a is greater"; + } + else { + return "b is greater"; + } +} +``` + The above function can be re-written using multiple conditional operators: -
function findGreaterOrEqual(a, b) {
  return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";
}
+ +```js +function findGreaterOrEqual(a, b) { + return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater"; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.english.md index d5ed03b690..765801da45 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.english.md @@ -11,9 +11,26 @@ The conditional operator, also called the ternary operator The syntax is: condition ? statement-if-true : statement-if-false; The following function uses an if-else statement to check a condition: -
function findGreater(a, b) {
  if(a > b) {
    return "a is greater";
  }
  else {
    return "b is greater";
  }
}
+ +```js +function findGreater(a, b) { + if(a > b) { + return "a is greater"; + } + else { + return "b is greater"; + } +} +``` + This can be re-written using the conditional operator: -
function findGreater(a, b) {
  return a > b ? "a is greater" : "b is greater";
}
+ +```js +function findGreater(a, b) { + return a > b ? "a is greater" : "b is greater"; +} +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.english.md index 6cdb65ff1f..11894b0749 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.english.md @@ -9,7 +9,25 @@ videoUrl: 'https://scrimba.com/c/cdBk8sM'
Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to "lookup" values rather than a switch statement or an if/else chain. This is most useful when you know that your input data is limited to a certain range. Here is an example of a simple reverse alphabet lookup: -
var alpha = {
  1:"Z",
  2:"Y",
  3:"X",
  4:"W",
  ...
  24:"C",
  25:"B",
  26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"

var value = 2;
alpha[value]; // "Y"
+ +```js +var alpha = { + 1:"Z", + 2:"Y", + 3:"X", + 4:"W", + ... + 24:"C", + 25:"B", + 26:"A" +}; +alpha[2]; // "Y" +alpha[24]; // "C" + +var value = 2; +alpha[value]; // "Y" +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.english.md index 966390257a..a37553f92d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.english.md @@ -10,7 +10,11 @@ videoUrl: 'https://scrimba.com/c/cP3vVsm' We will now use our knowledge of strings to build a "Mad Libs" style word game we're calling "Word Blanks". You will create an (optionally humorous) "Fill in the Blanks" style sentence. In a "Mad Libs" game, you are provided sentences with some missing words, like nouns, verbs, adjectives and adverbs. You then fill in the missing pieces with words of your choice in a way that the completed sentence makes sense. Consider this sentence - "It was really ____, and we ____ ourselves ____". This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows: -
var sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
+ +```js +var sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + "."; +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.english.md index 2abe8462aa..c83e035070 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.english.md @@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cL6dqfy'
In JavaScript, we can divide up our code into reusable parts called functions. Here's an example of a function: -
function functionName() {
  console.log("Hello World");
}
+ +```js +function functionName() { + console.log("Hello World"); +} +``` + You can call or invoke this function by using its name followed by parentheses, like this: functionName(); Each time the function is called it will print out the message "Hello World" on the dev console. All of the code between the curly braces will be executed every time the function is called. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.english.md index 999f09824f..9939fbc8f7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.english.md @@ -8,7 +8,15 @@ challengeType: 1
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: -
function myFunction() {
  return "You rock!";
}
let varOne = myFunction; // set to equal a function
let varTwo = myFunction(); // set to equal the string "You rock!"
+ +```js +function myFunction() { + return "You rock!"; +} +let varOne = myFunction; // set to equal a function +let varTwo = myFunction(); // set to equal the string "You rock!" +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.english.md index a8e396a727..789a2e05ca 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.english.md @@ -9,9 +9,22 @@ challengeType: 1 JavaScript allows the use of both single (') and double (") 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: -
// 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.';
+ +```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: -
// Correct use of same quotes:
const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';
+ +```js +// Correct use of same quotes: +const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.'; +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.english.md index 553540cf18..93d963fd14 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.english.md @@ -8,7 +8,24 @@ challengeType: 1
Off by one errors (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 undefined. 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: -
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]);
}
+ +```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]); +} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.english.md index fdd8f14d4d..af5c30ffb7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.english.md @@ -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 =, or assignment operator. This leads to unexpected control flow in your program. As covered in previous challenges, the assignment operator (=) in JavaScript assigns a value to a variable name. And the == and === operators check for equality (the triple === tests for strict equality, meaning both value and type are the same). The code below assigns x to be 2, which evaluates as true. Almost every value on its own in JavaScript evaluates to true, except what are known as the "falsy" values: false, 0, "" (an empty string), NaN, undefined, and null. -
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
}
+ +```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 +} +``` + ## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.english.md index 2dbc436d2f..183b24fd39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.english.md @@ -8,7 +8,15 @@ challengeType: 1
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 while loop inside loopy(). Do NOT call this function! -
function loopy() {
  while(true) {
    console.log("Hello, world!");
  }
}
+ +```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.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.english.md index 503e36be2c..38dbc378d6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.english.md @@ -8,7 +8,14 @@ challengeType: 1
You can use typeof 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 typeof: -
console.log(typeof ""); // outputs "string"
console.log(typeof 0); // outputs "number"
console.log(typeof []); // outputs "object"
console.log(typeof {}); // outputs "object"
+ +```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: Boolean, Null, Undefined, Number, String, and Symbol (new with ES6) and one type for mutable items: Object. Note that in JavaScript, arrays are technically a type of object.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.english.md index a03069bc61..11418eff32 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.english.md @@ -9,13 +9,65 @@ challengeType: 1 When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function. The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. For example: -
var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
+ +```js +var numArray = []; +for (var i = 0; i < 3; i++) { + numArray.push(i); +} +console.log(numArray); +// returns [0, 1, 2] +console.log(i); +// returns 3 +``` + With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following: -
var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3
+ +```js +var numArray = []; +var i; +for (i = 0; i < 3; i++) { + numArray.push(i); +} +console.log(numArray); +// returns [0, 1, 2] +console.log(i); +// returns 3 +``` + This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable. -
var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3
+ +```js +var printNumTwo; +for (var i = 0; i < 3; i++) { + if (i === 2) { + printNumTwo = function() { + return i; + }; + } +} +console.log(printNumTwo()); +// returns 3 +``` + As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior: -
'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"
+ +```js +'use strict'; +let printNumTwo; +for (let i = 0; i < 3; i++) { + if (i === 2) { + printNumTwo = function() { + return i; + }; + } +} +console.log(printNumTwo()); +// returns 2 +console.log(i); +// returns "i is not defined" +``` + i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md index 3851fb2f11..d94e5adab8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.english.md @@ -9,7 +9,13 @@ challengeType: 1 In the export lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files. There is another export syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module. Here is a quick example of export default: -
export default function add(x,y) {
  return x + y;
}
+ +```js +export default function add(x,y) { + return x + y; +} +``` + Note: Since export default is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default with var, let, or const diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.english.md index c0a45af601..6defdde90a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.english.md @@ -9,7 +9,23 @@ challengeType: 1 A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier. Template literals allow you to create multi-line strings and to use string interpolation features to create strings. Consider the code below: -
const person = {
  name: "Zodiac Hasbro",
  age: 56
};

// Template literal with multi-line and string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); // prints
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.
+ +```js +const person = { + name: "Zodiac Hasbro", + age: 56 +}; + +// Template literal with multi-line and string interpolation +const greeting = `Hello, my name is ${person.name}! +I am ${person.age} years old.`; + +console.log(greeting); // prints +// Hello, my name is Zodiac Hasbro! +// I am 56 years old. + +``` + A lot of things happened there. Firstly, the example uses backticks (`), not quotes (' or "), to wrap the string. Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.english.md index 2ff1077769..fade77a373 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.english.md @@ -8,7 +8,13 @@ challengeType: 1
The keyword let is not the only new way to declare variables. In ES6, you can also declare variables using the const keyword. const has all the awesome features that let has, with the added bonus that variables declared using const are read-only. They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned. -
"use strict";
const FAV_PET = "Cats";
FAV_PET = "Dogs"; // returns error
+ +```js +"use strict"; +const FAV_PET = "Cats"; +FAV_PET = "Dogs"; // returns error +``` + As you can see, trying to reassign a variable declared with const will throw an error. You should always name variables you don't want to reassign using the const keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore. Note: It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays). In a later challenge you will see an example of a lowercase variable identifier being used for an array. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.english.md index 674f8a8da0..781367209c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.english.md @@ -7,17 +7,34 @@ challengeType: 1 ## Description
One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. -
var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'
+ +```js +var camper = 'James'; +var camper = 'David'; +console.log(camper); +// logs 'David' +``` + As you can see in the code above, the camper variable is originally declared as James and then overridden to be David. In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.
A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. -
let camper = 'James';
let camper = 'David'; // throws an error
+ +```js +let camper = 'James'; +let camper = 'David'; // throws an error +``` + This error can be seen in the console of your browser. So unlike var, when using let, a variable with the same name can only be declared once. Note the "use strict". This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. For instance: -
"use strict";
x = 3.14; // throws an error because x is not declared
+ +```js +"use strict"; +x = 3.14; // throws an error because x is not declared +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md index 565f924673..3ffdbae196 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.english.md @@ -8,7 +8,12 @@ challengeType: 1
In the last challenge, you learned about export default and its uses. It is important to note that, to import a default export, you need to use a different import syntax. In the following example, we have a function, add, that is the default export of a file, "math_functions". Here is how to import it: -
import add from "math_functions";
add(5,4); // Will return 9
+ +```js +import add from "math_functions"; +add(5,4); // Will return 9 +``` + The syntax differs in one key place - the imported value, add, is not surrounded by curly braces, {}. Unlike exported values, the primary method of importing a default export is to simply write the value's name after import.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.english.md index 13edda82fb..b8d99e4864 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.english.md @@ -9,7 +9,15 @@ challengeType: 1 The const declaration has many use cases in modern JavaScript. Some developers prefer to assign all their variables using const by default, unless they know they will need to reassign the value. Only in that case, they use let. However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier. -
"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]
+ +```js +"use strict"; +const s = [5, 6, 7]; +s = [1, 2, 3]; // throws error, trying to assign a const +s[2] = 45; // works just as it would with an array declared with var or let +console.log(s); // returns [5, 6, 45] +``` + As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.english.md index 576f5da510..6b4411a949 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.english.md @@ -8,7 +8,19 @@ challengeType: 1
As seen in the previous challenge, const declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation. Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. -
let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // will be ignored. Mutation not allowed
obj.newProp = "Test"; // will be ignored. Mutation not allowed
console.log(obj);
// { name: "FreeCodeCamp", review:"Awesome"}
+ +```js +let obj = { + name:"FreeCodeCamp", + review:"Awesome" +}; +Object.freeze(obj); +obj.review = "bad"; // will be ignored. Mutation not allowed +obj.newProp = "Test"; // will be ignored. Mutation not allowed +console.log(obj); +// { name: "FreeCodeCamp", review:"Awesome"} +``` +
## Instructions diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.english.md index 2f89f21f1f..4e4c491c31 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.english.md @@ -8,7 +8,15 @@ challengeType: 1
In order to help us create more flexible functions, ES6 introduces default parameters for functions. Check out this code: -
function greeting(name = "Anonymous") {
  return "Hello " + name;
}
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous
+ +```js +function greeting(name = "Anonymous") { + return "Hello " + name; +} +console.log(greeting("John")); // Hello John +console.log(greeting()); // Hello Anonymous +``` + The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter name will receive its default value "Anonymous" when you do not provide a value for the parameter. You can add default values for as many parameters as you want.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md index f0dedec553..290e858631 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require.english.md @@ -9,9 +9,18 @@ challengeType: 1 In the past, the function require() would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources. ES6 gives us a very handy tool known as import. With it, we can choose which parts of a module or file to load into a given file, saving time and memory. Consider the following example. Imagine that math_array_functions has about 20 functions, but I only need one, countItems, in my current file. The old require() approach would force me to bring in all 20 functions. With this new import syntax, I can bring in just the desired function, like so: -
import { countItems } from "math_array_functions"
+ +```js +import { countItems } from "math_array_functions" +``` + A description of the above code: -
import { function } from "file_path_goes_here"
// We can also import variables the same way!
+ +```js +import { function } from "file_path_goes_here" +// We can also import variables the same way! +``` + There are a few ways to write an import statement, but the above is a very common use-case. Note
The whitespace surrounding the function inside the curly braces is a best practice - it makes it easier to read the import statement. Note
The lessons in this section handle non-browser features. import, and the statements we introduce in the rest of these lessons, won't work on a browser directly. However, we can use various tools to create code out of this to make it work in browser. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md index 47164c2c9d..7fb8ee7bad 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.english.md @@ -8,9 +8,20 @@ challengeType: 1
Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax. Here's an example where the contents of a file named "math_functions" are imported into a file in the same directory: -
import * as myMathModule from "math_functions";
myMathModule.add(2,3);
myMathModule.subtract(5,3);
+ +```js +import * as myMathModule from "math_functions"; +myMathModule.add(2,3); +myMathModule.subtract(5,3); +``` + And breaking down that code: -
import * as object_with_name_of_your_choice from "file_path_goes_here"
object_with_name_of_your_choice.imported_function
+ +```js +import * as object_with_name_of_your_choice from "file_path_goes_here" +object_with_name_of_your_choice.imported_function +``` + You may use any name following the import * as portion of the statement. In order to utilize this method, it requires an object that receives the imported values (i.e., you must provide a name). From here, you will use the dot notation to call your imported values.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.english.md index 33f501d582..d238016a9e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.english.md @@ -8,11 +8,29 @@ challengeType: 1
In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else. To achieve this, we often use the following syntax: -
const myFunc = function() {
  const myVar = "value";
  return myVar;
}
+ +```js +const myFunc = function() { + const myVar = "value"; + return myVar; +} +``` + ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax: -
const myFunc = () => {
  const myVar = "value";
  return myVar;
}
+ +```js +const myFunc = () => { + const myVar = "value"; + return myVar; +} +``` + When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements: -
const myFunc = () => "value"
+ +```js +const myFunc = () => "value" +``` + This code will still return value by default.
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.english.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.english.md index 3f28f6ccda..88d713c6d3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.english.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.english.md @@ -9,9 +9,25 @@ challengeType: 1 ES6 provides a new syntax to help create objects, using the keyword class. This is to be noted, that the class syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc. In ES5, we usually define a constructor function, and use the new keyword to instantiate an object. -
var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');
+ +```js +var SpaceShuttle = function(targetPlanet){ + this.targetPlanet = targetPlanet; +} +var zeus = new SpaceShuttle('Jupiter'); +``` + The class syntax simply replaces the constructor function creation: -
class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');
+ +```js +class SpaceShuttle { + constructor(targetPlanet) { + this.targetPlanet = targetPlanet; + } +} +const zeus = new SpaceShuttle('Jupiter'); +``` + Notice that the class keyword declares a new function, and a constructor was added, which would be invoked when new is called - to create a new object.
Notes: