<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Md Abdur Razzak</title>
    <description>The latest articles on Forem by Md Abdur Razzak (@iamrazzakk).</description>
    <link>https://forem.com/iamrazzakk</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1130942%2Fd9f0ab80-a302-49f1-b904-225e01b27312.png</url>
      <title>Forem: Md Abdur Razzak</title>
      <link>https://forem.com/iamrazzakk</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/iamrazzakk"/>
    <language>en</language>
    <item>
      <title>Loops in JavaScript !!📚🔄</title>
      <dc:creator>Md Abdur Razzak</dc:creator>
      <pubDate>Sat, 10 Aug 2024 15:50:09 +0000</pubDate>
      <link>https://forem.com/iamrazzakk/loops-in-javascript--2gkc</link>
      <guid>https://forem.com/iamrazzakk/loops-in-javascript--2gkc</guid>
      <description>&lt;h2&gt;
  
  
  What is Loop in JavaScript ?
&lt;/h2&gt;

&lt;p&gt;Ans: Basically loop use for do repeatedly run a block of code - until a certain condition is met.&lt;/p&gt;

&lt;h2&gt;
  
  
  Types of Loops
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;For Loop&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;When to Use:&lt;/strong&gt; When you know how many times you want to repeat something.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;How It Works:&lt;/strong&gt; You start with a counter, repeat code as long as the counter is less than a limit, and update the counter each time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzdvldt0tg802ksqjzh8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzdvldt0tg802ksqjzh8.png" alt="Image description" width="391" height="84"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;while Loop&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;When To use:&lt;/strong&gt; When you don't know exactly how many times you need to repeat something, but you have a condition to check&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;*&lt;em&gt;How It Works: *&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The condition is checked.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If the condition is true, the code inside the loop is executed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The condition is checked again.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Steps 2 and 3 repeat until the condition becomes false.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fidppui6jx7dyq9xm9hyz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fidppui6jx7dyq9xm9hyz.png" alt="Image description" width="404" height="146"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do-While Loop&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;When To use:&lt;/strong&gt;  Similar to a while loop, but the code inside the loop always runs at least once.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;*&lt;em&gt;How It Works: *&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The code inside the do block is executed once before any condition is checked.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;After executing the code block, the while condition is evaluated.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If the condition evaluates to true, the loop executes the code block again. If the condition evaluates to false, the loop terminates, and the program continues with the code that follows the loop.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi5idg5pnjlve26dj9i9k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi5idg5pnjlve26dj9i9k.png" alt="Image description" width="503" height="196"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For In Loop&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;When To use:&lt;/strong&gt; The for...in loop helps you go through each item in an object or an array. It’s like checking each item one by one.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;*&lt;em&gt;How It Works: *&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The loop starts by creating a variable (often called key) to store the current property name.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The loop checks if the current property exists in the object.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If the property exists, the code inside the loop is executed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The loop moves to the next property.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fra5cimztxubo3mp0gvah.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fra5cimztxubo3mp0gvah.png" alt="Image description" width="627" height="277"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For of Loop&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;When To use:&lt;/strong&gt; When you want to loop through values of an array or other iterable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;*&lt;em&gt;How It Works: *&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The loop creates a variable to hold the current value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The loop iterates over each value in the iterable object.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The current value is assigned to the variable.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7i43u3giqlt2joasz6fl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7i43u3giqlt2joasz6fl.png" alt="Image description" width="467" height="135"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Note: If you Know more please share.
&lt;/h2&gt;

&lt;p&gt;Mail: &lt;a href="mailto:mdabdurrazzakrakib290@gamil.com"&gt;mdabdurrazzakrakib290@gamil.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>es6</category>
      <category>frontend</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript Functions — Understanding The Basics</title>
      <dc:creator>Md Abdur Razzak</dc:creator>
      <pubDate>Mon, 11 Mar 2024 06:28:45 +0000</pubDate>
      <link>https://forem.com/iamrazzakk/javascript-functions-understanding-the-basics-31j0</link>
      <guid>https://forem.com/iamrazzakk/javascript-functions-understanding-the-basics-31j0</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is a Function?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A function is a subprogram designed to perform a particular task.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When a function is called, it gets run. We refer to this as calling a function.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions can take values as inputs and use them internally.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions yield values in all cases. In JavaScript, a function will return undefined if no return value is supplied.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions are objects.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Define a Function.&lt;/strong&gt;&lt;br&gt;
There are a few different ways to define a function in JavaScript:&lt;/p&gt;

&lt;p&gt;A named function is defined by a function declaration. The function keyword and the function name are used to generate a function declaration. The function definition is hoisted when function declarations are used, enabling the function to be used prior to definition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`function name(parameters){
 statements
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A named or anonymous function is defined by a function expression. A function without a name is known as an anonymous function. Function expressions cannot be used before they are defined because they are not hoisted. We are assigning a variable value to the anonymous function object in the example below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`let name = function(parameters){
 statements
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A function expression can be written using a simpler syntax called an Arrow Function Expression. This value is not created by arrow functions on its own.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`let name = (parameters) =&amp;gt; {
 statements
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Parameters vs. Arguments.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you’re new to JavaScript, you may have heard the terms parameters and arguments used interchangeably. While very similar, there is an important distinction to make between these two keywords.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Parameters&lt;/strong&gt; are used when defining a function, they are the names created in the function definition. In fact, during a function definition, we can pass in up to 255 parameters! Parameters are separated by commas in the (). Here’s an example with two parameters — param1 &amp;amp; param2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`const param1 = true;
const param2 = false;
function twoParams(param1, param2){
 console.log(param1, param2);
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Contrarily, arguments are the values that each parameter provides to the function during its execution, or when it is called. Our two arguments in the example above are both true and false.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Invoking a Function.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When a function is invoked, it begins to operate. We call this process "invocation." A function can be called by referring to its name, which is followed by an open and closed parenthesis: ().&lt;/p&gt;

&lt;p&gt;Let's explore an example.&lt;/p&gt;

&lt;p&gt;If you’re using Google Chrome, open up your dev console so you can code along with these examples: &lt;em&gt;[WINDOWS]: Ctrl + Shift + J [MAC]: Cmd + Opt + J&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Let's start by defining a function called logIt. The only input required for this function is the name. The function will log that name back to the console when it is executed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`unction logIt(name){
 console.log(name);
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We call our function and pass in the single parameter to make it run. I am referring to this function as Md. Abdur Razzak here:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;logIt('Md Abdur Razzak');&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;You can call your function with an empty set of parenthesis if it doesn't have any parameters:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`function logIt2(){
 console.log('The second one);
}
logIt2();
// The second one`
)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Function Return.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Every function in JavaScript returns undefined unless otherwise specified.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let’s test this by creating and invoking an empty function:&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`function test(){};
test();
// undefined`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Awesome, as expected, undefined is returned.&lt;/p&gt;

&lt;p&gt;Now, we can customize what is returned in our function by using the _return _keyword followed by our return value. Take a look at the code below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`function test(){
 return true;
};
test();
// true`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, we explicitly tell the function to return &lt;em&gt;true&lt;/em&gt;. When we invoke the function, that’s exactly what happens.&lt;/p&gt;

&lt;p&gt;But why is this important?&lt;br&gt;
It’s important because the value that a function returns, is actually returned to the caller of the function. Take a look at this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`let double = function(num) {
  return num * 2;
}`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a function expression that creates a function that will return two times the value of our input parameter num. We can then invoke the function and save the return value to a variable:&lt;/p&gt;

&lt;p&gt;let test = double(3);&lt;br&gt;
When we log out our test value, we get 6:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(test);
// 6

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Awesome! The _return _variable not only returns values from a function, but it assigns them to whatever is called the function!&lt;/p&gt;

&lt;p&gt;Another important rule of the return statement is that it stops function execution immediately.&lt;/p&gt;

&lt;p&gt;Consider this example where we have two return statements in our test function:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;`function test(){
 return true;
 return false;
};
test();
// true`
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Our function is immediately stopped from running by the initial return statement, which also makes our function return true. Line three's code, return false; is never run.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Function Objects.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Functions are function objects. In JavaScript, anything that is not a primitive type ( &lt;em&gt;undefined, null, boolean, number, or string&lt;/em&gt;) is an object. Objects in JavaScript are extremely versatile. Because of this, we can even pass a function as a parameter into another function.&lt;/p&gt;

&lt;p&gt;When a function accepts another function as a parameter or returns a function, it is called a higher-order function. You’ve probably already used a bunch of higher-order functions and don’t even know it: &lt;em&gt;Array. prototype.map&lt;/em&gt; and &lt;em&gt;Array.prototype.filter&lt;/em&gt; are higher-order functions (Just to name a couple). You can check out some of my previous articles to learn more about objects and higher-order functions in JavaScript&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Takeaways.&lt;/strong&gt;&lt;br&gt;
This is a lot of information to digest. Here’s a list of the important stuff:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A function is a portion of a software created to carry out a specific activity.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Expressions are not hoisted; function declarations are.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;When a function is called, it gets run. We refer to this as calling a function.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions can take values as inputs and use them internally. A parameter is the name given to the value. An argument is the actual value by itself.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Functions invariably yield a value. In JavaScript, a function will return undefined by default if no return value is supplied.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Objects are functions.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>frontend</category>
      <category>reactjsdevelopment</category>
      <category>beginnersa</category>
    </item>
    <item>
      <title>What is hoisting in javaScript?</title>
      <dc:creator>Md Abdur Razzak</dc:creator>
      <pubDate>Fri, 12 Jan 2024 13:24:04 +0000</pubDate>
      <link>https://forem.com/iamrazzakk/what-is-hoisting-in-javascript-4nj3</link>
      <guid>https://forem.com/iamrazzakk/what-is-hoisting-in-javascript-4nj3</guid>
      <description>&lt;p&gt;Hoisting Basically when we run JavaScript code than it's do every global variable and function go in the top. its called hoisting.&lt;br&gt;
*&lt;em&gt;Variable hoisting: *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;console.log(x); // undefined&lt;br&gt;
var x = 5;&lt;br&gt;
console.log(x); // 5&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;Functional Hoisting: *&lt;/em&gt;&lt;br&gt;
sayHello();&lt;/p&gt;

&lt;p&gt;function sayHello() {&lt;br&gt;
  console.log("Hello, World!");&lt;br&gt;
}&lt;br&gt;
&lt;strong&gt;Note:&lt;/strong&gt; &lt;br&gt;
var and let/const declarations. let and const are block-scoped and are hoisted but not initialized until their actual declaration in the code, resulting in a "temporal dead zone" if you try to access them before the declaration.&lt;/p&gt;

&lt;p&gt;Like&lt;br&gt;
console.log(a); &lt;br&gt;
let a = 10;&lt;/p&gt;

&lt;p&gt;Show This error: VM156:1 Uncaught ReferenceError: a is not defined at :1:13&lt;/p&gt;

</description>
      <category>hoisting</category>
      <category>javascript</category>
      <category>frontend</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
