JavaScript

In JavaScript, We print values using console

console.log("Hello World!");

Variables

In JavaScript, We create variables to hold data. Variables are like containers in which we store some data.

Const For creating a constant we have only one keyword that is const

const userId = 198;

Constants are unchangable variables, so that by mistaken your variable should not change by you or others.

Let and Var For creating a changeable variable we have two keywords let and var.

In modern JavaScript, We only use let keyword for defining changeable variable not var.

let userName = "vikash";
var userEmail = "vikash@google.com";

Prefer not to use var var has issues with block scope and functional scope.

{
  // Code block
}

if (condition) {

}

for (start; end; increment/decrement) {

}

function () {

}

Comments Unlike another languages, In JavaScript we can also write comments. Comments are ignored by the compiler.

// Single line comment

/*
Multiline

comments
*/

Standard code and Importance of code readablity

As we discussed to standardize the JavaScript code ECMAScript International writes standards. For the browser how they will treat the code "use strict"

"use strict";

// above statement ensures that your source code will be treated as newer version of javascript

In the coding, it always recommended that your code should readable.

console.log(3 + 3);

console.log("javascript");
console.log("Vikash");

The above examples are not comes under the good practice.

Data Types

In other programming languages like C# and C++, there is a most important concept of Call by Value and Call by Reference.

In the very top level data types are categorized based on how a data value will be stored in memory, and how they can be accessed by the user.

Here we have two category - Primitive ( Call by value ) and Reference | Non-primitive ( Call by reference )

Call by value: A copy of original value to be passed. Call by reference: Original value to be passed.

Primitive data types

• number ( 198, 143, 1.45 ), Range 2^53 - 1
• bigint ( 198n ), trading, stock market, reddit like websites
• string ( "vikash", 'kumar' )
• boolean ( true / false )
• null ( standalone value | dataType = Object )
• undefined ( dataType )
• symbol ( unique )

We have a typeof method for investigation, what kind of data type we are storing in a variable. There are two ways to write typeof method as

console.log(typeof 198);

console.log(typeof 198);

List of types of data types

console.log(typeof "vikash"); // string
console.log(typeof 187); // number
console.log(typeof 198n); // bigint
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined

console.log(typeof Object()); // object
console.log(typeof Array()); // object
console.log(typeof String()); // string
console.log(typeof function () {}); // functional object

Symbol data type A symbol in JavaScript is a unique, immutable data type that is often used to create unique identifiers for properties on objects. Unlike strings, symbols are not comparable by value, meaning two symbols created with the same description are not considered equal.

const id = Symbol(12);

const anotherId = Symbol(12);

console.log(id === anotherId); // false

Conversions

It is possible to convert data types in JavaScript. eg. number -> string | string -> number | number -> boolean | string -> boolean | boolean -> string | boolean -> number

Why we need conversion? Most of the time browser returns a string value to user. Whenever we fetch some data from an API. ( eg. Weather API )

Conversion will not become a problem if you know what will be the expected result after conversion.

We have Number() for converting values in number.

let score = "21";

let scoreInNumber = Number(score);

console.log(scoreInNumber); // 21
console.log(typeof scoreInNumber); // number

Conversion List of Number | Value | Converted Value | | :--- | :--- | | Number("21") | 21 | | Number("21xyz") | NaN | | Number(null) | 0 | | Number(undefined) | NaN | | Number(true) | 1 | | Number(false) | 0 | | Number({ }) | NaN | | Number([ ]) | 0 |

We have a Boolean() for converting values in boolean.

let isLoggedIn = 0;

let booleanIsLoggedIn = Boolean(isLoggedIn);

console.log(booleanIsLoggedIn); // false
console.log(typeof booleanIsLoggedIn); // boolean

Conversion List of Boolean | Value | Converted Value | | :--- | :--- | | Boolean(" ") | false | | Boolean("vikash") | true | | Boolean(1) | true | | Boolean(0) | false | | Boolean(null) | false | | Boolean(undefined) | false | | Boolean({ }) | true | | Boolean([ ]) | true | | Boolean(function (){}) | true |

Similarly, We have String() for converting values in string.

let myString = 2;

let myStringValue = String(myString);

console.log(myStringValue); // "2"
console.log(typeof myStringValue); // string

Conversion List of string | Value | Converted Value | | :--- | :--- | | String(2) | "2" | | String(null) | "null" | | String(undefined) | "undefined" | | String(true) | "true" | | String(false) | "false" |

Here are some special cases. When we try to convert datatype of an object

let myString = {};

let myStringValue = String(myString);

console.log(myStringValue); // [object Object]
console.log(typeof myStringValue); // string

console.log(`Hello${myStringValue}World`); // Hello[object Object]World

When we try to convert datatype of an array

let myString = [];

let myStringValue = String(myString);

console.log(myStringValue); //
console.log(typeof myStringValue); // string

console.log(`Hello${myStringValue}World`); // HelloWorld

Operations

Operations are used to manipulate data stored in a variable.

let value = 3;
let negValue = -value;

console.log(negValue); // -3

We have many types of mathematical operations to perform on the variables.

console.log(2 + 2); // 4
console.log(2 - 2); // 0
console.log(2 * 2); // 4
console.log(2 ** 3); // 8
console.log(2 / 2); // 1
console.log(2 % 2); // 0

Addition operator with strings

let str1 = "hello";
let str2 = " vikash";

let str3 = str1 + str2;

console.log(str3); // hello vikash

We have already talked about explicit conversion.

let userId = "198";
let userIdInNumber = Number(userId);

console.log(userIdInNumber); // 198
console.log(typeof userIdInNumber); // number

Problems with implicit conversion In implicit conversion strings are very powerful.

console.log("1" + 2); // 12
console.log(1 + "2"); // 12
console.log("1" + "2"); // 12

console.log(1 + "2" + 2); // 122
console.log(1 + 2 + "2"); // 32

Writing mathematical expressions In JavaScript it is complicated to predict the result of a messy expression. eg. ( 3 + 4 * 5 % 3 ) There is no any certainity in the above expression. Instead we can use more parenthesis for a more certain result.

console.log(3 + ((4 * 5) % 3)); // Wrong approach to write expressions

console.log((3 + 4 * 5) % 3); // More reliable approach to write expressions

Some more expressions are written as +true and +""

console.log(+true); // 1  ( Prefer not to use in programming )
console.log(+""); // 0  ( Prefer not to use in programming )

PostFix and PreFix operators

PostFix and PreFix operators work on single value.

let gameCounter = 10;

console.log(++gameCounter); // 11
console.log(gameCounter++); // 11

Here you are thinking that both the operators did the same work but they works differently.

| Value: gameCounter = 10 | Current value | Passed value | | :---------------------- | :------------ | :----------- | | gameCounter | 10 | 10 | | ++gameCounter | 11 | 11 | | gameCounter++ | 11 | 12 | | ++gameCounter | 13 | 13 | | gameCounter-- | 13 | 12 | | --gameCounter | 11 | 11 |

We print only current values in the console

Comparisons

Comparisons are used to compare between two values or expressions. Comparison operators return a boolean value ( true/false). Most of the logic of the programming based on comparison. In conditionals ( if-else ) and loops.

List of comparisons

console.log(2 > 4); // false
console.log(2 >= 4); // false
console.log(2 < 4); // true
console.log(2 <= 4); // true
console.log(2 == 4); // false
console.log(2 != 4); // true

Here is an example of bad comparing practice

console.log("2" > 1); // true
console.log("02" > 2); // true

Have a look on an special type of comparison with null 👀

console.log(null > 0); // false
console.log(null == 0); // false
console.log(null >= 0); // true

An unexpected result will occur if we compare value with null.

Don't worry! Let's look the Comparison with undefined

console.log(undefined == 0); // false
console.log(undefined > 0); // false
console.log(undefined < 0); // false

Strict checking JavaScript can compare between two different data type variable. Due to this functionality of JavaScript, we may face unexpected error.

console.log("3" == 3); // true

In the above expression we are comparing an string data type with a number data type. Because traditional equlity check ( == ) only perform the comparison based on the value, Not data type.

JavaScript should not proceed the comparison. To prevent this type of comparison we use strict checking.

console.log("3" === 3); // false

Written with 💖 by thatonevikash!