DEV Community

Arif Iqbal
Arif Iqbal

Posted on

Week 2 of 100DaysOfCode JavaScript Challenge

Day 7: Nov 29, 2021. Monday

  • Build JavaScript Objects
  • Accessing Object Properties: dot notation (.) and bracket notation ([])
  • Add new properties to JavaScript objects
  • Delete Properties from a JavaScript Object using the delete keyword
  • Using objects for lookup. Convert a switch case statement to a lookup object.
  • Testing objects for properties using the .hasOwnProperty("PROPERTY_NAME") method
  • JavaScript Object Notation (JSON)
  • Accessing Nested Objects and Nested Arrays
  • Tweet

Day 8: Nov 30, 2021. Tuesday

  • Iterate with JavaScript While Loops
  • Iterate with JavaScript For Loops
  • Iterate Odd Numbers With a For Loop
  • Count Backwards With a For Loop
  • Iterate Through an Array with a For Loop
  • Nesting For Loops
  • Iterate with JavaScript Do...While Loops
  • Replace Loops using Recursion
  • Tweet

Day 9: Dec 1, 2021. Wednesday

  • Generate Random Fractions with JavaScript: JavaScript's function Math.random() can return a random number between 0 (inclusive) and 1 (exclusive). Random numbers are useful for creating random behavior.
  • Generate Random Whole Numbers with JavaScript: Math.random() will never give you a number greater than or equal to 1. So, how would you generate random whole numbers? See below
Math.floor(Math.random() * 15);
Enter fullscreen mode Exit fullscreen mode

The above code will generate a random whole number between 0 (inclusive) and 15 (exclusive). Here 15 is exclusive because Math.random() never returns 1.

  • Generate Random Whole Numbers within a Range: generate a random whole number between 0 and max - min and add min to it.
  • Use the parseInt Function: The parseInt() function takes a string and converts it to a number. If the first character of the string can't be converted to a number, then it returns NaN. Example
  • Use the parseInt Function with a Radix: The parseInt(Str, Radix) function can accept a second argument that represent the Raxix or the base of the provided number. Example
  • Use the Conditional (Ternary) Operator: The Conditional or Ternary operator is a short-hand form of the If Else Block. Example
  • Use Multiple Conditional (Ternary) Operators: Like we can chain If Else statements, in the same fashion, we can extend the Ternary operator for multiple conditions. Example
  • Use Recursion to Create a Countdown: Keywords: Base Case, Recursive Case, and Callstack
  • Use Recursion to Create a Range of Numbers
  • Tweet

Day 10: Dec 02, 2021. Thursday

ES5 (2009) => ES6 (2015)

  • Arrow functions, Promises, Modules, and Classes

  • Compare Scopes of the var and let Keywords: var scope is global, or local if declared within a function. The let keyword has some more features.

  • Mutate an Array Declared with const: The keyword const means you can't reassign a value to the variable declared with the const. However, the content of the variable is still mutable. Example (array)

  • Prevent Object Mutation: Object.freeze strict mode. const just stops reassignment. If you want your object to be immutable, pass it to the function Object.freeze()

  • Use Arrow Functions to Write Concise Anonymous Functions: Simplicity, omit the function keyword, omit return keyword, omit brackets.

  • Write Arrow Functions with Parameters: Simplicity at its peek, omit the parenthesis if only one parameter.

  • Set Default Parameters for Your Functions:

  • Use the Rest Parameter with Function Parameters

  • Tweet

Day 11: Dec 03, 2021. Friday

  • Use the Rest Parameter with Function Parameters:

Rest parameter enables us to pass a variable number of parameters to a functions. the parameters are stored in an array, which later can be used in the function.

We can use the map(), filter(), reduce() methods on the args.

The rest parameter (...) eliminates the need for checking the args first.

  • Use the Spread Operator to Evaluate Arrays In-Place:

The spread operator ...arr works only in-place, meaning in function parameter or in array literal. It unpacks an array elements into a comma separated list

  • Use Destructuring Assignment to Extract Values from Objects:

You can consider it as the JavaScript's equivalent of the PHP's extract(SOME_ASSOC_ARRAY) function. const {key1, key2} = SOME_OBJECT;

  • Use Destructuring Assignment to Assign Variables from Objects:

const {key1: newName, key2: newName2} = SOME_OBJECT;

  • Use Destructuring Assignment to Assign Variables from Nested Objects
  • Tweet

Day 12: Dec 04, 2021. Saturday

  • Use Destructuring Assignment to Assign Variables from Arrays:

The difference between the spread operator and array restructuring is that the spread operator unpacks array elements into a comma separated list. So you can't pick an element from that list and assign to a variable. Array destructing does exactly that.

const [a, b] = [1, 2, 3, 4, 5];

will assign 1 to a, and 2 to b;

const [a, b, , , c] = [1, 2, 3, 4, 5];

will assign 1 to a, 2 to b, and 5 to c. Note that we used commas to skip some elements and reach the desired index.

  • Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements

const [a, b, ...arr] = [1, 2, 3, 4, 5]

console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5]

  • Use Destructuring Assignment to Pass an Object as a Function's Parameters
const half = ({min, max}) => (min + max) / 2;
Enter fullscreen mode Exit fullscreen mode
  • Create Strings using Template Literals:
const person = {
name: "Arif",
age: 35
}
console.log(`Hello, my name is ${person.name}!
and I am ${person.age} years old`);
Enter fullscreen mode Exit fullscreen mode
  • Write Concise Object Literal Declarations Using Object Property Shorthand
  • Tweet

const mousePosition = (x, y) => ({x, y})

Thank you for following along with me. Any suggestions/advice for improvement will be appreciated.

~ Happy Coding

Discussion (0)