• Repetition — Allow the same block of code to execute multiple times without rewriting it.
• Efficiency — Reduce code duplication.
• Processing data — Useful for iterating through arrays, lists, and other collections.
• Automation — Perform repetitive tasks automatically.

Types of Looping Statements

Very often, when writing code, you want the same block of code to run repeatedly. Instead of writing several similar lines of code, you can use loops to perform these tasks.

1️⃣ For loop

The for loop is used when you know in advance how many times the code should execute.

// Syntax
for (initialisation; condition; increment/decrement) {
    // Code to be executed
}

// Example
for (var i = 1; i <= 10; i++) {
    console.log(i);
}

Components of a for loop:

• Initialisation — Initializes the loop variable.
• Condition — Determines whether the loop should continue.
• Increment/Decrement — Updates the loop variable after each iteration.

2️⃣ While loop

The while loop executes a block of code repeatedly as long as the specified condition is true.

// Syntax
initialisation;

while (condition) {
    // Code to be executed
    // Update variable
}

// Example
var i = 0;

while (i <= 10) {
    console.log(i);
    i = i + 1;
}

Note

The condition is checked before executing the loop body. Therefore, the loop may not execute even once if the condition is initially false.

3️⃣ Do...while loop

The do...while loop executes the code block at least once, even if the condition is false, because the condition is checked after executing the code.

// Syntax
initialisation;

do {
    // Code to be executed
    // Update variable
} while (condition);

// Example
var i = 0;

do {
    console.log(i);
    i = i + 1;
} while (i <= 10);

Note

Unlike the while loop, the do...while loop checks the condition after executing the code block.

Quick Comparison

• Decision-making — Programs can choose different actions based on input or situations (e.g., if a user is logged in, show the dashboard).
• Control program flow — They determine which block of code should execute.
• Handle different situations — They allow programs to respond differently depending on the conditions.

Conditional Statements

Very often, when writing code, you want to perform different actions based on different decisions. You can use conditional statements to achieve this.

1️⃣ If statement

The if statement executes a block of code only if a specified condition is true.

// Syntax
if (condition) {
    // Code to be executed if condition is true
}

// Example
if (time < 10) {
    document.write("<b>Good morning</b>");
}

2️⃣ If...else statement

The if...else statement executes one block of code if the condition is true and another block if the condition is false.

// Syntax
if (condition) {
    // Code to be executed if condition is true
} else {
    // Code to be executed if condition is false
}

// Example
if (time < 10) {
    document.write("Good morning!");
} else {
    document.write("Good day!");
}

3️⃣ Switch statement

The switch statement is used to select and execute one block of code from multiple possible options based on an expression.

// Syntax
switch (expression) {
    case label1:
        // Execute code block 1
        break;

    case label2:
        // Execute code block 2
        break;

    default:
        // Code to execute if no case matches
}

Example:

switch (theDay) {
    case 5:
        document.write("Finally Friday");
        break;

    case 6:
        document.write("Super Saturday");
        break;

    case 0:
        document.write("Sleepy Sunday");
        break;

    default:
        document.write("I'm looking forward to this weekend!");
}

Note

• case specifies a possible value to match.
• break terminates the switch statement and prevents execution from continuing into the next case.
• default executes when none of the cases match.

Examples:

console.log(Math.PI) // 3.141592653589793
console.log(Math.E)  // 2.718281828459045

📐 Math Methods

1. round() method

The Math.round() method rounds a decimal number to the nearest integer.

console.log(Math.round(3.4)) // 3
console.log(Math.round(3.7)) // 4

2. floor() method

The Math.floor() method rounds a number down to the greatest integer less than or equal to the given number.

console.log(Math.floor(3.9))  // 3
console.log(Math.floor(-3.2)) // -4

3. ceil() method

The Math.ceil() method rounds a number up to the smallest integer greater than or equal to the given number.

console.log(Math.ceil(3.22)) // 4
console.log(Math.ceil(3.8))  // 4

4. trunc() method

The Math.trunc() method removes all decimal places and keeps only the integer part of the number.

console.log(Math.trunc(3.88))  // 3
console.log(Math.trunc(-3.88)) // -3

5. abs() method

The Math.abs() method returns the absolute (non-negative) value of a number. It is similar to the modulus operation.

console.log(Math.abs(-2.03)) // 2.03
console.log(Math.abs(5))     // 5

6. pow() and sqrt() methods

• Math.pow() returns a number raised to a specified power.
• Math.sqrt() returns the square root of a number.

console.log(Math.pow(2, 3)) // 8

console.log(Math.sqrt(81)) // 9

7. log() method

The Math.log() method returns the natural logarithm of a number, that is, the logarithm to base e (approximately 2.718).

console.log(Math.log(10)) // 2.302585...

8. Trigonometric functions

JavaScript provides trigonometric functions through the Math object.

console.log(Math.sin(0)) // 0

console.log(Math.cos(0)) // 1

console.log(Math.tan(0)) // 0

Note

Trigonometric functions accept angles in radians, not degrees.

9. sign() method

The Math.sign() method returns:

• -1 for negative numbers.
• 1 for positive numbers.
• 0 for zero.

console.log(Math.sign(-9)) // -1
console.log(Math.sign(0))  // 0
console.log(Math.sign(9))  // 1

Note

You can assign numbers to variables and pass those variables to Math methods instead of passing numbers directly.

let num = 3.8;

console.log(Math.round(num)) // 4
console.log(Math.floor(num)) // 3

Quick Revision Table

let name = "Rohan";
let city = "Bangalore";

Strings can be enclosed in "", '' or ``

👶 Creating strings

For creating a string, new String("Hello") is rarely used, primitive and simple way is used to define and declare strings.

let message = "Hi";

🔒 String Immutability

Strings are immutable, meaning their characters cannot be changed directly after creation.

let str = "Hello";
str[0] = "Y";

console.log(str); // "Hello"

String methods return new strings instead of modifying the original string.

📞 Accessing Characters

Characters can be accessed using square bracket notation or the at() method. Indexing starts from 0.

let str = "Hello";

console.log(str[0]);   // "H"
console.log(str.at(0));  // "H"
console.log(str.at(-1)); // "o" (last character)

Note

Negative indices work with at(), but not with square bracket notation.

String properties

length property

let str = "javascript is amazing";
console.log(str.length); // returns the length of the string including blank spaces.

⚙️ String methods

1. ToUppercase() - to convert all characters into uppercase alphabets

console.log("hi".toUpperCase()); // "HI"

2. toLowerCase() - to convert all characters into lowercase alphabets

console.log("HI".toLowerCase()); // "hi"

3. trim methods

console.log(" hi ".trim()); // "hi"
console.log(" hi ".trimStart()); // "hi "
console.log(" hi ".trimEnd()); // " hi"

4. includes() - returns true if the input string is a substring of the string

console.log("Javascript".includes("Java")); // true
console.log("Javascript".includes("Python")); // fasle

5. startsWitn and endsWith methods

console.log("Javascript".startsWith("Java")); // true
console.log("Javascript".startsWith("Python")); // fasle

console.log("Javascript".endsWith("script")); // true
console.log("Javascript".endsWith("lang")); // fasle

6. indexOf() and lastIndexOf() - return the first or last index of the substringin the string, or else reutrn -1 if not present

console.log("java".indexOf("a")); // 1
console.log("java".lastIndexof("a")); // 3

7. slice() - used to extract part of the string

console.log("Javascript".slice(4)); // from the 4th till last index --> "script"
console.log("Javascript".slice(0,4)); // from 0th to 4 -1 = 3rd index --> "Java"
console.log("Javascript".slice(-6)); // last 6 characters --> "script"

8. substring() - extracts a part of a string using start and end indices. The end index is excluded.

console.log("Javascript".substring(0, 4)); // "Java"
console.log("Javascript".substring(4));    // "script"

Note

Unlike slice(), substring() treats negative indices as 0 and swaps the arguments if the start index is greater than the end index.

9. replace() and replaceAll() - used to substitute parts of the string with replacement

console.log("ha ha ha".replace("ha", "hi"));    // "hi ha ha"
console.log("ha ha ha".replaceAll("ha", "hi")); // "hi hi hi"

10. split(delimiter) - used to convert string into and array

console.log("apples,mangoes,bananas".split(",")); // ["apples","mangoes","bananas"]

11. concat() - to attach a string in the end

console.log("Merry".concat(" and ", "James")); // "Merry and James"

12. repeat() - used to repeat a string for a number of times

console.log("*".repeat(3)); // "***"

13. charAt() - returns the character at the index

console.log("Javascript".charAt(2)); // "v"

14. charCodeAt() - returns the ASCII value of the characte at the index

console.log("A".charCodeAt(0)); // 65

15. padStart() and padEnd() - pad the string to the spefic length by contcatinating the given character to the start or the end

console.log("5".padStart(3,"0")); // "005"
console.log("5".padEnd(3,"0")); // "500"

16. match() - to find substrings using regular expression

console.log("abc123".match(/\d+/)); // "123"

17. search() - finds the index of the substring

console.log("hello123".search(/\d/)); // 5

Note

String("Hello") returns a primitive string, whereas new String("Hello") creates a String object. Prefer primitive strings.

console.log(typeof String("Hello"));     // "string"
console.log(typeof new String("Hello")); // "object"

• Type Conversion: Explicitly converting a value to another datatype.
• Type Coercion: JavaScript automatically converts a value to another datatype during an operation.

🔄 Type Conversion

JavaScript provides built-in functions to convert values into different datatypes.

🔤 Convert to String

Use String() or .toString() to convert a value into a string.

let age = 20;

console.log(String(age)); // "20"
console.log(age.toString()); // "20"

Note

null and undefined cannot directly use .toString() because they don't have that method.

🔢 Convert to Number

Use Number(), parseInt(), or parseFloat() to convert values into numbers.

parseInt() vs parseFloat() vs Number()

Number("123abc");    // NaN
parseInt("123abc");  // 123
parseFloat("12.5px"); // 12.5
parseInt("12.9");    // 12
parseFloat("12.9");  // 12.9

• Number() converts the entire value. Invalid numeric strings produce NaN.
• parseInt() extracts an integer from the beginning of a string.
• parseFloat() extracts a floating-point number from the beginning of a string.

✅ Convert to Boolean

Use Boolean() to convert a value into true or false.

Boolean(1);         // true
Boolean(0);         // false
Boolean("Hello");   // true
Boolean("");        // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false
Boolean([]);        // true
Boolean({});        // true

🚦 Truthy and Falsy Values

In JavaScript, every value is either truthy or falsy when evaluated in a Boolean context.

Falsy values:

All other values are truthy, including "0", "false", [], and {}.

if ("Hello") {
    console.log("Executed"); // Executed
}

if (0) {
    console.log("Not executed");
}

🤖 Type Coercion

Type coercion occurs when JavaScript automatically converts values to make an operation possible.

➕ The + Operator

The + operator performs either numeric addition or string concatenation.

General rule:

• If string concatenation is triggered, JavaScript converts the operands to primitives and then to strings as needed.
• Otherwise, JavaScript converts the operands to primitives and performs numeric addition.

console.log("Age: " + 20); // "Age: 20"
console.log(10 + 20);      // 30
console.log(true + true); // 2
console.log([] + []);      // ""

➖ Other Arithmetic Operators

Operators such as -, *, /, and % generally convert operands to numbers.

console.log("10" - 5); // 5
console.log("10" * 2); // 20
console.log("10" / 2); // 5

⚖️ Comparison Coercion

The == operator allows type coercion, whereas === compares without converting the operand types.

Note

Prefer === and !== unless you specifically need the coercion behavior of loose equality.

🧠 Logical Operator Coercion

Logical operators such as && and || evaluate truthiness but return one of their operand values, not necessarily a Boolean.

• && returns the first falsy operand, or the last operand if all are truthy.
• || returns the first truthy operand, or the last operand if all are falsy.
• ! converts the operand to a Boolean and negates it.

⚠️ Special Cases

typeof and NaN

typeof NaN; // "number"
typeof null; // "object"

NaN means "Not a Number", but its datatype is still number. The result of typeof null is a historical JavaScript behavior.

Checking for NaN

console.log(NaN === NaN);       // false
console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("Hi")); // false

Use Number.isNaN() to check whether a value is actually NaN.

Implicit Conversion in Conditions

let age = "18";

if (age >= 18) {
    console.log("Eligible"); // Eligible
}

The comparison converts "18" to a number before comparing it with 18.

🧮 Arithmetic operators

Consider y = 5

🟰 Assignment operators

Consider x = 10 y = 5

➕ operator logic

The + operator performs either addition or string concatenation.

• If string concatenation is triggered, values are converted to strings.
• Otherwise, values are converted to primitives, then numeric addition is performed.
• Objects and arrays are converted to primitive values when necessary.

txt1="What a very "; 
txt2="nice day"; 
txt3=txt1+txt2; // What a very nice day

With mixed data types, the + operator causes JavaScript to run through a set sequence of type conversions

IF String is present -> Convert into String and concatenate
IF NOT
IF Object/Array is present -> Convert into primitive
If NOT
Convert into Numeric type and add
If NOT possible to even convert into number
return NaN

Illustraction of + operator

[] + 1          // "1"
"Hi" + 1        // "Hi1"
true + false    // 1
true + "1"      // "true1"
true + 1        // 2
null + 1        // 1
undefined + 1   // NaN

Note

Other arithmetic operators try to convert all other types into numeric.
Ex: "5" - 5 --> 0

⚖️Comparison operators

🧠 Logical operators

Note

Logical operators can return actual values, not just true or false.

"Hello" && 5  // 5
"" || "Hi"    // "Hi"
!0            // true

❓Conditional operator

Syntax:
variable = condition ? value_if_true : value_if_false

Example

isAdult = (age >= 18) ? "Yes" : "No" ;

• Primitive types
• Reference types

🧱 Primitive Types

Example

let age = 15;
let name = "Rohan";
let isAdult = false;
let Lisence = undefined; // When it is not needed when empty
let favMovie = null; // When it is needed even when empty

🎭 Dynamic typing

JS is a dynamic language i.e., the type of the variable can change during runtime.

let data = 42;      // data is a Number
data = "Forty-two"; // data is now a String
data = true;        // data is now a Boolean

🧩 Reference Types

⚖️ Primitive vs Reference Types

The main difference is how values are copied during assignment.

Primitive — Copy by Value

let a = 10;
let b = a;
b = 20;

console.log(a); // 10
console.log(b); // 20

Reference — Shared Object

let a = { score: 10 };
let b = a;
b.score = 20;

console.log(a.score); // 20
console.log(b.score); // 20

Both variables refer to the same object, so modifying its properties through one variable affects the other.

Note

JavaScript technically copies all assigned values. For objects, the copied value is a reference to the same object.

🔀 Type conversion

Explicitly convert varaible from one datatype to another.
Eg: String -> Number, Boolean -> String

typeof keyword

typeof keyword is used to check the data type of a variable

let data = 10;
console.log(typeof data); //Number

JS has a bunch of built-in ways to convert types. Think of them in 3 buckets: string, number, boolean

Convert to string

String(123) // "123"
(true).toString // "true"

Convert to Number

Number("123") // 123
praseInt("456abc") // 456
**NOTE**
Number("123go") // NaN

Convert to Boolean

Boolean(0) // false
Boolean("Hello") // true

Example

section = "3U"
console.log(section)

⚖️ Rules for js variables

• Case sensitive
• Must start with an an alphabet or underscore
• Cannot start with a number
• Cannot use reserved words as variables
• Should be meaningful
• Cannot contain space or hyphen (-)

Here are few examples:

• score ✅
• _id ✅
• 01 🚫
• await 🚫

📢 Declaration of varaibles

There are three methods of declaring a variable in js

• let keyword
• const keyword
• var keyword

Reassignment

let count = 0
count = 1 //This works

const count = 0
count = 1 //This doesn't work

var count = 0
count = 1 //This works

Accessibility

{
  let blockVariable = "I am hidden";
  var functionVariable = "I am visible";
}

console.log(blockVariable);    //This doesn't work
console.log(functionVariable); //This works

Declearing multiple variables

// Both works
let name="Rohan" , role="Student";

let name="Rohan";
let role="Student";   

Note

• If you assign values to variables that have not yet been declared, the variables will automatically be declared.

  x = 120; //  No error here

• "var" has some confusing behaviors regarding scope and hoisting, so modern developers generally avoid it in favor of let and const.

Ever wondered what actually happens when you click "Continue with GitHub" on a website?

For JSCrafts, I needed a way to identify users through their GitHub accounts and connect that identity to my application's user database.

I decided to use a GitHub App and implement the authorization flow in Next.js. In this article, I'll walk through the setup, environment variables, authorization redirect, callback handling, and how I connect the authenticated GitHub profile to my database.

Let's break it down step by step.

A GitHub App is like a formal partnership agreement between your application and GitHub users.

Imagine building a passport automation system where you need to authenticate new users. Forget the technical jargon for a moment. Think of it this way: just as a Social Security Number (SSN) can help uniquely identify an individual, GitHub authentication allows your app to identify and verify users through their GitHub accounts.

GitHub offers several ways to authenticate users and access its resources, including Personal Access Tokens, OAuth Apps, and GitHub Apps. Each serves a different purpose, but I needed an approach that would support user authentication while allowing my application to request specific permissions for GitHub resources.

I chose a GitHub App because it offers granular permissions and supports acting both as an application and on behalf of authorized users. This made it a suitable fit for my application's authentication and integration requirements.

I started by navigating to:

GitHub → Settings → Developer settings → GitHub Apps → New GitHub App

GitHub Apps are registered through the Developer settings section of a GitHub account or organization.

Configured the basic details:

1. Tha callback URL:
   The callback URL is the address GitHub sends the user back to after they approve (or deny) login on GitHub's site.

   Where do you want the user to be sent after github app does its job?

   I registered every URL I will be using Development: http://localhost:3000/api/auth/github/callback Production: https://jscrafts.vercel.app/api/auth/github/callback

2. Permissions
   Permissions determine what a GitHub App can access or modify. Granting excessive permissions increases the potential impact of a compromised application.

   For the initial setup, I kept repository access read-only and limited the permissions to the requirements of the integration.

3. Webhooks
   GitHub webhooks allow an application to receive event notifications, such as repository-related changes, without continuously polling the API.

   I planned to use a webhook endpoint for future repository integration, but the endpoint had not yet been implemented.

   Therefore, I deferred webhook configuration until the application had a working endpoint. When webhooks are enabled, the webhook URL and secret must be configured appropriately.

4. Creating the .env.local File I added the following environment variable names:

    GITHUB_CLIENT_ID=
    GITHUB_CLIENT_SECRET=
    GITHUB_APP_ID= 
    GITHUB_PRIVATE_KEY=
    GITHUB_WEBHOOK_SECRET=

Before implementing, understand the actors in our implementation.
The browser is the user, your app server, GitHub's website and GitHub's API.
We need two separate routes to complete the entire flow.

Route 1: Send the user to GitHub.

The URL looks like this:

    https://github.com/login/oauth/authorize
    ?client_id=[GITHUB-CLIENT_ID]
    &redirect_uri=[CALLBACK_URL]

The file you need create is src/app/api/auth/github/route.ts:

export async function GET() {
  // 1. Read the client ID from env
  const clientId = process.env.GITHUB_CLIENT_ID;
  if (!clientId) {
    return NextResponse.json(
      { error: 'GitHub client ID is not configured' },
      { status: 500 },
    );
  }

  // 2. Figure out which callback URL to use
  const redirectUri =
    process.env.NODE_ENV === 'production'
      ? 'https://jscrafts.vercel.app/api/auth/github/callback'
      : 'http://localhost:3000/api/auth/github/callback';

  // 3. Build the GitHub URL
  const githubUrl = new URL('https://github.com/login/oauth/authorize');
  githubUrl.searchParams.set('client_id', clientId);
  githubUrl.searchParams.set('redirect_uri', redirectUri);

  // 4. Send the browser there
  return NextResponse.redirect(githubUrl);
}

When the browser lands on that URL, github checks the client_id and responds to the real Github App.
If they approve --> redirect to the callback url along with ?code=ABC123
If they deny --> redirects back with ?error=access_denied
The code that it sends back when approved is important, its short-lived, single-use and is used with CLIENT_ID for fetching github user details for initial profile building.

Route 2: Receive the user back from GitHub

The file you need to src/app/api/auth/github/callback/route.ts
This is the meat of the login. It does four things in order:

Part 1: Read the code or error

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const code = searchParams.get('code');
  const error = searchParams.get('error');

  if (error) {
    return NextResponse.redirect(new URL('/?error=github_denied', request.url));
  }

  if (!code) {
    return NextResponse.redirect(new URL('/?error=missing_code', request.url));
  }
  // ... continue
}

Part 2: Exchange code for access token

const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    client_id: clientId,
    client_secret: clientSecret,
    code,
    redirect_uri: redirectUri,
  }),
});

const tokenData = await tokenResponse.json();

if (!tokenResponse.ok || !tokenData.access_token) {
  return NextResponse.redirect(new URL('/?error=github_token_exchange', request.url));
}

Part 3: Fetch the user's profile

const githubUserResponse = await fetch('https://api.github.com/user', {
  headers: {
    Authorization: `Bearer ${tokenData.access_token}`,
    Accept: 'application/vnd.github+json',
  },
});

const githubUser = await githubUserResponse.json();

GitHub returns something like this:

{
  "id": 12345678,
  "login": "rohan",
  "name": "Rohan",
  "avatar_url": "https://avatars.githubusercontent.com/u/...",
  "html_url": "https://github.com/rohan"
}

Part 4: Create the JSCrafts user

await connectDB();

const user = await User.findOneAndUpdate(
  { githubId: String(githubUser.id) },
  {
    githubId: String(githubUser.id),
    username: githubUser.login,
    displayName: githubUser.name ?? githubUser.login,
    avatarUrl: githubUser.avatar_url,
    profileUrl: githubUser.html_url,
    email: primaryEmail,
  },
  {
    new: true,   // return the updated document
    upsert: true, // create it if it doesn't exist
  },
);

What findOneAndUpdate with upsert: true does:

1. Look for a User with githubId = "12345678"
2. If found → update its fields, return it
3. If not found → create a new User with all these fields, return it
This is the classic "find-or-create" pattern. It handles both first-time and returning users in a single query.

Why use githubId as the key?

• It's stable — usernames can change, IDs can't.
• It's unique — each GitHub account has exactly one ID.

Why new: true ?
Without it, MongoDB returns the old document (before the update). With it, you get the new one, which is what you want for the session step.

What I Learned

Building GitHub authentication for JSCrafts helped me understand three important things:

• Permission scoping matters: Request only the access your application actually needs.
• OAuth security matters: State validation, secure credential handling, and proper error handling are essential parts of the flow.
• Authentication has multiple layers: Authenticating a user through GitHub is different from authenticating the GitHub App itself.

This is an important step in building JSCrafts. The next step is to ensure that the authorization flow is backed by secure session management and that every protected route checks the user's session.