JavaScript Fundamentals Part - 1

JavaScript is everywhere. Learning JavaScript would be a great skill on a resume. Today JavaScript is used in frontend development (React.js,Vue.js, Angular.js), Web Server (Node.js), Native mobile applications (React Native, Iconic.js), Native desktop application (Electron).

To get started with JavaScript you can right-click in the browser then select inspect and click on console to write code in JavaScript. This is a good way to start.

First JavaScript Program

Usually in the coding community first program in any language is hello world.

alert("Hello World!!!");

Try writing the above code in your console.

Variables and values

A Variable is a container where data is stored. There are 3 variables in JavaScript.

• var
• let
• const

var variable_name = value;
let variable_name = value;
const variable_name = value;

Usually, we use let and const. why we don't use var we will discuss in further articles.

Rules for declaring variable in JavaScript

• Variable names are case-sensitive in JavaScript. So, the variable names msg, MSG, Msg, mSg are considered separate variables.
• Variable names can contain letters, digits, or the symbols $ and _.
• A variable name cannot start with a digit 0-9.
• A variable name cannot be a reserved keyword in JavaScript, e.g. var, function, return cannot be variable names.

let

JavaScript has dynamic typing: We do not have to manually define the data type of the value stored in a variable. Instead, data types are determined automatically

let roll_no = 12;
let book= "Atomic Habit";
book= "ikigai";

//Printing Variable Value
console.log(roll_no)
console.log(book)

Once variable is declared using let we can reassign value.

const

When we declare a variable using const its value cannot be changed.

const num = 12;
console.log(num);  // Printing variable

num =21;  // This will give error

When to use let and const?

• If you think the value of the variable can change, use let.
• If you think the variable's value cannot be changed, use const.

Datatypes

There are 2 types of datatype in JavaScript.

• Primitive

• Object

Datatypes which are not objects are primitive in JavaScript.

Primitive

There are 7 types of primitive datatype in JavaScript.

• Number: Floating point numbers Used for decimals and integers.

• String: Sequence of characters Used for text.

• Boolean: Logical type that can only be true or false Used for taking decisions.

• Undefined: Value taken by a variable that is not yet defined (‘empty value’).

• Null: Also means ‘empty value’.

• Symbol (ES2015): Value that is unique and cannot be changed [Not useful for now].

• BigInt (ES2020): Larger integers than the Number type can hold.

JavaScript has dynamic typing: We do not have to manually define the data type of the value stored in a variable. Instead, data types are determined automatically.

let num = 20;
console.log(num);

let language= "JavaScrip";
console.log(language);

let login = true;
console.log(login);

let empty;
console.log(empty);

You can also find datatype using typeof.

let num = 1001;
console.log(typeof num);  // Output = Number

Objects

Objects are variables too. But objects can contain many values. Objects are key , value pair in one variable.

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Accessing object values

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
console.log(person.firstName);
console.log(person["firstName"])

Operators

Arithmetic Operators

Operator Description

• Addition (+)
• Subtraction (-)
• Multiplication (*)
• Exponentiation (ES2016) (**)
• Division (/)
• Modulus (Division Remainder) (%)

// Addition
console.log(5 + 5); // 10

//Subtraction
console.log(18 - 9); // 9

//Multiplication
console.log(5 * 9); // 45

//Exponentiation 
console.log(5 ** 2); // 25

//Division 
console.log(10 / 5); // 2

//Modulus 
console.log(10 % 5); // 0

When we use + with string and string or string and number it perform concatenation

console.log("Kedar" + 10); // kedar10

Template Literals

• Template Literals use back-ticks (``) rather than quotes ("") to define a string.

• With template literals, you can use both single and double quotes inside a string.

• Template literal allows multiline strings.

let str = `JavaScript`;

let paragraph = ` Lorem Ipsum
but also the leap into electronic 
typesetting, remaining essentially 
unchanged.`;

• Variable Substitutions : Template literals allow variables in strings using ${...}.

let firstName = `John`;
console.log(`First name is ${firstName}`)

Conditional Statements

In JavaScript we have the following conditional statements:

• Use if to specify a block of code to be executed, if a specified condition is true.

• Use else to specify a block of code to be executed, if the same condition is false.

• Use else if to specify a new condition to test, if the first condition is false.

• Use switch to specify many alternative blocks of code to be executed.

EXAMPLE

let budget= 3000;

if(budget <= 5000){
  console.log("Train Prefered")
}
else if(budget == 6000){
  console.log("Car Prefered")
}
else{
  console.log("Flight Prefered")
}

switch

• Use the switch statement to select one of many code blocks to be executed.

• The switch expression is evaluated once.

• The value of the expression is compared with the values of each case.

• If there is a match, the associated block of code is executed.

• If there is no match, the default code block is executed.

let day_Number = 3;

switch (day_Number ) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

We have declared day_Number 3. So it will print case matching to day_number. i.e - Wednesday

Type Conversion

JavaScript variables can be converted to a new variable and another data type.

Example

Converting Strings to Numbers

let str = "1324";
console.log(Number(str));

Converting Numbers to Strings

let num= 1324;
console.log(String(num));

Type coercion

Type coercion is the automatic or implicit conversion of values from one data type to another. For example, converting a string value to an equivalent number value. It is also known as type conversion.

Example

console.log("5" + "5"); // 55

When we use + it concat strings. But when we use - JavaScript convert string to number and subtract when both are number string.

Example

console.log("50" - "10"); // 40

Truthy and Falsy values

Falsy Values

• Values which after conversion convert to false are Falsy Values.

• There are only 5 Falsy value in JavaScript

  • Undefinded
  • Nan
  • ' '
  • 0
  • null

Example

console.log(Boolean(0)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(Nan)); //false
console.log(Boolean('')); //false
console.log(Boolean(null)); //false

Truthy Values

• Values which after conversion convert to true are Truthy Values.

Example

console.log(Boolean('JavaScript')); //true
console.log(Boolean({})); //true

Stay tuned for more Blogs