My Journey with JavaScript

Gaurav SumanGaurav Suman
6 min read

Hello everyone! I am thrilled to embark on this blogging journey and share my experiences with JavaScript. This marks the beginning of a series where I will walk you through my learning process and discoveries in the world of JavaScript.I'm learning JavaScript from the documentary, not from MDN or Ecma-262. I'm learning my javascript fromjavascript.info .

Whyjavascript.info?

You might wonder why I chose javascript.info as my primary learning resource over other popular sources like MDN (Mozilla Developer Network) or the official ECMAScript documentation (Ecma-262). Well, I found javascript.info to be a comprehensive and beginner-friendly resource that offers clear explanations, practical examples, and interactive exercises. It has been a valuable companion in my learning journey, guiding me through the fundamentals and beyond.

So let us start with Javascript, it fun language to learn and to start your coding journey or web development journey.JavaScript, often abbreviated as JS, is a dynamic and versatile programming language that powers the web.

I started learning JS with Hello World I know it is basic but we start with basic right? So to get Hello World. we use alert("Hello World!") .

alert("Hello World!")

These are the topics I have learned so far:

  • "use strict"

  • Variables

  • Data types

  • Interaction

  • Type conversion

  • Comparisons

  • Conditional statements

  • Nullish Coalescing operator

  • Functions


"use strict"

The "use strict" directive is written on the top of the script, and then the whole script works in a modern way.

"use strict"; //on the top of the script
alert("hello world!")

it should be written only on the top otherwise it will not work. And the fun thing is you don't need to write it every time if you are using classes and modules (as modern js supports them it will enable "use strict" automatically.


Variables

Variables are named containers used to store data. In JavaScript, variables can be declared using var, let, and const.

  • let: This is a modern way of declaring variables.

  • const: Similar to, but the value assigned to a variable declared const cannot be changed after declared.

  • var: This was used before the introduction of let. However, it had issues with variable scope, which is why let and const were introduced.


Data Type

Primitive Data Types:

  • String: Represents a sequence of characters.

  • Number: Represents numeric values.

  • BigInt: Represents integers of arbitrary length.

  • Boolean: Represents true or false values.

  • Symbol: Represents unique identifiers.

  • Undefined: Represents a variable that has been declared but not assigned a value.

  • Null: Represents a deliberate absence of any value.

Non-Primitive Data Type:

  • Object: Represents collections of key-value pairs.

Interaction

There are 3 browser-specific functions to interact with us:

  • alert: shows a message.

  • prompt: shows a message asking the user to input text, it contains ok with a text or cancel to send null as a value.

  • confirm: shows a message and asks you a question if you click ok that returns true and false for cancel.


Type conversion

These are the most widely used :

  • String(): Converts a value to a string.

  • Number(): Converts a value to a number.

  •     let value = true;
        value = String(value);
        alert(typeof value);
    

    Boolean(): Converts a value to a boolean (true or false).

We can use typeof for checking the data type of the variable.


Comparisons

Here the comparison operators are similar to maths. We use them to compare two numbers, variables, or strings. And we always get Boolean as the return value(true or false). We use them for conditional operators.

  • Greater/less than: a > b, a < b.

  • Greater/less than or equals: a >= b, a <= b.

  • Equals: a == b, please note the double equality sign == means the equality test, while a single one a = b means an assignment.

  • Not equals: In maths the notation is , but in JavaScript, it’s written as a != b.

alert( 2 > 1 );  // true (correct)
alert( 'Z' > 'A' ); // true
alert( '2' > 1 ); // true, string '2' becomes a number 2
alert( true == 1 ); // true
alert( false == 0 ); // true

Conditional statements

Conditional statements in JavaScript allow you to execute different blocks of code based on specified conditions.

Types of Conditional Statements in JavaScript:

  1. if Statement: The if statement is the most basic type of conditional statement. It executes a block of code if the specified condition is true.

     if (condition) {
       // code to execute if condition is true
     }
    
  2. if...else Statement: The if...else statement extends the if statement by providing an alternative block of code to execute if the condition is false.

     if (condition) {
       // code to execute if condition is true
     } else {
       // code to execute if condition is false
     }
    
  3. else if Statement: The else if statement allows you to check multiple conditions sequentially and execute different blocks of code based on which condition is true.

     if (condition1) {
       // code to execute if condition1 is true
     } else if (condition2) {
       // code to execute if condition2 is true
     } else {
       // code to execute if all conditions are false
     }
    
  4. switch Statement: The switch statement provides a way to execute different blocks of code based on the value of an expression. It is particularly useful when you have multiple possible values to check.

     switch (expression) {
       case value1:
         // code to execute if expression equals value1
         break;
       case value2:
         // code to execute if expression equals value2
         break;
       default:
         // code to execute if expression doesn't match any case
     }
    
  5. ternary Operator: It is a shorthand alternative to the if...else statement and allows you to evaluate a condition and return a value based on whether the condition is true or false.

     condition ? expressionIfTrue : expressionIfFalse
    

Nullish Coalescing operator

The Nullish Coalescing Operator (??) is a logical operator in JavaScript that that are used to handle null or undefined values by returning the default value when the value is null or undefined.

let value1 = null;
let value2 = undefined;
let value3 = "Hello";

console.log(value1 ?? "Default Value"); // Output: "Default Value"
console.log(value2 ?? "Default Value"); // Output: "Default Value"
console.log(value3 ?? "Default Value"); // Output: "Hello"

Functions

Functions are like magic tools in JavaScript! You write them once and use them over and over again.

How to Write:

function functionName(parameters) {
  // do something
  return value; // optional
}

functionName(arguments); //calling function

Types:

  1. Named Function:

     function add(a, b) {
       return a + b;
     }
    
  2. Anonymous Function:

     let subtract = function(a, b) {
       return a - b;
     };
    
  3. Arrow Function:

     let multiply = (a, b) => a * b;
    

One of the best I like to use is the arrow function. It is use easy to use.

Well, there are a few things to know:

  • Parameter: When you are declaring a function what you write in parentheses (...) is called a parameter.

  • Argument: Arguments are the same thing but instead of being passed to a function declaration it is passed at the time of calling a function.

  • return: Keyword used to return a value from a function.


As I continue my journey with JavaScript, I look forward to exploring its features, mastering its concepts, and building exciting projects. I invite you to join me on this adventure, learn alongside me, and share your thoughts, questions, and experiences in the comments below. Stay tuned for the next part of my JavaScript journey!

0
Subscribe to my newsletter

Read articles from Gaurav Suman directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Gaurav Suman
Gaurav Suman