Forem: Shoyab khan

Day 13 of 30 of JavaScript

Shoyab khan — Fri, 30 Aug 2024 13:17:00 +0000

Introduction

Hey reader! 👋 I hope you’re doing well. 😊 In the last post, we completed our discussion on arrays, their properties, and methods. Today, we’re diving into Object-Oriented Programming (OOP) in JavaScript, starting from the basics and progressing to more advanced concepts. Let’s get started! 🔥

What is Object-Oriented Programming?

Object-Oriented Programming (OOP) is a programming paradigm that uses objects and classes to define complex structures in a simpler way.

Example: Imagine you have a car. This car has various properties such as its name, type (sports, luxury, passenger, etc.), number of seats, engine capacity, and more. Instead of managing these properties individually, OOP allows us to encapsulate them within a single entity—an object. We can define a Car class that contains all the properties and methods related to a car, and then create car objects from this class.

class Car {
    constructor(name, type, seats, engineCapacity) {
        this.name = name;
        this.type = type;
        this.seats = seats;
        this.engineCapacity = engineCapacity;
    }

    getInfo() {
        return `${this.name} is a ${this.type} car with ${this.seats} seats and an engine capacity of ${this.engineCapacity}L.`;
    }
}

const myCar = new Car('Audi', 'Luxury', 5, 3.0);
console.log(myCar.getInfo());

In this example, we define a Car class with properties and methods, and we access them using an object.

Fundamental Blocks of Object-Oriented Programming

Classes:
Classes are blueprints that hold related properties and methods in one place. In our example, the Car class contains all the relevant details about a car.
Objects:
An object is an instance of a class. It allows us to access the properties and methods defined in that class. Note that a class does not occupy memory until an object is created from it.
Properties or Attributes:
These are characteristics of the class. In our Car class, properties like name and type define the characteristics of the car.
Methods:
Methods are actions that objects can perform. In the Car class, methods might include actions like drive, stop, or honk. In our example, we have the getInfo method.

Properties of Object-Oriented Programming

Encapsulation:
Encapsulation is the bundling of data (attributes) and methods (functions) that operate on the data into a single unit or class. It restricts direct access to some components, similar to how a capsule protects its contents.
Abstraction:
Abstraction involves hiding complex implementation details and exposing only the necessary features. For instance, when you apply the brakes in a vehicle, you don’t need to know the intricate mechanics behind it; you just know that applying the brakes slows down the vehicle.
Inheritance:
Inheritance allows one class to inherit properties and methods from another class. The class being inherited from is called the parent class (or superclass), while the class that inherits is called the child class (or subclass). For example, a Car class can inherit from a Vehicle class.
Polymorphism:
Polymorphism refers to the ability of different classes to provide a unique implementation of methods that share the same name. For example, a Shape superclass might have a calculateArea() method, which can be implemented differently in subclasses like Square and Circle.

Conclusion

That’s it for today’s introduction to Object-Oriented Programming in JavaScript! I hope you found this information helpful. In the next blog, we’ll delve deeper into OOP concepts. Until then, stay connected, and don’t forget to follow me!

Day 12 of 30 of JavaScript

Shoyab khan — Fri, 30 Aug 2024 10:06:00 +0000

Introduction

Hey there! 😊 I hope you’re doing well. In our last post, we studied the searching and sorting methods used with arrays. Today, we’ll discuss iteration methods that are commonly used with arrays. Let’s get started! 🔥

Iteration Methods

Array iteration methods are functions or techniques that allow you to traverse through each element of an array systematically. These methods enable you to perform operations on each element without manually writing loops.

`Array.forEach()` Method

The forEach() method executes a provided callback function once for each array element.

const numbers = [1, 2, 3];
numbers.forEach((value, index) => {
    console.log(`Index: ${index}, Value: ${value}`);
});

The callback function can accept three arguments:

value: The current element being processed.
index: The index of the current element.
array: The array that forEach() was called upon.

`Array.map()` Method

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const doubled = numbers.map(num => num * 2); // [2, 4, 6]

The callback function can also accept the same three arguments as forEach().

`Array.filter()` Method

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const evenNumbers = numbers.filter(num => num % 2 === 0); // [2]

`Array.reduce()` Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It processes the array from left to right.

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 6

There is also a reduceRight() method that works similarly but processes the array from right to left.

`Array.every()` Method

The every() method tests whether all elements in the array pass the test implemented by the provided function.

const allPositive = numbers.every(num => num > 0); // true

`Array.some()` Method

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

const hasNegative = numbers.some(num => num < 0); // false

Array Spread Operator (`...`)

The spread operator (...) expands an iterable (like an array) into more elements. It provides a concise and flexible way to work with iterables, making your code more readable.

const newArray = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

Conclusion

These iteration methods are essential tools in JavaScript and are commonly used for array manipulation. I hope you found this blog helpful! In the upcoming posts, we’ll dive into Object-Oriented Programming (OOP) concepts. Until then, stay connected, and don’t forget to follow me!

Day 11 of 30 of JavaScript

Shoyab khan — Fri, 30 Aug 2024 04:04:16 +0000

Introduction

Hey there! 👋 I hope you’re doing well. 😊 In our last post, we explored some array methods in JavaScript. Today, we’ll continue our discussion by looking at more useful array methods. Let’s get started!

Sorting an Array

Sorting an array involves arranging its elements in a specific order, whether ascending, descending, or random.

sort() Method
The sort() method sorts the elements of an array lexicographically (in dictionary order).

const fruits = ['Banana', 'Apple', 'Cherry'];
fruits.sort(); // ['Apple', 'Banana', 'Cherry']

To sort an array in descending order, you can sort it and then reverse it:

fruits.sort().reverse(); // ['Cherry', 'Banana', 'Apple']

Note: The sort() method modifies the original array. If you want to keep the original array unchanged, you can use the toSorted() method, which returns a new sorted array.

The sort() method uses a variant of the Timsort algorithm, which is efficient and designed to perform well on various types of data.

Numerical Sort
The sort() method works well for strings but can yield unexpected results with numbers. For example:

const numbers = [9, 67, 2];
numbers.sort(); // [2, 67, 9] (not the expected numerical order)

To sort numbers correctly, you can provide a comparison function:

numbers.sort((a, b) => a - b); // [2, 9, 67]

This function returns:

A negative number if a is less than b (meaning a comes before b).
Zero if they are equal.
A positive number if a is greater than b.

You can also use external libraries like Lodash for more advanced sorting techniques.

Finding Maximum and Minimum Elements in an Array

To find the lowest number in an array, you can use Math.min.apply():

const arr = [1, 2, 3, 4, 5];
const min = Math.min.apply(null, arr); // 1

Similarly, to find the highest number, use Math.max.apply():

const max = Math.max.apply(null, arr); // 5

Conclusion

That’s it for today’s blog! I hope you found this information helpful. In the next post, we’ll explore array iteration methods. Until then, stay connected, and don’t forget to follow me! 🤍

Day 10 of 30 of JavaScript

Shoyab khan — Sun, 25 Aug 2024 03:45:00 +0000

Day 10 of 30 of JavaScript

Introduction

Hey there, readers! 😊 I hope you’re doing well. In our last post, we discussed arrays and some of their methods. Today, we’ll continue our exploration by looking at more array methods. Let’s get started!

Converting Array to String

The JavaScript toString() method converts an array into a string, with the elements separated by commas.

Accessing Negative Indices

In JavaScript, you cannot use negative indices directly (e.g., arr[-2] will throw an error). However, starting from ES2022, an alternative was introduced to address this issue. You can now use at() to access elements using negative indices.

const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-2)); // Outputs: 4 (the second to last element)

JavaScript Array `join()`

The join() method combines all elements of an array into a string, similar to toString(), but you can specify a custom separator.

const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.join(', ')); // Outputs: "Apple, Banana, Cherry"

JavaScript Array `pop()`

The pop() method removes the last element from an array and returns that element.

const numbers = [1, 2, 3];
const lastNumber = numbers.pop(); // lastNumber is 3

Deleting from a Random Index

The delete() method can be used to remove an element from an array, but it leaves undefined holes in the array.

delete numbers[1]; // This leaves an undefined value at index 1

To avoid this issue, use the splice() method instead.

`splice()` Method

The splice() method allows you to remove elements from an array without leaving holes.

numbers.splice(1, 1); // Removes the element at index 1

The first argument specifies the starting index, while the second specifies the number of items to remove. Note that this method modifies the original array.

`toSpliced()` Method

Introduced in 2023, the toSpliced() method allows for safe splicing of an array without altering the original array.

const newArray = numbers.toSpliced(1, 1); // Creates a new array without modifying the original

`slice()` Method

The slice() method extracts a portion of an array and returns it as a new array without modifying the original.

const newNumbers = numbers.slice(1, 3); // Returns a new array containing elements from index 1 to 2

`shift()` and `unshift()` Methods

The shift() method removes the first element from an array and returns it.
The unshift() method adds a new element to the beginning of an array.

const firstFruit = fruits.shift(); // Removes 'Apple'
fruits.unshift('Orange'); // Adds 'Orange' at the beginning

Merging Arrays

To concatenate two arrays, you can use the concat() method, which creates a new array without changing the original arrays.

const moreFruits = ['Grapes', 'Pineapple'];
const allFruits = fruits.concat(moreFruits);

Search Methods

indexOf(): Searches for a specific element and returns its position. If the element is not found, it returns -1.
lastIndexOf(): Similar to indexOf(), but returns the last occurrence of the specified element.
includes(): Checks if an element is present in the array. It can also check for NaN values.
find(): Returns the first element that satisfies a provided testing function.
findIndex(): Returns the index of the first element that satisfies the testing function.

Reversing an Array

The reverse() method reverses the order of the elements in an array, modifying the original array. If you want to reverse an array without altering the original, use the reversed() method, which is a safe alternative.

const reversedArray = [...numbers].reverse(); // Creates a reversed copy of the array

Conclusion

That’s all for today’s discussion on array methods! I hope you found this information helpful. If you have any questions, feel free to leave a comment and I’ll do my best to assist you. Stay connected, and don’t forget to follow for more updates! If you enjoyed the post, please leave a reaction! 😊

Day 9 of 30 of JavaScript

Shoyab khan — Fri, 23 Aug 2024 14:31:00 +0000

Introduction

Hello, readers! 😊 I hope you’re doing well. In our previous post, we discussed functions and their applications in JavaScript. Today, we’ll continue our journey by exploring arrays and the various methods used to manipulate them. Let’s get started!

What are Arrays?

An array is a data structure that holds a list of similar types of elements. For instance, you can store a collection of ten numbers in an array.

Declaration of Arrays

There are several common methods to declare an array:

Using Array Literals: You can simply declare an array variable and assign a list of values to it.

   const numbers = [1, 2, 3, 4, 5];

Using the Array Constructor: You can create an array using the Array constructor.

   const numbers = new Array(1, 2, 3, 4, 5);

Creating an Empty Array: You can declare an empty array and then assign values to each index separately.

   const numbers = [];
   numbers[0] = 1;
   numbers[1] = 2;

Using the Constructor with Size: You can also create an array by specifying its size and then filling it using a loop.

   const numbers = new Array(5);
   for (let i = 0; i < numbers.length; i++) {
       numbers[i] = i + 1; // Assigning values
   }

Note: Array indices start at 0 and go up to the size of the array minus one (e.g., arr[0], arr[1], etc.).

Accessing Array Elements

You can access elements in an array by referring to their index number. For example:

const fruits = ['Mango', 'Orange', 'Kiwi'];
console.log(fruits[0]); // Outputs: Mango

Note: While we often say arrays hold similar types of entities, JavaScript arrays can actually store elements of different types. This flexibility allows for mixed data types within the same array.

Adding Elements to an Array

The simplest way to add a new element to an array is by using the push() method, which appends the element to the end of the array:

fruits.push('Banana'); // Adds 'Banana' to the end

If you want to insert an element at a specific position, you can use the splice() method:

fruits.splice(1, 0, 'Pineapple'); // Adds 'Pineapple' at index 1

In this example, the first parameter is the index where the new element should be added, the second parameter is the number of elements to remove (0 in this case), and the third parameter is the new element to be added.

You can also use the spread operator (...) to add elements to an array:

const newArr = [0, ...fruits, 4]; // Combines elements into a new array

Length of an Array

The length property of an array returns the number of elements it contains:

console.log(fruits.length); // Outputs the number of elements in the fruits array

Conclusion

That’s all for today’s post! I hope you found this information helpful. We’ll continue our exploration of arrays in the next blog. Until then, stay connected, and don’t forget to follow for more updates! 😊

Day 8 of 30 of JavaScript

Shoyab khan — Fri, 23 Aug 2024 10:25:00 +0000

Introduction

Hi there, readers! 😊 I hope you’re doing great. In our last session, we explored functions and their usage in JavaScript. Today, we’ll be discussing arrow functions and function invocation. Let’s dive right in!

Arrow Functions

Arrow functions offer a more concise way to define functions in JavaScript, having been introduced in ECMAScript 2015. They simplify the syntax compared to traditional function expressions and come with several advantages.

Syntax:

const myFunction = (parameter1, parameter2) => {
    // code to be executed
};

Benefits of Using Arrow Functions:

Concise Syntax: Arrow functions provide a streamlined way to define functions.
Implicit Return: If the function body contains only a single expression, you can omit the curly braces {} and the return keyword. The result of that expression will be returned automatically. This feature makes arrow functions particularly handy for short, one-liner functions.

For example:

   const add = (a, b) => a + b;

There are even more benefits to using arrow functions, which we will discuss in future posts as we delve deeper into JavaScript.

Function Invocation

A function's code will execute when it is invoked, or called, in various ways:

When an Event Occurs: For example, a function can be triggered when a user clicks a button.

   button.addEventListener('click', fun);

When Called from JavaScript Code: A function can be executed directly within your JavaScript code.

   fun(); // Calls the function

Automatically (Self-Invoked): Functions can also be invoked immediately after their definition. This pattern is known as an Immediately Invoked Function Expression (IIFE). The function is executed right away without needing to be called elsewhere in the code.

   (() => {
       // code to be executed
   })();

Conclusion

That wraps up our discussion for today! I hope you found it informative. In our next post, we’ll explore arrays and their methods. Until then, stay connected, and don’t forget to follow for more updates! 😊

Day 7 of 30 of JavaScript

Shoyab khan — Fri, 23 Aug 2024 06:22:24 +0000

Introduction

Hello, wonderful readers! 😊 I hope you’re doing great. In our last post, we explored the concept of loops in JavaScript. Today, we’ll turn our attention to functions and how they are defined in JavaScript. Let’s dive in!

What are Functions?

In programming, a function is essentially a set of instructions designed to perform a specific task repeatedly. For instance, if you need to add a set of numbers, you can create a function to handle this task efficiently.

Syntax for JavaScript Functions

The basic syntax for defining a function in JavaScript is as follows:

function myFunction(parameter1, parameter2) {
    // code to be executed
}

This syntax describes a function that will execute whenever it is called.

For example, you might define an add function to sum a list of numbers. This function could take two numbers as arguments and return their sum. This promotes code reusability and makes your code more concise and easier to read.

Different Ways to Define Functions

There’s more than one way to define functions in JavaScript:

Function Expressions You can define a function as a value and assign it to a variable:

   const myFunction = function(parameter) {
       // code to be executed
   }

Functions defined this way are known as anonymous functions since they lack a name. Here, the function is stored in the variable myFunction, allowing you to invoke it later.

Function Hoisting

Hoisting in JavaScript refers to the behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase.

Think of it like creating a to-do list: you might outline your categories (like "work" or "personal") before writing specific tasks. Similarly, hoisting allows the JavaScript engine to recognize all variables and functions even if they're defined later in the code.

For instance, the following code works without error, even though the square() function is called before its declaration:

square(4); // This works!
function square(x) {
    return x * x;
}

However, this behavior does not apply to function expressions.

Function Scope

Function scope pertains to the accessibility of variables and functions within a function:

Local Scope: Variables declared within a function can only be accessed inside that function. They are not visible outside of it.
Nested Scope: Functions can be nested within other functions. Inner functions can access variables from their outer functions, but the reverse is not true.
Lexical Scope: JavaScript employs lexical scoping, meaning the visibility of variables is determined by their physical location in the code, also referred to as "static scope."

Function Parameters

Parameters are the inputs provided to a function for it to perform its tasks. You can even pass other functions as arguments!

For example, consider this higher-order function:

function greet(greetingFunction) {
    greetingFunction();
}

In this case, greet() takes another function as an argument, demonstrating how functions can interact.

Special Parameter Syntax

Two special types of parameter syntax include:

Default Parameters: If no value is provided for an argument, it defaults to undefined. It's advisable to assign values to parameters either externally or within the function.
Rest Parameters: You can pass an unlimited number of arguments to a function using the spread operator (...). This allows for flexibility in how many arguments can be handled.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

The arguments passed to functions are stored in an array-like object.

Conclusion

That’s it for today’s discussion on functions! In our next post, we’ll cover arrow functions and function invocation. Stay tuned, and don’t forget to like and follow for more updates! 😊

Day 6 of JavaScript

Shoyab khan — Fri, 23 Aug 2024 06:14:59 +0000

Introduction

Hello, dear readers! 😊 I hope you're having a fantastic day. In our previous discussion, we explored operators and conditionals in JavaScript. Today, we’ll dive into the fascinating world of loops and how they function in JavaScript. Let’s jump right in!

Understanding Loops

So, what exactly are loops? In simple terms, loops allow you to execute a block of code multiple times without having to write the same code repeatedly. For instance, if you want to print "Hello world" a hundred times, instead of writing the print statement a hundred times, you can use a loop to do it efficiently.

Types of Loops in JavaScript

JavaScript provides several types of loops, each serving different purposes:

For Loop The for loop is designed to run a block of code a specific number of times. Syntax:

   for (initialization; condition; increment) {
       // code to be executed
   }

In this syntax:

Initialization: This is where you typically set up a variable, and it runs once before the loop starts.
Condition: This defines when the loop should continue running. If the condition evaluates to false, the loop stops.
Increment: This is executed after each iteration of the loop, allowing you to modify the variable.

For example, you might initialize a variable i, check a condition, and increment i each time the loop runs.

While Loop The while loop continues to execute a block of code as long as a specified condition remains true. Syntax:

   while (condition) {
       // code to be executed
   }

Here, the loop will keep running until the condition evaluates to false.

Do-While Loop The do-while loop is a variation of the while loop. It guarantees that the code block will run at least once before checking the condition. Syntax:

   do {
       // code to be executed
   } while (condition);

This loop is often referred to as an exit-controlled loop since the condition is evaluated after the code block executes.

For-In Loop The for-in loop is used to iterate over the properties of an object. Before we delve deeper into this loop, it’s essential to understand what an object is in JavaScript.

Conclusion

That wraps up our discussion on loops for today! In our next post, we’ll explore functions in JavaScript. Until then, stay tuned, and don’t forget to like and follow for more updates! 😊

Day 5 of 30: JavaScript

Shoyab khan — Wed, 31 Jul 2024 13:06:14 +0000

Hey everyone, I'm back with my fifth post on JavaScript. In the last post, we covered data types in JavaScript. Today, we'll dive into operators and conditionals used in JavaScript. Let's get started!

Operators in JavaScript

There are 7 types of operators in JavaScript:

Arithmetic Operators
- Perform arithmetic on numbers.

Common operators:

Addition +
Subtraction -
Multiplication *
Division /
Modulus % (remainder of division)
Exponentiation ** (e.g., a ** b or Math.pow(a, b))

Increment and Decrement:

Pre-increment ++i (increments before evaluation)
Post-increment i++ (increments after evaluation)
Pre-decrement --i
Post-decrement i--

Comparison Operators
- Compare two values and return a boolean.

Common operators:

Equal ==
Strict equal ===
Not equal !=
Strict not equal !==
Greater than >
Less than <
Greater than or equal >=
Less than or equal <=

Logical Operators
- Combine multiple conditions.

Common operators:

AND &&
OR ||
NOT !

Bitwise Operators
- Work on 32-bit numbers.

Common operators:

AND &
OR |
XOR ^
NOT ~
Left shift <<
Right shift >>

Assignment Operators
- Assign values to variables.

Common operators:

Simple assignment =
Addition assignment +=
Subtraction assignment -=
Multiplication assignment *=
Division assignment /=

Bitwise assignment operators:

&=, |=, ^=, <<=, >>=

Logical assignment operators:

&&=, ||=, ??=

Ternary Operator
- Shorter way to write if-else statements.

Syntax:

   condition ? expressionIfTrue : expressionIfFalse;

Type Operator
- Use typeof to find the data type of a variable.

Example:

   let x;
   console.log(typeof x); // "undefined"

Conditional Statements in JavaScript

JavaScript provides the following conditional statements:

if-else
- Checks a condition and executes code blocks based on the result.

   if (condition) {
     // code to execute if condition is true
   } else {
     // code to execute if condition is false
   }

else if
- Checks multiple conditions in sequence.

   if (condition1) {
     // code to execute if condition1 is true
   } else if (condition2) {
     // code to execute if condition2 is true
   } else {
     // code to execute if none of the above conditions are true
   }

switch
- Performs different actions based on different conditions.

   switch (expression) {
     case value1:
       // code to execute if expression === value1
       break;
     case value2:
       // code to execute if expression === value2
       break;
     default:
       // code to execute if no cases match
   }

That's it for this post. In the next post, we will explore loops in JavaScript. Stay connected and don't forget to follow me!

Day 4 of 30: JavaScript

Shoyab khan — Wed, 31 Jul 2024 12:58:36 +0000

Hey there! In the last post, we covered how comments are used and variables are declared in JavaScript. Today, we'll explore data types in JavaScript. Let's get started.

JavaScript provides two main types of data types:

Primitive Data Types
Non-Primitive Data Types

Note: JavaScript is a dynamically typed language, so you don't need to specify the data type of a variable. Simply declare it using var, let, or const.

Primitive Data Types

Primitive data types are basic types that are not objects and do not have methods. They are immutable, meaning their values cannot be changed. When you manipulate a primitive value, you're working directly with its value rather than with a reference. Primitive values are stored directly in memory.

The six primitive data types are:

String: Represents a sequence of characters.

   let greeting = "hello";

Number: Represents both integer and floating-point numbers.

   let age = 42;
   let pi = 3.14;

Boolean: Represents a logical entity, either true or false.

   let isAvailable = true;

Null: Represents the intentional absence of any value.

   let emptyValue = null;

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

   let notAssigned;

Symbol: Represents a unique identifier (introduced in ECMAScript 6).

   let uniqueID = Symbol("id");

Non-Primitive Data Types

Non-primitive data types in JavaScript can store collections of values and have methods and properties. They are mutable, meaning their values can be changed.

The main non-primitive data types are:

Object: Complex data types that can hold key-value pairs.

   const person = {
     name: "John",
     age: 30,
     hobbies: ["reading", "coding"],
     address: {
       city: "New York",
       country: "USA"
     },
     sayHello: function() {
       console.log("Hello!");
     }
   };

Array: Ordered collections of values.

   const fruits = ["apple", "banana", "orange"];

Function: Special type of object that can be invoked to perform a task or calculate a value.

   function add(a, b) {
     return a + b;
   }

Date: Represents a specific date and time.

   const currentDate = new Date();

That’s all for this post. In the next post, we will discuss operators and conditional statements. Stay connected and don’t forget to follow me!

Day 3 of 30: JavaScript

Shoyab khan — Wed, 31 Jul 2024 12:42:27 +0000

Hey curious readers! I'm back with the third tutorial on JavaScript. In this post, we will explore how comments are used and how variables are declared in JavaScript. Let's get started!

1. Comments in JavaScript

What are comments?
Comments are pieces of text in the code that help explain what the code does. They are not executed as part of the program and are meant to enhance code readability.

Types of comments:

Single-line comments: These are represented by double slashes //.

// This is a single-line comment
console.log("Hello World"); // This is another single-line comment

Multi-line comments: These are used for longer comments that span multiple lines. They are enclosed by /* at the beginning and */ at the end.

/* 
  This is a multi-line comment.
  It can span multiple lines.
*/
console.log("Hello World");

2. Variable Declaration

What are variables?
Variables are symbolic names for values and are used to store data that can be referenced and manipulated in a program.

Ways to declare variables in JavaScript:

Using var keyword
Using let keyword
Using const keyword

Using var keyword:
var is the traditional way to declare variables in JavaScript. Variables declared with var are function-scoped or globally scoped.

function exampleFunction() {
  var name = "Alice";
  console.log(name); // Accessible inside the function
}
exampleFunction();
console.log(name); // Error: name is not defined

If declared outside a function, var is accessible throughout the program.

var name = "Alice";
console.log(name); // Accessible globally

Using let keyword:
Introduced in ECMAScript 2015 (ES6), let allows you to declare block-scoped variables.

{
  let name = "Bob";
  console.log(name); // Accessible within this block
}
console.log(name); // Error: name is not defined

let cannot be redeclared within the same scope.

Using const keyword:
Also introduced in ECMAScript 2015 (ES6), const allows you to declare constants, which are block-scoped like let. The value of a constant cannot be reassigned once it is initialized.

const name = "Charlie";
console.log(name); // "Charlie"
name = "Dave"; // Error: Assignment to constant variable

However, properties of objects or elements of arrays declared with const can still be changed.

const person = { name: "Eve" };
person.name = "Frank"; // Allowed
console.log(person.name); // "Frank"

That's it for this post. I hope you now understand how to use comments and declare variables in JavaScript. In the next post, we will explore data types. Stay connected and don't forget to follow me!

Day 2 of 30 of JavaScript

Shoyab khan — Wed, 24 Jul 2024 11:31:49 +0000

Hey everyone! 😊 In the last post, we introduced JavaScript. Today, we'll learn how to display data on the screen using JavaScript. Let's dive in!

There are four main ways to display data in JavaScript:

Writing into an HTML element using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box using window.alert().
Writing into the browser console using console.log().

1. Using `innerHTML`

Let's see this in action with a code snippet.

HTML Code:

<body>
<p></p>
</body>

JavaScript Code:

document.querySelector('p').innerHTML = "Hello World";

Output:

Explanation:
We created a paragraph element using <p></p> without any text. The JavaScript line document.querySelector('p').innerHTML = "Hello World"; selects the paragraph element and assigns the text "Hello World" to it. innerHTML allows us to access or modify the HTML content within an element.

2. Using `document.write()`

JavaScript Code:

document.write("Hello World");

Output:

Explanation:
The document.write() method writes text or HTML directly to the document as it's being parsed or loaded. It’s mainly used for testing or dynamically generating content while the page loads. Using document.write() after the page has loaded will overwrite the entire document content.

3. Using `window.alert()`

HTML Code:

<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
</body>

JavaScript Code:

alert("Hello");

Output:

Explanation:
The alert() function displays a modal dialog box with a message and an OK button. It’s used for simple notifications or alerts. However, since alert() is a blocking function, it halts the execution of JavaScript code until the user clicks the OK button, which can disrupt the normal flow of execution.

4. Using `console.log()`

JavaScript Code:

console.log("Hello World");

Output:

Explanation:
The console.log() function prints messages or values to the browser's console. It's commonly used for debugging and logging information during development. Unlike alert(), console.log() does not block the execution of JavaScript code.

That's all for this post! In the next one, we'll explore how comments work in JavaScript and how to create variables. Stay tuned and don't forget to follow me!

Forem: Shoyab khan

Day 13 of 30 of JavaScript

Introduction

What is Object-Oriented Programming?

Fundamental Blocks of Object-Oriented Programming

Properties of Object-Oriented Programming

Conclusion

Day 12 of 30 of JavaScript

Introduction

Iteration Methods

Array.forEach() Method

Array.map() Method

Array.filter() Method

Array.reduce() Method

Array.every() Method

Array.some() Method

Array Spread Operator (...)

Conclusion

Day 11 of 30 of JavaScript

Introduction

Sorting an Array

Finding Maximum and Minimum Elements in an Array

Conclusion

Day 10 of 30 of JavaScript

Day 10 of 30 of JavaScript

Introduction

Converting Array to String

Accessing Negative Indices

JavaScript Array join()

JavaScript Array pop()

Deleting from a Random Index

splice() Method

toSpliced() Method

slice() Method

shift() and unshift() Methods

Merging Arrays

Search Methods

Reversing an Array

Conclusion

Day 9 of 30 of JavaScript

Introduction

What are Arrays?

Declaration of Arrays

Accessing Array Elements

Adding Elements to an Array

Length of an Array

Conclusion

Day 8 of 30 of JavaScript

Introduction

Arrow Functions

Function Invocation

Conclusion

Day 7 of 30 of JavaScript

Introduction

What are Functions?

Syntax for JavaScript Functions

Different Ways to Define Functions

Function Hoisting

Function Scope

Function Parameters

Special Parameter Syntax

Conclusion

Day 6 of JavaScript

Introduction

Understanding Loops

Types of Loops in JavaScript

Conclusion

Day 5 of 30: JavaScript

Operators in JavaScript

Conditional Statements in JavaScript

Day 4 of 30: JavaScript

Primitive Data Types

Non-Primitive Data Types

Day 3 of 30: JavaScript

1. Comments in JavaScript

2. Variable Declaration

Day 2 of 30 of JavaScript

1. Using innerHTML

2. Using document.write()

3. Using window.alert()

`Array.forEach()` Method

`Array.map()` Method

`Array.filter()` Method

`Array.reduce()` Method

`Array.every()` Method

`Array.some()` Method

Array Spread Operator (`...`)

JavaScript Array `join()`

JavaScript Array `pop()`

`splice()` Method

`toSpliced()` Method

`slice()` Method

`shift()` and `unshift()` Methods

1. Using `innerHTML`

2. Using `document.write()`

3. Using `window.alert()`

4. Using `console.log()`