• Start from the beginning navigate to: Part I

• Go to Part II, navigate to: Part II

Let's begin with the following scenario: Suppose we have a method called "getCapitals" that utilizes an external API to fetch world capitals. How can we return the results from the "getCapitals" method without halting our entire system while waiting for the capitals to be fetched?

In a synchronous approach, we would simply wait for the capitals to be fetched, effectively blocking our program, and then use the "return" statement with the fetched data.

In an asynchronous approach, the first method we will explore is using the callback pattern.

const callbackFunction = function (result) {
    console.log(result);
}

const fakeCapitals = getCapitalsFake(callbackFunction);

console.log("Continue doing some other work that does not depend on the capitals");

On the left (in “app.js” file)

• I define a callback function that, when called, prints the capitals to the console.

• then I just call the “requests.js“ getCapitals function passing in the callback function to be called with the fetched data.

const getCapitalsFake = (callbackFunction) => {
    setTimeout(() => {
        const data = "waiting 3 seconds for data to arrive...";
        callbackFunction(data);
    }, 3000)
}

On the right (in “requests.js” file) the GetCapitals function:

• receives the callback function passed in as a parameter.

• it makes a http request to the API in order to fetch the data

• defines an inner event listener that listens when the data is ready

• the method finishes its execution and gives back control to app.js to execute other code.

• Only once the data arrives, the event listener triggers and from within the listener we call the callback function from “app.js” received as param, passing it the result data.

Above I excluded all the boilerplate code of making the http request and listening for the result for brevity. Here is the actual code:

const getCapitals = (callback) => {

    const request = new XMLHttpRequest()
    request.addEventListener('readystatechange', (e) => {
        if (e.target.readyState === 4 && e.target.status === 200) {
            const data = JSON.parse(e.target.responseText);
            console.log(data)
            callback(undefined, data.map(d => d.capital).flat());
        } else if (e.target.readyState === 4) {
            callback('An error has taken place', undefined);
        }
    });
    request.open('GET', 'https://restcountries.com/v3.1/all?fields=capital');
    request.send();
}

And here is the code that calls the getCapitals method. Please note I used an anonymous arrow function as parameter instead of declaring the callback separately:

getCapitals((error, capitals) => {
    if (error) {
    console.log(`Error: ${error}`)
    } else {
    console.log(capitals)
    }
});

Promises

Promises in JS are like Tasks in C#. To create a new promise we use its constructor that expects two callback functions as parameters. One that should be called on success and one on failure:

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        const currentSeconds = new Date().getSeconds();
        if (currentSeconds % 2 === 0) {
            resolve("I am the data from the API endpoint");
        }
        else {
            reject("I am an error, the API endpoint was down");
        }

    }, 2000)
});

In order to get the result back from a promise we use “then”. then is a method on the Promise object and it requires two functions as parameters:

• a function that will be called when the Promise will be resolved with the data

• a function that will be called when the Promise will be rejected with the error

myPromise.then((data) => {
    console.log(data);
}, (err) => {
    console.log(err);
})

in order to allow the promise access some data we can wrap a function around it that returns the promise like so:

const getPromiseFunction = (seedNumber) => {
    return new Promise((resolve, reject) => {
        //code excluded for brevity
    });

Or better, simplify the syntax further by removing the “{} and return” since “getPromiseFunction” is a function that receives a number as param and returns a promise.

const getPromiseFunction = (seedNumber) => new Promise((resolve, reject) => {
    setTimeout(() => {
        const currentSeconds = new Date().getSeconds() + seedNumber;
        if (currentSeconds % 2 === 0) {
            resolve("I am the data from the API endpoint");
        }
        else {
            reject("I am an error, the API endpoint was down");
        }
    }, 2000)
});

const myPromise2 = getPromiseFunction(3)
    .then((data) => {
        console.log(data);
    }, (err) => {
        console.log(err);
    })

Using Promise to fetch some data from an API

Now that we know what a promise is, we can use fetch API (which returns a promise) for making requests, instead of the low level "XMLHttpRequest”.

In our requests.js I will add the following method:

const getCountryByCode = (code) => {
    const url = `https://restcountries.com/v3.1/alpha/${code}`;

    return fetch(url).then((response) => {
        if (response.status === 200) {
            return response.json();    // RETURNS ANOTHER PROMISE 
        } else {
            throw new Error("Unable to fetch country");
        }
    });
}

And in our “app.js“ I can get the result by calling the method as such:

getCountryByCode("US").then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(`Error: ${err}`);
})

Now let’s break down the code.

Fetch returns a promise, so instead of doing “const getCountryByCode = (code) => new Promise()“ I can do directly “const getCountryByCode = (code) => fetch()“.

Going further, you can see that I already called “then” once on fetch. So instead of the promise returned by fetch I’m actually returning the promise returned by “response.json()”. This returns a promise with the response data. If something goes wrong I throw the error to be caught down the line.

Further, on the calling side I am calling “then” again on the response data promise in order to get the actual data from the response.

If any error occurs on any of the two “then“ (the one on “fetch” and the one on “getCountryByCode“) the attached “catch” will catch and log the error.

This is called chaining and is one of the biggest advantages that promises offer. Let’s further explore it.

Promise Chaining

Going back to our first API call example where we used the callback pattern, imagine you have a scenario where you need to fetch a country code by its name, then from the result you use the country code to fetch it’s capital, and then you would use the capital to fetch it’s population. Using the callback pattern would result in a hard to read, hard to maintain and error prone multi-nested code that’s often referred to as “callback hell”. By returning a promise instead of nesting a callback function you achieve promise chaining and avoid this callback hell.

We will first look at an example of a square function returning a promise. The function squares a number and takes 1 second to execute (imagine it’s part of a different API and data has to be fetched). We will square the result three times:

const squareNumber = (num) => new Promise((resolve, reject) => {
    setTimeout(()=>{
        typeof num === "number" ? resolve(num * num) : reject("Number not provided");
    }, 1000)
})

This approach is close to the callback hell that you would be forced to do with callback pattern:

squareNumber(10).then((data) => {
    squareNumber(data).then((data) => {
        squareNumber(data).then((data) => {
            console.log(data);
        }, (err) => {
            console.log(err);
        })
    }, (err) => {
        console.log(err);
    })     
}, (err) => {
    console.log(err);
})

But with promises instead of resolving on the spot with “then” we can choose to simply call the function and let it return the promise:

squareNumber(10).then((data) => {
    return squareNumber(data)
}).then((data) => {
    return squareNumber(data)
}).then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(err)
})

Returning a promise from another promise it's called chaining.

Now let’s use a real world example. I will use the getCountryByCode defined earlier and also add a new request getCountriesByLanguage:

const getCountriesByLanguage = (language) => fetch(`https://restcountries.com/v3.1/lang/${language}`).then((response) => {
    if (response.status === 200) {
        return response.json();
    } else {
        throw new Error("Unable to fetch countries");
    }
})

Now I will chain the two calls together:

• first get a country by code, then search into the object and get the country’s first language

• then use the language to get all countries that use the language fetched earlier as their first language.

getCountryByCode("US").then((country) => {
    const language = Object.values(country[0].languages)[0];
    return getCountriesByLanguage(language);
}).then((countries) => {
    console.log(countries.map(i => i.name).map(i => i.official));
}).catch((err) => {
    console.log(`Error: ${err}`);
})

Async / Await

.Net devs rejoice! Yet another feature borrowed from C#, which makes my life a lot easier in working with JavaScript!

Microsoft first introduced async/await pattern in C# 5.0 back in 2011-2012, and was adopted by several programming languages. And rightfully so because this was one of the greatest contributions to asynchronous programming.

Let’s explore how async/await builds on promises (Tasks in C#) and makes our code a whole lot easier to work with.

Below is a regular function that returns a string:

const someFunction = () => {
    return "some text";
}

console.log(someFunction()); // prints: some text

and this is what happens when I make the function async:

const someFunctionAsync = async () => {
    return "some other text";
}

console.log(someFunctionAsync()); // prints: Promise { 'some other text' }

It will make the function return a promise instead of the string itself

We can get the string by resolving the promise like we always do:

someFunctionAsync().then((data) =>
    console.log(data)
).catch((err) => 
    console.log(err)
);

Now in order to demonstrate await, do you remember our squareNumber function that returned a promise? We will call that in our function again three times passing in the result and see how async/await compares to promise chaining:

const someOtherFunctionAsync = async () => {
    const firstSqare = await squareNumber(10);// no then no callback
    const secondSqare = await squareNumber(firstSqare);  
    const thirdSqare = await squareNumber(secondSqare);  

    return thirdSqare; // return the final promise
}

someOtherFunctionAsync().then((data) =>
    console.log(data)
).catch((err) => 
    console.log(err)
);

Remember the promise chaining we had to do before? Now, async/await makes our code look like regular synchronous code!

The second await will not run until the first await either resolves or rejects, the third await will not run until the second await either resolves or rejects and return will not run until all previous awaits either resolve or reject.

If any of the promise rejects, for example if we pass in a string instead of the number 10 in our squareNumber function, the promise is going to reject with: reject("Number not provided");that we coded in squareNumber.

Now in someOtherFunctionAsync, away will automatically throw that error further for us, so no need to manually throw the error by typing throw new Error("error")

Converting our getCountryByCode function to async would look something along those lines:

const getCountryByCode = (code) => {
    return fetch(`https://restcountries.com/v3.1/alpha/${code}`).then((response) => {
        if (response.status === 200) {
            return response.json();    // RETURNS ANOTHER PROMISE
        } else {
            throw new Error("Unable to fetch country");
        }
    });
}

const getCountryByCodeAsync = async (code) => {
    const response = await fetch(`https://restcountries.com/v3.1/alpha/${code}`); // await
    
    if (response.status === 200) {
        return response.json();    // await here if you want to return something inside the response
    } else {
        throw new Error("Unable to fetch country");
    }
}

I also converted the getCountriesByLanguage to async, now if I want to make a function that will chain the two calls together like we did above using the promise version, it would look something like this:

const getCountriesByLanguageUsingCountryCodeAsync = async (code) => {
    const country = await getCountryByCodeAsync(code);
    const countryLanguage = Object.values(country[0].languages)[0];
    const allCountriesUsingLanguage = await getCountriesByLanguageAsync(countryLanguage);

    return allCountriesUsingLanguage.map(i => i.name).map(i => i.official);
}

getCountriesByLanguageUsingCountryCodeAsync("FR").then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(`Error: ${err}`);
})

So there you have it. This part may have been a bit lengthy, but there are numerous nuances to consider, making it an important subject so I wanted to cover the basics. In the future it would be interesting to go more in depth and explore things like the differences between JavaScript's Promises and C#'s Tasks, using side-by-side code examples in both languages.

Let’s connect:

You can find the full set of examples over at my github page.

Also if you liked the article, I'm constantly tweeting about this stuff and more. Feel free to follow me on Twitter and drop a comment to say hi!

If you wish to start from the beginning, please navigate to Part I.

Literal Object syntax

A weird json like syntax way of defining an object on the fly:

const wallet = {
    address: "0x123",
    balance: 10101010,
    getOwner() { return this.address; }
}

const owner = wallet.getOwner();
console.log(owner);                   // 0x123

wallet is a reference like in C#. It has the same shallow copy behavior, same for passing it in functions as well.

Literal declaration is a fast way of bundling some data together, but what if you need a second wallet object?

Constructor Function syntax

A regular function can act as a constructor, without being declared inside a class. WHAT?

const Wallet = function(address, balance){
    this.address = address;
    this.balance = balance;
}

“new“ serves the same scope as in C#: allocates memory, initializes the object and returns a reference to it.

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

const wallet2 = new Wallet("0x456", 100100);
console.log(wallet2);

wallet2.balance += 100;        // set prop
console.log(wallet2.balance);  // get prop

Now what if I want to add a method to our object?

Prototypal Inheritance

Since we don't have a class to add methods to, we will use JavaScript's prototypal Inheritance.

Wallet.prototype.getOwner = function () {
    return this.address; 
}

Wallet.prototype.setBalance = function (balance) { 
    this.balance = balance;
}

console.log(wallet1.getOwner());    // 0x123
console.log(wallet2.getOwner());    // 0x456

wallet1.setBalance(200000);
console.log(wallet1.balance);        // 200000
}

It’s worth mentioning that you can’t use the arrow function here since arrow functions don't bind "this", so you won’t have access to the object from within.

The prototype property is an object where we can add methods / properties on the fly (even after instances are created) that we want to be shared across all Wallet instances.

const wallet3 = new Wallet("0x789", 303030);
// wallet3.[[prototype]] = Wallet.prototype

wallet3.[[prototype]] automatically gets a reference to Wallet.prototype.

When calling a property / method on an object JavaScript first checks if that property is part of the instance, If it can’t find it it will search for it up the inheritance chain using the [[prototype]] property.

console.log(wallet3.balance);

Here JS searches for balance property on wallet3. It finds it and gets it.

console.log(wallet3.getOwner());              

Again, here JS searches for getOwner method on wallet3. It cannot find it so it uses wallet3.[[prototype]] reference to go up the prototype chain and find the method at wallet3.[[prototype]].getOwner().

Another difference worth mentioning is that JS allows us to “on the fly“ override a property/method directly on an instance (shadowing):

wallet2.getOwner = function() {return "The owner is secret"; }
console.log(wallet1.getOwner());      // 0x123 
console.log(wallet2.getOwner());      // 0x456
console.log(wallet3.getOwner());      // 0x789 

Primitives vs Objects & The Prototype Chain

It's funny; the last time I checked JavaScript about 7 years ago, the prevailing notion was that everything in JavaScript is a function. However, now I'm hearing that everything is an object.

JS has 5 primitive types (like in Java not .NET which does not have primitives, only value types). Those 5 primitives are: string, number, boolean, null and undefined. Everything else is an object.

const flag = true;
console.log(flag); 

const age = 35;
console.log(age); 

const book = "The Art of War";
console.log(book); 

will print in the console:

From the first 5 primitives outlined above only null and undefined will ever be a primitive. The first three are initially primitives as seen in the console, but if needed JS will wrap an object around them. That’s why if I try to call methods on any of them (string, boolean, number) I can.

console.log(book.split(''));

will print in the console:

As we can see JS turned our primitive string into an object that inherits from an array of characters prototype, that further inherits from the Object prototype.

As all value types and reference types inherit from Object in C#, In JavaScript all objects inherit from Object prototype.

Here is the prototypal inheritance chain for different types in JS:

• Object: myObject > Object.prototype > null

• Number: myNumber > Number.prototype > Object.prototype > null

• Boolean: myBool > Boolean.prototype > Object.prototype > null

• String: myString > String.prototype > Object.prototype > null

• Array: myArray > Array.prototype > Object.prototype > null

• Function: myFunction > Function.prototype > Object.prototype > null

You can further explore the inheritance chain and all the properties by creating an object of some type and just dumping it to the console.

Class syntax

And finally a familiar syntax. Using classes:

class Wallet {

    // clean differentiation from regular functions via constructor keyword <3
    constructor(address, balance){
        this.address = address;
        this._balance = balance;
    }

    // methods defined within the class, not all over the place <3
    // using that useless "function" keyword in here would actually crash the program. <3
    getOwner() { 
        return this.address; 
    }

    addToBalance(value) { 
        this._balance += value;
    }

    // encapsulation through getters and setters <3. (although we could do w/o the parenthesis)
    get balance(){
        return this._balance;
    }

    set balance(value){
        if(value >= 0){
            this._balance = value;
        }
    }
}

const wallet1 = new Wallet("0x123", 101010);
console.log(wallet1);

Inheritance & Polymorphism

class MultiSigWallet extends Wallet { // extends like in java
    constructor(address, secondAddress, balance){
        super(address, balance);      // super like in java

        this.secondAddress = secondAddress;
    }

    // method override in subclass just like in C#/Java
    getOwner(){ return `first address: ${this.address} & second address: ${this.secondAddress}`; }

}

const w = new Wallet("0x123", 101010);
console.log(w);
w.addToBalance = 5000;          // method from Wallet
console.log(w.getOwner());      // method from Wallet

const msw = new MultiSigWallet("0x456", "0x789", 9999999);
console.log(msw);
w.addToBalance = 6000;          // method from Wallet (no override on MultiSigWallet)
console.log(msw.getOwner());    // method from MultiSigWallet

So there you have it.

In conclusion I am amazed by how strongly JavaScript has developed a syntactic resemblance to C# and Java. It almost feels as though the evolution of JS was influenced by Microsoft developers.

However, it's important to remember that this resemblance is primarily syntactic sugar, as the underlying functionality remains the same.JS still allows you to mess with the properties and methods of an object even after it has been created through the [[Prototype]] object.

Navigate to part three of this three part series where we explore Asynchronous Programming in JavaScript: Part III

Let’s connect:

You can find the full set of examples over at my github page.

Also if you liked the article, I'm constantly tweeting about this stuff and more. Feel free to follow me on Twitter and drop a comment to say hi!

Since React is the de facto front-end library/framework in the blockchain industry I decided to use it for my app. Also throughout my (mostly backed) career I did work on a couple of Angular-Typescript projects but never got a chance to work with React.

So, in order to not feel like a fraud for jumping straight into React without properly going through JavaScript first, I took yet another step back and did a quick 30-hour tutorial: The Modern JavaScript Bootcamp by Andrew Mean. By the way, I want to give a big shout-out to Andrew for the great content!

Since I did something similar about 7 years ago before working with TypeScript and Angular, this time I decided I will create a small set of cheat sheet articles that can be reviewed in 20-30 minutes at most.

This way I will have a reference point to come back to in the future and hopefully save some time for other object-oriented programmers out there.

I plan to split this in three articles: The first one is going to be about general JS syntactic concepts, The second one about OOP in JS, and the third about Asynchronous JS.

In the future I might expand the set with more in-depth articles on subjects like Webpack or delve into Web Assembly, but at this point I feel I’m getting too derailed from my goal of obtaining the Alchemy NFT Certification.

Enough context let’s get started.

Variables & Scoping(Lexical/Static)

const { keccak256 } = require("ethereum-cryptography/keccak");
const { utf8ToBytes } = require("ethereum-cryptography/utils");

const message = "JS uses lexical scoping";

const hashMessage = function(msg){

    if(msg.length < 30)
    {
        const message = " shadowing: defining a variable with the same name but in a different scope";
        msg += message;
    }

    const bytes = utf8ToBytes(msg);
    const hash = keccak256(bytes);

    return hash;
}

console.log(hashMessage(message));

// Global Scope (message, hashMessage)
    // Local Scope (msg, bytes, hash)
        // Local Scope (message)
        

The nested scope from the if block (where the second “message” variable is defined) has access to all the above scopes. So it can access the local scope variables: msg, bytes, hash, as well as the global scope vars “message “ and “hashMessage”.

Leaked Globals & 'use strict'

If JS can't find the variable in its scope it will keep going up until global. If it reaches global and the variable is NOT defined, it will auto define it! Because why not... :|

To fix this mayhem causing "feature" Js has something called "strict mode". (Add "use strict" on top of your script files) More on this here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Shadowing

It's ok to define a second variable with the same name, e.g. the "message" variable inside the if block, if it’s not in the same scope as the first “message” variable (from global scope), and it will shadow if.

Undefined vs Null

• Undefined comes from uninitialized, declared variables.

• Or from assigning a void function result to a variable

• Or by not passing a parameter into a function

I can check against it:

if (x === undefined)  

And I can manually assign undefined to clear a value, but for that "null" should be used!

let & const vs (obsolete)var

• "let" is block scoped

• "const" is like in C# (on a ref type you can't change the address but you can change the object's content)

• "var" has several issues:

  • is function scoped (a var declared in an "if" block is accessible outside the "if" block provided is in the same function.

  • you can redeclare the same variable multiple times :|

  • var declaration (not assignment) gets hoisted above. So if using a var variable before declaration you get undefined instead of the natural reference error. Plus all sorts of weird stuff can happen due to the vars hoisting.

I’ll be addressing value types vs reference types in my next guide about OOP in JS.

String Interpolation

const str = ´Lorem Ipsum ${varLoremHere} Ipsum´;  

Great, now I have to make room for the backtick key on my Dygma keyboard and mess my perfect setup. Arghhh!

Type Coercion - Truthy & Falsy (aaand no I'm not being funny, those are actually technical words)

So apparently if you do:

if("some string")  // true 

Js is going to default the string to the "true" boolean value. Resembling ChatGPT, if you don't know just make something up!

Js will resolve: (false, 0, empty string, null, undefined, NaN) to falsy. Everything else will be resolved to truthy (arrays, objects, a monkey with a chainsaw)!

Type Coercion (resolve to a string, number or bool)

console.log('5' + 5);         // 55
console.log('5' - 5);         // 0
console.log('5' === 5);       // false (the third equal is for comparing the types)
console.log('5' == 5);        // true (can't think of a scenario where == should be used...)
console.log(true + 12);       // 13

const type = typeof 123       // check the type using typeof
console.log(type)             // number

More on type coercion here: https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch4.md (Funny I stumbled upon Kyle Simpson here, I followed a pluralsight course by him like 7-8 years ago.)

Ternary Operator

const age = 35;
let message = age >= 18 ? "Can Vote!" : "Can't Vote!";  // same as C#! GG Js!

Functions

See below the syntax for creating functions in JS (regular functions, arrow functions and methods inside classes)

const function_name = function(){}

const square_MultiLineLambda = (num) => { return num * num; }

const square_SingleLineLambda = (num) => num * num

It’s worth mentioning that lambda expressions don't have access to the context when declared inside a class, they can't access "this"!

Inside classes, define functions like in C# (minus return type, minus access modifier)

function_name(){} 

Encapsulation via Closures

In JavaScript we can simulate the same effect as encapsulating a private variable with getters and setters in C#, by using closures:

const createBankAccount = () => {
    let balance = 100000;

    getBalance = () => balance;

    depozit = (amount) => balance += amount;

    withdraw = (amount) => {
        if(amount <= 5000){
            balance -= amount;
        }
    }

    return {getBalance, depozit, withdraw};
}

const bankAccount = createBankAccount();

bankAccount.depozit(6000)
console.log(bankAccount.getBalance());   // prints 106000

bankAccount.withdraw(7000)
console.log(bankAccount.getBalance());   // prints 106000 (withdraw > 5000)

bankAccount.withdraw(4000)
console.log(bankAccount.getBalance());   // prints 102000

Here we define a regular function “createBankAccount“, that has our “private“ variable “balance“. The variable is private in the sense that due to the lexical scoping it cannot be used from outside the function.

Now we don’t want anyone to be able to change this variable to their liking. For this, inside our “createBankAccount“ function we define three nested functions: one for getting the balance, one for crediting the balance, and one for debiting the balance. We can even protect our balance by adding a debit limit of 5000.

All three methods have access to the balance variable due to scoping.

Then we return an object containing a reference to each of the three nested functions. (delegates in C#)

On the line below we run the “createBankAccount“ function from top to bottom.

const bankAccount = createBankAccount();

We now have in the “bankAccount“ variable an object with three references to those nested functions that have access to “let balance”.

This is how we protect the balance and allow access only through the three nested methods defined inside the closure.

Arrays

const emptyArray = []                      // Empty array
const expenses = [100.10, 45, -20]         // Array of numbers
const data = [true, 11, 'Paul']            // Array of mixed types

console.log(expenses[0])                   // get first
console.log(expenses[expenses.length - 1]) // get last

expenses.push(12)                          // add items
expenses.unshift(3)                        // add items before
console.log(expenses)                      // Will print [ 3, 100.1, 45, -20, 12 ]

// Splice adds, removes, edits items anywhere
const nums = [99, 199, 299]
nums.splice(1, 0, 399)                      // Add item - p1: position, p2: items to delete, p3: item to add
console.log(nums)                           // Will print [99, 399, 199, 299]

nums.pop()                                  // remove from end
nums.shift()                                // remove from beginning
console.log(nums)                           // Will print [399, 199]

nums.splice(0, 1)                           // p1: index, p2: how many elements to delete
console.log(nums)                           // Will print [399]

const nums2 = [10, 20, 30, 40]
nums2[2] = 3000;
nums2.splice(1, 1, 2000);                   // p1: at index 1, p2: delete 1 item, p3: add item 2000
console.log(nums2);                         // [10, 2000, 3000, 40]

For & forEach loops

For loop is the same as C#/Java

forEach is similar with linq’s foreach

const todos = ['Order cat food', 'Clean kitchen', 'Buy food', 'Do work', 'Exercise']
todos.forEach(function (todo, index) {      // forEach is similar to linq's, takes a delegate as a param
 const num = index + 1
 console.log(`${num}. ${todo}`)           
})

Find index w/ indexOf

const index = todos.indexOf('Clean kitchen');    // indexOf gets the index searching by the content
console.log(index)                               // Will print 1

// but indexOf uses ""==="" to search for the index, which doesn't work on ref types": {} === {} does not return true (diff addresses)
// for getting the index in an array of objects we use findIndex to search into the objects properties
const notes = [{title: 'title 1', body: 'body 1'}, {
    title: 'title 2',
    body: 'body 2'
   }];
const objIndex = notes.findIndex(function (note, index) {
    return note.title === 'title 2'
})
console.log(index)                              // Will print 1

Find object w/ find

// for getting the whole object, just use find instead of findIndex:
const obj = notes.find(function (note, index) {
    return note.title === 'title 2'
})
console.log(obj)                                // Will print { title: 'title 2', body: 'body 2' }

const todoItems = [{text: 't1', completed: false}, {text: 't2', completed: true}, {text: 't3', completed: false}]

Filter

/*
* Filter returns a NEW array with the filtered elements
* Takes as param a callback function 
*                         - which gets called for each element with the collection and the index
*                         - returns true for including an element
*                         - returns false for excluding an element
*/
const thingsToDo = todoItems.filter(function (todo) {
    return !todo.completed
});
   
console.log(thingsToDo)     // Wil print t1 & t3 objects

Sort

/**
 * Sort takes a delegate with two items of the array "a" & "b"
 * Implement the delegate's callback function so that it:
 *                         - returns -1 if "a" should come first
 *                         - returns 1 if "b" should come first
 *                         - returns 0 is "a" & "b" are equal
 * * does NOT return a NEW collection!
 */
todoItems.sort(function (a, b) {
    if (!a.completed && b.completed) {
        return -1
    } else if (!b.completed && a.completed) {
        return 1
    } else {
        return 0
    }
})
console.log(todoItems)      // Wil print t1, t3, t2 objects (sorted by completed prop)

Find all methods in mdn docs here.

The Rest Parameter vs The Spread Syntax

The rest parameter is very similar to C#’s params argument. You can use it as a parameter in a method signature when you have a variable number of parameters you want to pass in. The operator will receive those parameters as an array.

Suppose we have a function that sums two numbers:

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

console.log(sum(1,2));
}

Now suppose we want to change the function to accept being called with a variable amount of numbers to be summed? The code would look like this:

const sum2 = (...params) => {
    let sum = 0;
    params.forEach(i => sum += i);

    return sum;
}

console.log(sum2(1, 2, 3));
console.log(sum2(1, 2, 3, 4, 5));

In JS the rest parameter has three dots before “…rest“. Also same as C# if we have multiple parameters in the function, the rest param naturally comes last.

Now we can also use the rest parameter for something else that I find both awesome and useful, and that is to deep copy an array:

const arrayOne = ["One", "Two", "Three"];
const arrayTwo = [...arrayOne]; 
arrayTwo.push("Four");
console.log(arrayOne);   // prints [ 'One', 'Two', 'Three' ]
console.log(arrayTwo);   // prints [ 'One', 'Two', 'Three', 'Four' ]

The const arrayTwo = [...arrayOne]; takes each element from arrayOne and copies it into arrayTwo. The result is a deep copy of arrayOne.

The Spread Syntax is the opposite of the Rest Parameter.

Let’s say I have the same add method that receives numbers as a rest param, and let’s say this method is part of a third party library and I cannot change it’s signature. Also imagine I have an array of numbers that I want to pass in as parameters so they can be received by the rest parameter:

const numbers = [10, 20, 30, 40, 50, 60];

// Sum should be called like this:
// sum2(10, 20, 30, 40, 50, 60); 
// but my numbers are in an array!

console.log(sum2(...numbers));  // spreads out all array items as parameters

The spread operator has the same syntax as the rest parameter but it’s used in a function call (to spread out the array items as parameters) as opposed being used in a function signature (to bundle function parameters into an array).

Try-Catch

// same syntax as C#. I imagine throwing stuff often since js refuses to fail

const addLikeAPro = (a, b) => {
    if (typeof a !== "number" || typeof b !== "number") {
        throw new Error("One of the params is not a number");
    }
    return a + b;
}

try {
    const sum = addLikeAPro(10, "cow");
    console.log(sum);
}
catch (e) {
    console.log(e);
}

Since the last time I checked out JavaScript, it seems that the language has fixed many of its faults with the introduction of const/let and strict mode.

In part II of this three-part series I’ll explore JavaScript’s Object-Oriented Programming and its prototypical inheritance.

https://mirror.xyz/quantarcane.eth/sw3wZxsZH-JXExMDCxcJFvd2sN9iS1X2YxNFnAZRPpI

https://mirror.xyz/quantarcane.eth/fyMW6ZXkJ1AA3FN42TU522_YR5gh_QyyvMZev84Tshg

Let’s connect:

You can find the full set of examples over at my github page.

Also if you liked the article, I'm constantly tweeting about this stuff and more. Feel free to follow me on Twitter and drop a comment to say hi!