DEV Community: Kushank Sriraj

Chapter 1 : Values, Types, and Operators in JavaScript - a quick ride

Kushank Sriraj — Mon, 07 Dec 2020 08:53:22 +0000

This the first blog in the series of upcoming blogs for Team Tanay EJS Challenge.

You've read the title and know what to learn, so what are we waiting for? Dive in.

Values in JS

A value can be better understood as the most atomic type of data that is used in the program. Simply, call it datatype.
Lets look at the values that JS allows us to use.

NUMBERS

This is used to represent numerical value. It can represent integer, decimal and, exponential numbers.

var n = 50;

The number is represented by 64 bits in the memory, i.e., the variable n occupies 64 bits in the memory once defined.

Similarly, we can use decimals like this:

var d = 2.5;

And using the scientific notation, we can write 25000 as:

var n = 2.5e4;

Representing numeric values is very natural in JavaScript. Just like maths. Hang on! I won't talk about maths anymore.

Arithmetics on numbers

Again, it's simple and natural. The four basic operations, +, -, * and, / are the same.

var plus     = 50 + 50;  //results to 100
var minus    = 50 - 50;  //results to 0
var multiply = 50 * 50;  //results to 2500
var divide   = 50 / 50;  //results to 1

When multiple operators are used together, a precedence is followed:

var confusing = 1 - 4 + 8; //resuts to 5

The / and * operators have same precedence. The same is true for + and - operators also.

It's not confusing if you know the rule of thumb: "When multiple operators with the same precedence appear next to each other, they are applied left to right."

There is an operator to get remainder value also. It's called modulo:

var rem = 10 % 4; //results to 2

In this example, 10 is divided by 4 and the remainder value, i.e., 2 is stored in rem.

Special Numbers

Infinity is a mysterious value. We have positive infinity as Infinity and negative as -Infinity. This value is not mathematically exact and hence it can lead to calculation errors.

Other than this, we have NaN as a value that stands for Not a Number. It is literally used to represent any unexpected calculation results like 0 / 0 or, Infinity - Infinity that is not meaningful.

STRINGS

Strings are used to represent series of characters or text.

Different ways to represent string are:

Using backtick (template literals)

var str = `javascript is fun
           I can code for hours in JS`;

This can go to multiple line and it's printed just like that:

console.log(str);
// Output 
/*
javascript is fun
           I can code for hours in JS
*/

Also, we can enclose strings with ' or " both. But the starting and ending quote must be the same.

var singleQuote = "Some randome text";
var doubleQuote = 'Some more random text';

// If there is an apostrophe then
var names = "Kushank's";

We can join two strings or concatenate with + :

var strJoin = "stringOne " + "stringTwo";

// this results to "stringOne stringTwo"

Moreover, we have a concept of escape characters. It is to print and store values like newline, backslash, etc. We can do that by writing a backslash \ before the character we want to escape.

For escaping newline:

var multiLine = "Line 1\nLine 2;

On printing, Line 1 is printed on first line and Line 2 on the second.

Apart from these, we can also perform small computation inside a template literal:

var stringHack = `two + two = ${2 + 2}`;

// results to : two + two = 4

UNARY OPERATOR

The operators that are used with only one value are called unary operator.

var n = -8;

Here - is a unary operator.

Also, we have a typeof operator that is used to print the datatype of the value.

console.log(typeof "a string"); // > string
console.log(typeof 1.2e4);      // > number

BOOLEAN VALUES

Think of it like a switch with on or true and off or false states. It is very useful in programming.

var truth = true;
console.log(truth);   // > true

COMPARISION

The greater than and less than symbols are used for comparision between two values. The comparision returns a boolean value.

console.log(5 > 3);   // > true
console.log(6 < 20);  // > false

We also have less/greater than or equal to operators:

console.log(7 >= 7);   // > true
console.log(6 <= 1);   // > false

And the equal to == and not equal to != operators:

console.log(NaN == NaN);  // > false
console.log(1 != 2);      // > true

Interestingly, NaN is not equal to NaN as it's a result of some unexpected computaion.

LOGICAL OPERATORS

This would be much easier to understand if you can relate this to logic gates.

AND operator &&: returns true when both values are true else false.

console.log(7 == 7 && 4 < 5);  // > true

OR operator ||: returns true if any one value is true else false.

console.log(7 == 3 || 8 < 5);  // > false

NOT operator !: inverts the boolean value true to false or vice versa.

console.log(!true);  // > false

And one more special operator : the ternary operator

var ternary = (true? "pick true" : "pick false");
console.log(ternary);    // > pick true

EMPTY VALUES

undefined and null are used to represent an empty value. Think of them like a void that has no meaning of it's own. Both of them can be used interchangeably.

AUTOMATIC TYPE CONVERSION

This is a very interesting part and if you've read it until here, please don't miss this. Not having sound understanding of this can lead to unexplained errors or miscalculations.

In order for JavaScript to perform calculations, it does this type conversion to ensure that both of the two values are of the same type.

Some examples :

console.log("4" - 1);  // > 3

Here, the string "4" is converted to the number 4 and then subtraction is performed.
But,

console.log("4" + 1);  // > 41

Here, since + is valid concatenation operator for strings, the number 1 is converted to string "1" and then concantenated with "4".

Sometimes, we don't want any type conversion to happen, and for that, we have === and !== operators.

console.log("4" === 4);  // > false

MORE ON LOGICAL OPERATORS

The logical operators tend to skip the second operation if it's final result is determined by the first operation.

var x = (4 == 3 && console.log('true'));
console.log(x);      // > false

Here, the second operation is not performed at all as the result of AND operation is already determined from the first operation, i.e., false.

Similarly, with || operator, if the first part is true, the second is skipped.
This is called short-circuit evaluation.

One more thing to keep in mind is : 0, NaN, and the empty string ("") are counted as false, while all the other values are counted as true.

Phew! It was a long one. Thanks for reading.
Now, that we have our basics cleared, we can move on to the interesting part : Program Structure which is comming up soon.

If you liked this, hit the heart icon and the unicorn 🦄.

My tidbits of learning JavaScript : CHALK & readlineSync

Kushank Sriraj — Wed, 25 Nov 2020 18:41:12 +0000

So, you finally landed on my first blog post. Welcome!🎉

This tutorial is intended for beginners.
If you've got some experience, read this like you're doing code reviews and put your thoughts in the comments below.
Lets start, beast mode.

JavaScript

JS is amazing, it's syntax is like C++ or Java. It can be used to write apps for web, desktop and android as well. Did I mention it's amazing?

I will be using repl.it with node.js runtime.
Tip: Use Ctrl + Enter to run the program in repl.it.

Printing to the console

To print to the console:

console.log("Hello world!");

Output:

Print a variable:

var x = 2020;
console.log("The year is: " + x);

Output:

But it's very black and white. Lets style it with colors using a package called chalk.

Whats CHALK?

It is:

Terminal string styling done right

We can use it to color console outputs. But first we need to install it. Here, repl.it does a great job. It installs the required packages automatically for you.

Start with including the chalk package:

const chalk = require('chalk');

Now, to print in green:

console.log(chalk.green("Its green!"));

Output:

To underline text:

console.log(chalk.underline.blue("Its underlined and its blue!"));

Output:

And much more. Take a look at chalk's npm docs.

Accepting user input

We know how to print to the console. What if we need some user input? readlineSync is a library made just for that.

Lets include the package:

var readlineSync = require('readline-sync');

Now we can take user inputs like:

var userName = readlineSync.question("Enter your name: ");

Output:

We got the input in the variable userName. Lets print it in color!

console.log("Welcome " + chalk.yellowBright(userName) + "!");

Output:

Arrays

An array is a collection of variables which can be accessed by using the index.
Simple list of song genres:

var songGenres = ["Blues", "RnB", "Pop", "Rock"];

Lets print the first and third genres:

//first genre
console.log(songGenres[0]);

//third genre
console.log(songGenres[2]);

Output:

The index numbering starts with 0. So, here we have 0, 1, 2, 3 as index numbers.

Now, lets put everything together and build a program to choose a song.

Include required packages:

var readlineSync = require('readline-sync');
const chalk = require('chalk');

Define an array to store songs as a list:

var songs = ["Skyfall", "Beautiful times", "Bailando", "Grenade"];

These are my favorites by the way.

Get the user's name as input:

var userName = readlineSync.question("Whats your name? ");

Now, we will be using a readlineSync's method called keyInSelect to select a song from the list.

var favSong = readlineSync.keyInSelect(songs, "Choose a song:");

console.log(chalk.red("You chose " + songs[favSong] + "!"));
console.log(chalk.green("The tutorial is over. Enjoy the song!"));

Output:

Thats all for now

The best way to learn and retain information is to teach it to someone or document it. I have tried to keep this post just like that: simple, fun and exciting.

So, get on your keys...get set...and code!

I will be posting more about JavaScript. We haven't even scratched the surface yet. There's a lot to learn!

Please comment below your suggestions or doubts. I will try my best to answer the queries.

P.S.:I can make emojis italic.👍🤘