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 b4661502a4b..89c51dc5b0c 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 802e0742f2d..e160d20b9b9 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 41e609a1135..2ab107eb40f 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 ed87778a7d4..17aa081711a 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 63a78ff77f7..b8f33e3373a 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 b964787ea2e..5eaf0ebc6f3 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 5f625b8526e..8bd792c636a 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 62629c0008f..a6f589fc86c 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 971e49d636c..60337c07648 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 f8c0a520787..8c8187ab234 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 e4b68683d50..185d0430489 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 db901d4fcf5..b1fe1f63055 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 790023c5431..93eb8ff3b1e 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 597fa869824..62c855d30ef 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 fca695126d3..84154576741 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 ec8daf5b3aa..c6bf9b05aa4 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 581e3159241..5b756dd7072 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 3d5f54fda00..9cdae6ce826 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 ce2930b92d8..1c53883e82d 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 9e559f9bfb0..a328f16cd0c 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 0521f32c3f3..2d80b9b1d0f 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 8ed8fa2b181..f20a097574c 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 9a66ab63d5c..556a108c396 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 20435672939..4740b213fcf 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 b6ed1354023..1b057d7855b 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 ea167cca893..def27329130 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 fece6615200..d158b112999 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 6de51cab0d8..772ca86c42f 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 369697734ca..6150a5ae7b8 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 1f4c75a3e87..1fcd20e10b6 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 f87a26ddfed..bd55695fefb 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 465d385fcb0..9b42cad7c44 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 be7164f8dfc..ae05eeab899 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 b3c2888c0d9..ad65ec5dc86 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 80b289697d6..e285a047766 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 d6c706a5edc..17f687f7cf7 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 c264db146b0..e03d664c097 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 0780a8a7402..06d85c5d800 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 ae349d2c9f6..8bb294f1db6 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 52395ebd76b..99bf0e53fbe 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 0d688cc5f2c..835e53a9aca 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 6accc1154be..602ec86c2fc 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 9c319d8a909..9d9d2533865 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 f15671768ad..3c6b7a06ee5 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 a34d16fa53b..0421a4b31ae 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 e4bf0780578..cf510b2a931 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 b4056067883..d6fd345601f 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 57b8b743751..27854fd2b39 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 e06f71c4b1f..1605eca9ecc 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 4af35bf63bf..c2845684dbc 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 38b9dba6480..f78a087fce1 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 e1da1f8ce46..404ad258b8f 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 21e48e59168..0c9034c540f 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 f1a5991771f..a06bbe5eaed 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 5250cd2507a..898b21509d1 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 468d185106c..e2c8a61527c 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 ccee43ff0f0..784e1496306 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 2ec4634ed51..64f75ddb6e9 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 c78f81536f8..29cf102fde2 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 7d00971f575..f6ad0250884 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 701a8f23af6..7b5491efdaf 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 d5ed03b690c..765801da45c 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 6cdb65ff1fe..11894b07495 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 966390257a0..a37553f92db 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 2abe8462aae..c83e0350709 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 999f09824f9..9939fbc8f7a 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 a8e396a7279..789a2e05ca3 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 553540cf18c..93d963fd146 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 fdd8f14d4da..af5c30ffb7f 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 2dbc436d2fa..183b24fd395 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 503e36be2c0..38dbc378d6c 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 a03069bc612..11418eff325 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 3851fb2f116..d94e5adab88 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 c0a45af6018..6defdde90a4 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 2ff1077769a..fade77a373f 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 674f8a8da0b..781367209c7 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 565f9246730..3ffdbae196d 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 13edda82fb0..b8d99e4864e 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 576f5da510a..6b4411a949f 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 2f89f21f1f8..4e4c491c31f 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 f0dedec5539..290e8586319 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 47164c2c9d8..7fb8ee7bad4 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 33f501d5820..d238016a9e1 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 3f28f6ccda9..88d713c6d38 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: