How to Use Javascript Class?

Class in Javascript is syntactic sugar on top of prototypes. Class makes it easier to structure our code, and to read and maintain it. Let’s see a simple class. class QuizTracker { constructor() { this.right = 0; this.wrong = 0; this.points = 0; } addRight() { this.right++; this.points++; } addWrong() { this.wrong++; this.points -= 0.25; } getPoints() { return this.points; } } Class is the skeleton and provides the framework for an object. Object is an instance of the class and contains the structure supplied by class and the data. ...

Array Sort in Javascript

Arrays in Javascript can be sorted using a simple .sort command. But, don’t let that simplicity deceive you - it goes far more than that. let arr = [4, 2, 1, 7, 3]; console.log(arr.sort()); // [ 1, 2, 3, 4, 7 ] Sort can be used against full strings - let fruits = ["orange", "apple", "grapes"]; console.log("fruits.sort(): ", fruits.sort()); //[ 'apple', 'grapes', 'orange' ] It can use a custom function instead of the default sort logic. const fruits = [ { name: "orange", color: "orange" }, { name: "apple", color: "red" }, { name: "grapes", color: "green" }, ]; const fruitsSorted = fruits.sort((fruit1, fruit2) => { if (fruit1.color < fruit2.color) return -1; else if (fruit1.color > fruit2.color) return 1; else return 0; }); console.log("fruitsSorted: ", fruitsSorted); /* output fruitsSorted: [ { name: 'grapes', color: 'green' }, { name: 'orange', color: 'orange' }, { name: 'apple', color: 'red' } ] */ You can use any custom logic in the sort function, which makes it quite a powerful tool. However do remember - sort affects the original array. ...

Arrays in Javascript

Array is a collection of elements or objects, and is quite easy to use in Javascript. Here’s an example of array: const fruits = ["apple", "orange"]; You can print out the entire array.. const fruits = ["apple", "orange"]; console.log("fruits: ", fruits); //fruits: [ 'apple', 'orange' ] .. or access individual elements - const fruits = ["apple", "orange"]; So far we have seen You could also use an alternate (newer) notation that is easier to read - const fruits = ["apple", "orange"]; fruits.forEach((element) => { console.log("element", element); }); /* output element apple element orange */ The elements of an array can be of same or different data types. ...

Passing Arguments to a Javascript Function

You can pass one or more values to a function, but that has been made much easier and streamlined with the advent of ES2015 - 2018 standards. Let’s start with a simple function. function sum(x, y) { return x + y; } const summer = sum(3, 6); console.log(summer); // 9 If you follow the newer standards, you can rewrite the above function to - const diff = (x, y) => { return x - y; }; const differ = sum(6, 3); console.log(differ); // 3 If you change the order of arguments, the ‘sum’ function is not impacted, but ‘diff’ function is not impacted. I typically tend to use named variables to avoid this issue. ...

Return Multiple Values from Javascript Function

A Javascript function returns one and only one value. function sum(x, y) { return 3 + 39; } let life = sum(3, 39); console.log(life); // 42 I bet you already knew that not returning a value from a function, would return ‘undefined’. Anywho.. you are in a pickle if you want to return multiple values. There is no return(sum, diff);. However, a lot of problems need multiple ’things’ from the function output. What we do is to create an object in the function, populate it with multiple values and return the object to caller. The object packages all required variables. ...

Logical Operators in Javascript

AND (&&), Not (!), OR (||) are logical operators in Javascript. You will see that they are the only operators that make up for the entirety of one’s life experiences. Logical operators evaluate two values or expressions, and provide a true or false result. Let us see some examples to know the rules of the game. AND Only trues get along with each other to provide a true result - when dealing with an AND operation. ...

Comparison Operators in Javascript

Equals (==), not equals (!=), greater than (>), lesser than (<) - Javascript comparison operators cannot get more simple. Let’s dissect these operators a bit. Comparison operators are the ones that you use to.. well, compare. For example: let numCoffee = 3; if (numCoffee < 2) console.log("too few"); else if (numCoffee == 2) console.log("just right"); else console.log("crazy"); // output: crazy The expression within brackets is evaluated to true or false based on operator precedence. A succinct representation of the above totally real-world problem will be - ...

Objects and Props in Javascript

Know how you can use a Javascript object and its props. Javascript objects have properties or props. As you would have seen in the post about objects and primitives, object operations are quite easy. Though objects can mean more than a few things in Javascript, we will limit discussion of an object to the ** real real ** object. ..i.e., let obj = { i: 1 }; You should know a few things about this object to make your life much easier. ...

Objects and Primitives in Javascript

Get to know all the practical knowledge about Javascript primitives and objects. In JavaScript, objects are king. If you understand objects, you understand JavaScript. W3 Schools Everything except primitives is an object in Javascript. A couple of days back, we were talking about Javascript having the following primitives: bool, number, string, undefined and null. Primitives are quite easily defined and accessed - var name = "Mr. Anderson"; var x = 1; var universe = null; Objects on the other hand.. can also be easily defined and accessed. ...

Type Casting in Javascript

Don’t know how to type? Get a typewriter. I always wanted to say that. But, if indeed you don’t know types - you can always head over to Javascript types to know more**. So, you know there are types. And, you also know that there can be many a problem in the lousy world of loose typing. (I just felt like the next S waxing such eloquence). The only choice to make here is to know more about how to convert from one type to other, and remain type-safe. And, that will quickly become second nature to your programming style. ...