Week 3 of 100DaysOfCode JavaScript Challenge

Day 13: Dec 06, 2021. Monday

Module: ES6

Write Concise Object Literal Declarations Using Object Property Shorthand:

ES6 adds support for defining object literals more easily. If you have to write same key:value pair like name:name, you can just write name once and it will be interpreted as name:name. For example

let person = {
    name: name;
    age: age;
}

is identical to

let person = {name, age}

Write Concise Declarative Functions with ES6:

In ES5 you require to use the keyword function when declaring functions inside objects, in ES6 not mandatory.

ES5 Syntax

const person = {
    name: "Arif",
    sayHello: function() {
        return "Hello, my name is " + this.name; 
    }
}

ES6 Syntax

const person = {
        name: "Arif",
        sayHello() {
        return `Hello, my name is ${this.name}`; 
    }
}

Use class Syntax to Define a Constructor Function:

ES5 Syntax

const Vegetable = function(name) {
    this.name = name;
}

const carrot = new Vegetable("carrot");

ES6 Syntax

const Vegetable = class Vegetable {
    constructor(name) {
      this.name = name;
    }
}

const carrot = new Vegetable("carrot");

Use getters and setters to Control Access to an Object:

Syntax

class Book {
    constructor(author) {
      this._author = author;
    }

    get writer() {
      return this._author;
    }

    set writer(updatedAuthor) {
      this._author = updatedAuthor;
    }
}

const novel = new Book('anonymous');
console.log(novel.writer);
novel.writer = 'newAuthor';
console.log(novel.writer);

Create a Module Script:

Some time ago, the role of JavaScript in web was not very prominent. Today, it is huge. ES5 introduced modules, files you can import and export.

<script type="module" src="path/filename.js"></script>

Use export to Share a Code Block:

export const add = (a,b) => {
    return a+b;
}

or multiple functions

export {add, subtract}

Reuse JavaScript Code Using import:

import {add, subtract} from './some_functions.js';

Day 14: Dec 08, 2021. Wednesday

Module: ES6

Use * to Import Everything from a File:

import * as myMathModule from './math_functions.js'

myMathModule.add(5, 4);
myMathModule.sub(13, 8);

Create an Export Fallback with export default:

export default function add(x, y) {
return (x + y);
}

Import a Default Export:

import subtract from './math_functions.js' notice we didn't surround the subtrackt curly baraces.

Create a JavaScript Promise:

A promise in JavaScript is exactly what it sounds like - you use it to make a promise to do something, usually asynchronously.

const makeServerRequest = new Promise((resolve, reject) => {

});

Complete a Promise with resolve and reject:

A promise has three states: pending, fulfilled, and rejected.

const makeServerRequest = new Promise((resolve, reject) => {
if(CONDITION) {
resolve("condition met");
} else {
reject("condition not met");
}
});

Handle a Fulfilled Promise with then:

const makeServerRequest = new Promise((resolve, reject) => {
if(CONDITION) {
resolve("condition met").then(function(result) {
console.log(result);
});
} else {
reject("condition not met");
}
});

Handle a Rejected Promise with catch:

makeServerRequest.catch( error => {
console.log(error)
});

Day 15: Dec 09, 2021. Thursday

Module: Regular Expressions

Regular Expressions often referred to as Regex or Regexp are patterns in programming used for mapping, searching, and replacing text. Regular expressions are very powerful but could be hard to read and understand as they use special characters. In this module we special characters, capture groups, positive, negative lookahead, and other techniques to match any text you want.

Using the Test Method:

The test() method is one of the many ways used in JavaScript for regular expressions. It takes a regular expression and applies it to a string. It returns true if the match is found, or otherwise returns false.

Match Literal Strings:

• console.log(/Hello/.test("Hello World")); will return true
• console.log(/Hello/.test("hello World")); will return false

Match a Literal String with Different Possibilities:

The OR operator |

console.log(/dog|cat|hen|fish/.test("James has a fish pet."));

Ignore Case While Matching:

Using i flag you can ignore case. /ignorecase/i will match all iGnoreCase, ignoreCase, andignorecase`.

Extract Matches:

match() is the opposite of the test() method. /Regex/.test('String'); vs 'String'.match(/Regex/). match() returns the found string.

Find More Than the First Match:

The g flag in Regex /Regex/g will match all patterns, not the first only. 'example string with example repeated'.match(/example/g) will return [example, example]

Match Anything with Wildcard Period:

The wildcard character ., also called dot or period matches any character. /.un/.test('String') will return true for all strings fun, gun and nun

Match Single Character with Multiple Possibilities:

/litral/ matches the literal string, /./ matches anything. These two are the extremes. There are some options in between. A group or class of characters could be placed inside the brackets [ and ] to match against a character.

/b[aiu]g/ will match against bag, big, and bug but not bog.

Match Letters of the Alphabet::

/[a-e]/ will match all letters from a to e.

Match Numbers and Letters of the Alphabet:

The range character hyphen - is not limited to letters only. It can also be used to make a range of numbers like [0-5] will match all numbers between 0 and 5 inclusive both ends.

Match Single Characters Not Specified:

The caret character ^ is used to negate characters. So for we have used regex to match characters or character sets. The symbol is used to not match characters. /[^aeiou]/ matches all characters but not the vowels.

Day 16: Dec 10, 2021. Friday

Module: Regular Expressions

Match Characters that Occur One or More Times:

The + sign tries to find one or more occurrences of a character or a group of characters that are repeated consecutively. "use".match(/s+/) will return ["s"] and "Mississippi".match(/s+/) will return ["ss"], while "Mississippi".match(/s+/g) will match "ss" twice in Mississippi and will return ["ss", "ss"]. "London".match(/s+/g) will not match anything and will return null.

Match Characters that Occur Zero or More Times:

The + sign is used to match one or more characters while the asterisk or star * character is used to match zero or more characters. "google".match(/go*/) will return goo, "gut.match(/go*/)" will return g while "ball".match(/go*/) will return null.

Find Characters with Lazy Matching:

Regular expressions are greedy by default. That means they will always match the longest possible pattern. However, you can change this behavior to Lazy match by introducing the ? mark in the Regex. "titanic".match(/t[a-z]*i/) will return ["titani"] while "titanic".match(/t[a-z]*?i/) will return ["ti"].

Find One or More Criminals in a Hunt: (exercise pre lessons)

"C".match(/C+/) will catch one criminal while "adfadfaCCCkkkkk".match(/C+/) will catch three criminals in a row.

Match Beginning String Patterns:

Outside of character groups ([]), the caret sign ^ is used to find pattern at the beginning of a string. /^Cal/.test("Cal likes racing") returns true while /^Cal/.test("Now Cal is in the mid") returns false.

Day 17: Dec 11, 2021. Saturday

Module: Regular Expressions

Match Ending String Patterns:

Using the $ sign at the end of a regular expression will search for that pattern at end of the string. /story$/.test("This is a never-ending story"); will return true while /story$/.test("Sometimes a story ends quickly."); will return false.

Match All Letters and Numbers:

• /[a-z]/ matches all lowercase letters
• /[A-Z]/ matches all uppercase letters
• /[0-9]/ matches numbers zero to 9
• /[a-zA-Z0-9]/ matches all the above three
• /\w/ is a shorthand for /[a-zA-Z0-9_]/ that matches all lower/upper case letters, numbers zero to nine, and the underscore character.

Match Everything But Letters and Numbers:

/\W/ is the opposite of the alphanumeric pattern /\w/ that matches everything but not the alphabets, numbers, and the underscore character. This is identical to /[^a-zA-Z0-9_]/

Match All Numbers:

/\d/ is a shortcut for /[0-9]/ character class that matches a single digit from zero to nine.

Match All Non-Numbers:

/\D/ is equal to /[^0-9]/ character class that matches a single character that is not a digit between zero and nine.

Restrict Possible Usernames:

Apply your Regix skills to restrict usernames.