<?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>DEV Community: christopher</title>
    <description>The latest articles on DEV Community by christopher (@umahichristopher).</description>
    <link>https://dev.to/umahichristopher</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%2F1052210%2F09555456-6327-4c59-b30a-76178baa26f9.png</url>
      <title>DEV Community: christopher</title>
      <link>https://dev.to/umahichristopher</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/umahichristopher"/>
    <language>en</language>
    <item>
      <title>What To Do If You Are Not Good At Coding</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 03 Apr 2024 18:07:45 +0000</pubDate>
      <link>https://dev.to/umahichristopher/what-to-do-if-you-are-not-good-at-coding-1g7n</link>
      <guid>https://dev.to/umahichristopher/what-to-do-if-you-are-not-good-at-coding-1g7n</guid>
      <description>&lt;p&gt;Learning to do something new is literally hard &lt;/p&gt;

&lt;p&gt;Achieving a new personal best or learning a new language requires months of dedication, numerous setbacks, and hundreds of hours of effort. Even then, you may only reach an intermediate level.&lt;/p&gt;

&lt;p&gt;So, &lt;/p&gt;

&lt;p&gt;Too many people assume that the following is true:&lt;/p&gt;

&lt;p&gt;/----&amp;gt; Failure &lt;/p&gt;

&lt;p&gt;Effort &lt;/p&gt;

&lt;p&gt;----&amp;gt; Success&lt;/p&gt;

&lt;p&gt;The reality is:&lt;/p&gt;

&lt;p&gt;Effort \Failure//Failure\Failure///SUCCESS!&lt;/p&gt;

&lt;p&gt;In other words, failure is, in reality, the prerequisite to success.&lt;/p&gt;

&lt;p&gt;—Summer Redstone said: “success is not built on success. It’s built on failure. It’s built on frustration.”&lt;/p&gt;

&lt;p&gt;Failure is simply the opportunity to began again, but this time more intelligent.&lt;/p&gt;

&lt;p&gt;You claim you are always stuck in programming. You are not always stock you are just Ignorant sometimes. I sucked once too. &lt;/p&gt;

&lt;p&gt;Before I begin coding, I will create a plan outlining what I aim to achieve in that programming session. and I read other people’s code. All this helps. Ok let me give you a simple hint to help yourself? Read lots of open source code. Most open source code is pretty good, some is so-so, but read it, again and again and again &lt;/p&gt;

&lt;p&gt;Expose yourself to good code whenever you can. Find open source code in the language you'll be working in, and study it over and over. Join an open source project using the language you'll be working in (or want to work in) and contribute. If it sucks, you'll be told, often with recommendations on how to refactor, how to make it more pluggable, how to maximize dynamic loading, etc.&lt;/p&gt;

&lt;p&gt;What worked for me was just continuing to write code. I was terrible, then horrible, then mediocre, then average, then decent, then good, and now I'm considered a guru. I didn't spring from the earth as God's gift to programming. I became good at what I do by doing it, over and over and over again, by being criticized, by taking those criticisms to heart, by refactoring repeatedly, and by learning to apply prior lessons regularly moving forward.&lt;/p&gt;

&lt;p&gt;Good programmers are made, not born.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>productivity</category>
      <category>learning</category>
    </item>
    <item>
      <title>What JavaScript Is Used For</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Thu, 21 Mar 2024 18:28:36 +0000</pubDate>
      <link>https://dev.to/umahichristopher/what-javascript-is-used-for-3fke</link>
      <guid>https://dev.to/umahichristopher/what-javascript-is-used-for-3fke</guid>
      <description>&lt;p&gt;JavaScript, which is often abbreviated as JS. It is a subject-oriented programming language that programmers use to make the webpages interactive. It also allows programmers to create dynamic updating content, for example using animations  or, pop-up menus, clickable buttons, control multimedia, etc &lt;/p&gt;

&lt;p&gt;JavaScript can be used on both the client side and server side. While &lt;strong&gt;HTML&lt;/strong&gt; and &lt;strong&gt;CSS&lt;/strong&gt; &lt;a href="https://www.simplilearn.com/tutorials/html-tutorial/html-vs-css"&gt;&lt;/a&gt;provide structure and style to web pages, JavaScript adds interactive elements to engage users. Without JavaScript, the majority of Internet web pages would be static.&lt;/p&gt;

&lt;h2&gt;
  
  
  What JavaScript Are Used For
&lt;/h2&gt;

&lt;p&gt;JavaScript has many applications in modern technology. Below are some of the most common uses.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web Development&lt;/strong&gt; &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Web Development&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;JavaScript is a scripting language used to develop web pages. To make webpages interactive, web developers use JavaScript to create drop-down menus, form validation, and display data in real time. In other instances, JavaScript use enables dynamic content by allowing scripts to run in the background.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Game Development&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;JavaScript can be also used to develop games for web browsers. The combination of JavaScript and HTML5 plays a major role in game development using JS. Some JavaScript game engines such as &lt;strong&gt;PhysicsJS, and Pixi.js&lt;/strong&gt; help us to create a web game. We can also use the &lt;strong&gt;WebGL&lt;/strong&gt; (web graphics library), and the JavaScript API to render 2D and 3D images on browsers.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Server Applications&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Just so you know, many web applications include a server-side component that handles a variety of operations. Content creation and the management of those fancy HTTP requests are handled by our good friend JavaScript. But, guess what? JavaScript is more than just a one-trick pony because Node.js allows it to run on servers. We have a welcoming playground with all the tools required for JavaScript to show off on servers thanks to Node.js. How awesome is that? &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Mobile Apps&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;One of the awesome uses of JavaScript is to create apps for non-web contexts, or in simpler words, for things off the internet. With everyone practically glued to their mobile devices these days, JavaScript frameworks are here to make mobile app development a breeze across different platforms like IOS, Android, and Windows. Say hello to React Native framework, your best friend for cross-platform mobile app building. It lets developers use a one-size-fits-all front end for both Android and IOS platforms. Isn't that cool?&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Web Servers&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;You may create a web server using JavaScript by using Node.js. You never have to wait around with Node.js because it's event-driven. Without waiting to see the previous call's response, it jumps right into the next one. Here, there is only rapid data chunk transfer—no data buffering. And with its convenient createServer() method, the HTTP module is your new best buddy when it comes to creating a server.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>technology</category>
    </item>
    <item>
      <title>JavaScript Array</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Mon, 26 Feb 2024 07:09:38 +0000</pubDate>
      <link>https://dev.to/umahichristopher/javascript-array-32fb</link>
      <guid>https://dev.to/umahichristopher/javascript-array-32fb</guid>
      <description>&lt;p&gt;Let’s Talk About Array in JavaScript &lt;/p&gt;

&lt;p&gt;Array are Subject that allow us to store keyed collections. Just like naming a container where we have 1st, a 2nd, a 3rd element and so on. It can hold various data types, including numbers, strings, objects, and even other arrays. Arrays in JavaScript are zero-indexed i.e. the first element is accessed with an index 0, the second element with an index of 1, and so forth.&lt;/p&gt;

&lt;p&gt;When working with arrays, it is easy to remove elements and add new elements using the arrays properties&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Creating and Initializing Arrays&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are many ways to create arrays in JavaScript. The most common method is using the array literal syntax:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;let fruits = [“apple”, “banana”, “orange”]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;You can also initialize an array using the &lt;code&gt;new array()&lt;/code&gt; constructor, though that is less common: &lt;/p&gt;

&lt;p&gt;&lt;em&gt;`let&lt;/em&gt; fruits = &lt;em&gt;new&lt;/em&gt; &lt;em&gt;Array&lt;/em&gt;("Apple", "Banana", "Cherry");`&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Array Methods and Properties&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;JavaScript arrays come with a set of built-in methods and properties that make it easier to &lt;strong&gt;manipulate&lt;/strong&gt; the data. here are some of the &lt;strong&gt;methods&lt;/strong&gt; and &lt;strong&gt;Properties&lt;/strong&gt; &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;push()&lt;/strong&gt;: Adds one or more elements to the end of an array and returns the new length.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let numbers = [1, 2, 3];
numbers.push(4); 
console.log(numbers); // Outputs  Array[1,  2,  3,  4]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;pop()&lt;/strong&gt;: Removes the last element from an array and returns that element.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;shift()&lt;/strong&gt;: Removes the first element from an array and returns that element&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;length&lt;/strong&gt;: This property returns the number of elements in an array.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;forEach()&lt;/strong&gt;: This method executes a provided function once for each array element.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(item, index, array) {
  console.log(`${item}: ${index}`);
});

// Outputs  "apple: 0", "banana: 1", "cherry: 2"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Spread Operator&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;The spread operator (&lt;code&gt;...&lt;/code&gt;) in JavaScript allows an iterable (like an array or string) to be expanded in places where multiple elements or arguments are expected. It's incredibly versatile for array manipulations.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Best Practices for Using Arrays in JavaScript&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Use const for declaring arrays that do not get re-assigned.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using &lt;code&gt;const&lt;/code&gt; for array declaration is a good practice. It prevents reassignment of the array identifier, ensuring the reference to the array remains constant. However, the contents of the array can still be modified.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>codenewbie</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How To Use API</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 31 Jan 2024 23:50:02 +0000</pubDate>
      <link>https://dev.to/umahichristopher/how-to-use-api-2817</link>
      <guid>https://dev.to/umahichristopher/how-to-use-api-2817</guid>
      <description>&lt;p&gt;In this article, we will be creating a news website with just API. So Creating a news website with API integration involves some steps, including setting up the HTML structure, styling with CSS, and using JavaScript to fetch and display news articles. Below is a step example of how you can create a basic news website using the NewsAPI.&lt;/p&gt;

&lt;p&gt;Please note that you need to sign up for a &lt;a href="https://newsapi.org"&gt;NewsAPI&lt;/a&gt; and get an API key for this to work  &lt;/p&gt;

&lt;p&gt;in our HTML file let us create a container named news-container &lt;/p&gt;

&lt;p&gt;&lt;code&gt;**&amp;lt;div id="news-container"&amp;gt;&amp;lt;/div&amp;gt;**&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Next, let's obtain our API key and make an API call.&lt;/p&gt;

&lt;p&gt;you've already obtained the key; now you're making the API call.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;//The URL of the API you want to fetch data from&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiKey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;YOUR_API_KEY&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;apiUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://newsapi.org/v2/top-headlines&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;params&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;country&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;us&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;apiKey&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;;

//Using fetch to make a GET request
fetch(apiUrl)
  .then(response =&amp;gt; {
    //Check if the request was successful (status code 200)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    //Parse the response JSON and return it as a Promise
    return response.json();
  })
  .then(data =&amp;gt; {
    //Handle the data obtained from the API
    console.log(data);
  })
  .catch(error =&amp;gt; {
    //Handle any errors that occurred during the fetch
    console.error(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="nb"&gt;Error&lt;/span&gt; &lt;span class="nx"&gt;fetching&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;, error.message);
  });
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  &lt;strong&gt;Explanation:&lt;/strong&gt;
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;URL:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Define the URL of the API you want to fetch data from.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Fetch Call:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Use the &lt;strong&gt;&lt;code&gt;fetch&lt;/code&gt;&lt;/strong&gt; function, passing in the URL as an argument.&lt;/li&gt;
&lt;li&gt;The &lt;strong&gt;&lt;code&gt;fetch&lt;/code&gt;&lt;/strong&gt; function returns a Promise that resolves to the &lt;strong&gt;&lt;code&gt;Response&lt;/code&gt;&lt;/strong&gt; to that request.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Check for Errors:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Inside the first &lt;strong&gt;&lt;code&gt;then&lt;/code&gt;&lt;/strong&gt; block, check if the response was successful (status code 200). If not, throw an error.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Parse Response:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;If the response is successful, use the &lt;strong&gt;&lt;code&gt;json&lt;/code&gt;&lt;/strong&gt; method on the response to parse the JSON content. This method also returns a Promise.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Handle Data:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;In the second &lt;strong&gt;&lt;code&gt;then&lt;/code&gt;&lt;/strong&gt; block, handle the parsed data.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Handle Errors:&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Use the &lt;strong&gt;&lt;code&gt;catch&lt;/code&gt;&lt;/strong&gt; block to handle any errors that might occur during the fetch operation.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This should give you a good starting point for understanding and using the &lt;strong&gt;&lt;code&gt;fetch&lt;/code&gt;&lt;/strong&gt; API in your web development projects.&lt;/p&gt;

</description>
      <category>api</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>What Is API</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 31 Jan 2024 23:41:01 +0000</pubDate>
      <link>https://dev.to/umahichristopher/what-is-api-4jjn</link>
      <guid>https://dev.to/umahichristopher/what-is-api-4jjn</guid>
      <description>&lt;p&gt;An API, or Application Programming Interface, is a set of rules and tools that allows different software applications to communicate with each other. &lt;/p&gt;

&lt;p&gt;API is when you are making an order to a system. It’s requesting the server.&lt;br&gt;
If we go by the definition provided by Wikipedia, it states the following:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“In computer programming, an application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clearly defined methods of communication between various software components”&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It is correctly defined, but still, the meaning is unclear. So let’s understand it with the help of one small example.&lt;/p&gt;

&lt;p&gt;Consider an API as a waiter in a restaurant. Suppose you have a menu of your favourite food and the kitchen is the system where your order is made. But how do you take your order to the kitchen? Correct, you call a waiter, give him/her the order, which in turn takes your order to the kitchen and then your order is made there and then finally, the waiter comes back with your delicious ordered food.&lt;/p&gt;

&lt;p&gt;Thus, the API is very much similar to the waiter. API is the messenger that takes your order(waiter) and tells the system(kitchen) what to do (to prepare food) and in return gives back the response you asked for (waiter returns with the ordered food).&lt;/p&gt;

&lt;p&gt;To get more clearer understanding, let's shift to another example that will clear your remaining doubts too.&lt;/p&gt;

&lt;p&gt;Have you ever visited any sites that show an option for signing up through Facebook or Google? How do you think you can log in and proceed ahead with the application without ever worrying how that code was written!?! It’s because of the API that has simplified all your work. So all the information being provided for Google sign-up is done through the API.&lt;/p&gt;

&lt;p&gt;But good things require precautions and some measures to remain good. So do the API’s!&lt;/p&gt;

&lt;p&gt;Since most of the APIs are provided for free, it need some kind of security to keep it safe from various non-productive purposes. Hence, a new concept called API key was introduced. This key can be considered as permission that you take from the supplier, like from Google, to use their API for signing up on your website or any other application.&lt;/p&gt;

&lt;p&gt;There are some API’s that are free to use, but some APIs need to be bought.&lt;/p&gt;

&lt;p&gt;So in the last, Let me ask you one question: Whenever you book a flight ticket, you go to various other websites like MakeMyTrip, GoIbIbo, Yatra, etc. You hardly ever go to a specific airline's website to book a ticket. Still, you get the place at the same Air Plane service that you might have booked through their website. So ever wondered how this happened?&lt;/p&gt;

&lt;p&gt;Yes, Again, it’s because of the API. Gosh! You think you could survive without this. Don't forget to thank your superhero – the API, who manages all your queries without any complaints and returns with the appropriate result. It has made your life much simpler and easy. This superhero is great!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/umahichristopher/how-to-use-api-2817"&gt;How to Use API &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope you got the real meaning of it! No TextBook language :)&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>api</category>
      <category>programming</category>
      <category>coding</category>
    </item>
    <item>
      <title>What is the best way to learn JavaScript</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Thu, 04 Jan 2024 17:24:46 +0000</pubDate>
      <link>https://dev.to/umahichristopher/what-is-the-best-way-to-learn-javascript-1n69</link>
      <guid>https://dev.to/umahichristopher/what-is-the-best-way-to-learn-javascript-1n69</guid>
      <description>&lt;h2&gt;
  
  
  What is the best way to learn JavaScript
&lt;/h2&gt;

&lt;p&gt;I am a self-taught Web Developer and I say – &lt;strong&gt;The Best way to learn JavaScript is to learn by yourself&lt;/strong&gt;.&lt;br&gt;
All you need is Passion with some topping of Craziness and Hunger of Learning to implement things in your own way.&lt;br&gt;
Stop mastering the syntax instead learn the basics. The same goes with any other programming language/web script, the learning process of JavaScript should be started from the beginner level to the Intermediate level and then finally the Advanced level.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Mistake which Developers do:&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;many JavaScript beginners make mistakes that they keep on reading JavaScript tutorials one by one, and do not implement any of them. This way of learning is totally wrong.&lt;br&gt;
beginners should read one tutorial and then implement what the tutorial has taught them, in their own code. This will make them understand the code correctly, otherwise I guarantee they will forget what they just read within the next 30 minutes or before.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Your First JavaScript Tutorial&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Suppose you started with your &lt;strong&gt;First JavaScript Tutorial&lt;/strong&gt; which displays the current date.&lt;/p&gt;

&lt;p&gt;The JavaScript Code for this is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. &amp;lt;button type="button" onclick="alert(Date())"&amp;gt; 
2.     Click me to display Date and Time 
3. &amp;lt;/button&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After reading this tutorial &lt;strong&gt;you should&lt;/strong&gt; implement it on your computer. Below are the &lt;strong&gt;implementation steps&lt;/strong&gt; you should follow:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Create a new web page.&lt;/li&gt;
&lt;li&gt;Add the button and the onclick event to it.&lt;/li&gt;
&lt;li&gt;Add the alert to show the date.&lt;/li&gt;
&lt;li&gt;Run the web page on your browser to test the feature you just created.
Now you know how to implement your code.&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;p&gt;Which Editor should I use for JavaScript&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;As a beginner, you will also ask how to write JavaScript code. You can use your Windows Notepad, or you can download Notepad ++ which is a very good editor.&lt;br&gt;
However, the best Editor according to me would be &lt;strong&gt;&lt;a href="https://code.visualstudio.com/"&gt;Visual Studio Code&lt;/a&gt;&lt;/strong&gt; which is very lightweight just &lt;strong&gt;45 MB in size&lt;/strong&gt;, and very-very powerful too. It is totally free of cost and runs on &lt;strong&gt;every operating system&lt;/strong&gt; – &lt;strong&gt;windows, linux &amp;amp; mac&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;What should be covered on the Beginners level of JavaScript&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The topics which you should cover are –&lt;/em&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;JavaScript Syntax - &lt;a href="https://www.w3schools.com/js/js_syntax.asp"&gt;JavaScript Syntax&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Variables - &lt;a href="https://www.w3schools.com/js/js_variables.asp"&gt;JavaScript Variables&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Data Types - &lt;a href="https://www.w3schools.com/js/js_datatypes.asp"&gt;JavaScript Data Types&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Operators - &lt;a href="https://www.w3schools.com/js/js_operators.asp"&gt;JavaScript Operators&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Arithmetic Operations - &lt;a href="https://www.w3schools.com/js/js_arithmetic.asp"&gt;JavaScript Arithmetic&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Assignment - &lt;a href="https://www.w3schools.com/js/js_assignment.asp"&gt;JavaScript Assignment&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;JS Output - &lt;a href="https://www.w3schools.com/js/js_output.asp"&gt;JavaScript Output&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Objects - &lt;a href="https://www.w3schools.com/js/js_objects.asp"&gt;JavaScript Objects&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Break &amp;amp; Continue - &lt;a href="https://www.w3schools.com/js/js_break.asp"&gt;JavaScript Break and Continue&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Examples of JavaScript Programmes for Beginners&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I would also like to list some programmes which Beginners should implement.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;1. &lt;strong&gt;Create a program&lt;/strong&gt; where user inputs 2 int values in 2 input boxes and you display the greatest of them on the alert box, when a button is clicked.&lt;/p&gt;

&lt;p&gt;2. &lt;strong&gt;Create a program&lt;/strong&gt; where user enters a number in a text box and you should display its table (upto 10) on a div. The table should be created on the button click event. Also prevent user to enter string on the text box (give appropriate error on alert box when input is string).&lt;/p&gt;

&lt;p&gt;3. &lt;strong&gt;Create a small form&lt;/strong&gt; for Job Application. It should have 5 fields – name, age, education, address and expected salary. These 5 fields should have HTML controls where user enter his/her information, there should be a button which on clicking shown the user information on a div control.&lt;/p&gt;

&lt;p&gt;4. &lt;strong&gt;Finding whether&lt;/strong&gt; a number is &lt;strong&gt;prime number or not&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;5. &lt;strong&gt;Create a calculator&lt;/strong&gt; with a common function – add, subtract, divide &amp;amp; multiply&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;What should be covered on the Intermediate level of JavaScript&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. AJAX&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;a. &lt;a href="https://www.w3schools.com/xml/ajax_intro.asp"&gt;AJAX Introduction&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;b. &lt;a href="https://www.w3schools.com/xml/ajax_database.asp"&gt;AJAX Database&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;c. &lt;a href="https://www.w3schools.com/xml/ajax_applications.asp"&gt;XML Applications&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Functions&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;a. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments"&gt;Arguments object&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;b. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"&gt;Arrow functions&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;c. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"&gt;Default parameters&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;d. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions"&gt;Method definitions&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;e. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters"&gt;Rest parameters&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;f. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get"&gt;getter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;g. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set"&gt;setter&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;h. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function"&gt;async function&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Working with Classes&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;a. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class"&gt;class&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;b. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor"&gt;constructor&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;c. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends"&gt;extends&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;d. &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static"&gt;static&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;J&lt;a href="https://www.w3schools.com/js/js_cookies.asp"&gt;avaScript Cookies&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;What should be covered on the Advanced level of JavaScript&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When you are on the Advanced level, this means you basically know how to work on JavaScript. In the Advanced level you have to deal with integration of JavaScript with applications created on Python, Ruby, PHP, ASP NET etc.&lt;/p&gt;

&lt;p&gt;Here your job would be to make features on JavaScript that communicate efficiently with the Server technology like databases, Python, Ruby, PHP, &lt;a href="https://www.yogihosting.com/category/aspnet-core/"&gt;ASP.NET Core&lt;/a&gt;, etc&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Some examples of advanced features made with JavaScript are:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;1. &lt;strong&gt;Partially updating parts of a web page from database&lt;/strong&gt; every few seconds using AJAX.&lt;/p&gt;

&lt;p&gt;2. &lt;strong&gt;Get and show real-time stock prices&lt;/strong&gt; on the page. You can get the stock price by implementing the API with your JavaScript code.&lt;/p&gt;

&lt;p&gt;3. &lt;strong&gt;Creating interactive feature&lt;/strong&gt; in your website so that conversion rates increases. Example can be an &lt;strong&gt;&lt;a href="https://www.yogihosting.com/jquery-autocomplete/"&gt;autocomplete&lt;/a&gt; &lt;a href="http://www.yogihosting.com/jquery-autocomplete/"&gt;&lt;/a&gt;&lt;/strong&gt;feature which you can create with JavaSript.&lt;/p&gt;

&lt;p&gt;4. &lt;strong&gt;External API implementations&lt;/strong&gt; like &lt;strong&gt;&lt;a href="https://www.yogihosting.com/implement-tmdb-api-with-jquery-ajax/"&gt;TMDB API&lt;/a&gt;&lt;/strong&gt; in your JavaScript and helping users to get details of any movie, actor &amp;amp; series&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;My advice is that don't try to live in a hurry about programming. Learn enough to build a skeleton project and then Google and read for things that you need.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You will need a good patience to learn JavaScript just like this guy:&lt;/p&gt;
&lt;/blockquote&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%2Fszmfdmk9gsng9mpne55z.jpeg" 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%2Fszmfdmk9gsng9mpne55z.jpeg" alt="Image description" width="540" height="719"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope you like my &lt;strong&gt;answer&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Subscribe to our newsletter now and receive your free &lt;strong&gt;JavaScript roadmap&lt;/strong&gt; directly in your inbox. Stay connected with the ever-evolving world of technology—one newsletter at a time! &lt;a href="https://uccodejavascript.ck.page/e27a96062c"&gt;Subscribe here&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>JavaScript Operators Reference</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 22 Nov 2023 11:45:31 +0000</pubDate>
      <link>https://dev.to/umahichristopher/javascript-operators-reference-4fjn</link>
      <guid>https://dev.to/umahichristopher/javascript-operators-reference-4fjn</guid>
      <description>&lt;p&gt;As you may know, operators are used to perform specific mathematical and logical computations on operands.&lt;/p&gt;

&lt;p&gt;We know many operators from school. They are things like addition &lt;code&gt;+&lt;/code&gt;, multiplication &lt;code&gt;*&lt;/code&gt;, subtraction &lt;code&gt;-&lt;/code&gt;, and so on.&lt;/p&gt;

&lt;p&gt;in this article, we’ll start with the simple operators, then concentrate on the javaScript-specific aspects, that are not covered by school arithmetic &lt;/p&gt;

&lt;p&gt;But before we move on, let’s grasp some common terminology.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;em&gt;An operand&lt;/em&gt; – is what operators are applied to. For instance, in the multiplication of &lt;code&gt;5 * 2&lt;/code&gt; there are two operands: the left operand is &lt;code&gt;5&lt;/code&gt; and the right operand is &lt;code&gt;2&lt;/code&gt;. Sometimes, people call these “arguments” instead of “operands”.&lt;/li&gt;
&lt;li&gt;An operator is &lt;em&gt;unary&lt;/em&gt; if it has a single operand. For example, the unary negation &lt;code&gt;-&lt;/code&gt; reverses the sign of a number:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;let x = 1;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;x = - x ;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert( x )&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Maths
&lt;/h2&gt;

&lt;p&gt;The following math operations are supported:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Addition &lt;code&gt;+&lt;/code&gt;,&lt;/li&gt;
&lt;li&gt;Subtraction ``,&lt;/li&gt;
&lt;li&gt;Multiplication ``,&lt;/li&gt;
&lt;li&gt;Division &lt;code&gt;/&lt;/code&gt;,&lt;/li&gt;
&lt;li&gt;Remainder &lt;code&gt;%&lt;/code&gt;,&lt;/li&gt;
&lt;li&gt;Exponentiation &lt;code&gt;*&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The first four are straightforward, while &lt;code&gt;%&lt;/code&gt; and &lt;code&gt;**&lt;/code&gt; need a few words about them.&lt;/p&gt;

&lt;p&gt;Despite its visual similarity, the modulus operator (%), is unrelated to percentages.&lt;/p&gt;

&lt;p&gt;The result of &lt;code&gt;a % b&lt;/code&gt; is the &lt;a href="https://en.wikipedia.org/wiki/Remainder"&gt;remainder&lt;/a&gt; of the integer division of &lt;code&gt;a&lt;/code&gt; by &lt;code&gt;b&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For instance:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert( 5 % 2 ); // 1, the remainder of 5 divided by 2&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert( 8 % 3 ); // 2, the remainder of 8 divided by 3&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert( 8 % 4 ); // 0, the remainder of 8 divided by 4&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;JavaScript Comparison Operators&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.geeksforgeeks.org/javascript-comparison-operators/"&gt;JavaScript Comparison Operators&lt;/a&gt; are crucial for equality or difference comparisons between values. Here is a summary of some important comparison operators:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;OPERATOR NAME&lt;/th&gt;
&lt;th&gt;OPERATION&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Equality(==)&lt;/td&gt;
&lt;td&gt;Compares the equality of two operators.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Inequality(!=)&lt;/td&gt;
&lt;td&gt;Compares inequality of two operators.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Strict Equality(===)&lt;/td&gt;
&lt;td&gt;Compares both value and type of the operand.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Strict Inequality(!==)&lt;/td&gt;
&lt;td&gt;Compares inequality with type.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Greater than(&amp;gt;)&lt;/td&gt;
&lt;td&gt;Checks if the left operator is greater than the right operator.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Greater than or equal(&amp;gt;=)&lt;/td&gt;
&lt;td&gt;Checks if the left operator is greater than or equal to the right operator.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Less than(&amp;lt;)&lt;/td&gt;
&lt;td&gt;Checks if the left operator is smaller than the right operator.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Less than or equal(&amp;lt;=)&lt;/td&gt;
&lt;td&gt;Checks if the left operator is smaller than or equal to the right operator.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  String concatenation with binary
&lt;/h2&gt;

&lt;p&gt;Let’s meet the features of JavaScript operators that are beyond school arithmetics.&lt;/p&gt;

&lt;p&gt;Usually, the plus operator &lt;code&gt;+&lt;/code&gt; sums numbers.&lt;/p&gt;

&lt;p&gt;But, if the binary &lt;code&gt;+&lt;/code&gt; is applied to strings, it merges (concatenates) them:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;let&lt;/code&gt; s &lt;code&gt;=&lt;/code&gt; &lt;code&gt;"my"&lt;/code&gt; &lt;code&gt;+&lt;/code&gt; &lt;code&gt;"string";&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert(&lt;/code&gt;s&lt;code&gt;);&lt;/code&gt; &lt;code&gt;// mystring&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Note that if any of the operands is a string, then the other one is converted to a string too.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert(&lt;/code&gt; &lt;code&gt;'1'&lt;/code&gt; &lt;code&gt;+&lt;/code&gt; &lt;code&gt;2&lt;/code&gt; &lt;code&gt;);&lt;/code&gt; &lt;code&gt;// "12"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;alert(&lt;/code&gt; &lt;code&gt;2&lt;/code&gt; &lt;code&gt;+&lt;/code&gt; &lt;code&gt;'1'&lt;/code&gt; &lt;code&gt;);&lt;/code&gt; &lt;code&gt;// "21"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;See, it doesn’t matter whether the first operand is a string or the second one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Operator precedence
&lt;/h2&gt;

&lt;p&gt;When dealing with expressions that have multiple operators, the order in which they're executed is determined by their precedence – essentially, their default priority.&lt;/p&gt;

&lt;p&gt;For example, in the expression 1 + 2 * 2, multiplication takes precedence over addition. This means multiplication is done first.&lt;/p&gt;

&lt;p&gt;However, if we want to change this default order, we can use parentheses. So, instead of relying on the default precedence, we can write (1 + 2) * 2 to make sure the addition is done first.&lt;/p&gt;

&lt;p&gt;In JavaScript, each operator has a priority number. The one with the higher number goes first. If two operators have the same priority, they're executed from left to right.&lt;/p&gt;

&lt;p&gt;Remember: parentheses always have the final say in determining the order of operations, regardless of the default precedence.&lt;/p&gt;

&lt;p&gt;And just a quick tip: unary operators (like negative sign &lt;strong&gt;&lt;code&gt;-&lt;/code&gt;&lt;/strong&gt;) have a higher priority than their binary counterparts. But don't worry too much about that detail; it's more of an advanced concept.&lt;/p&gt;

&lt;p&gt;Here’s an extract from the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence"&gt;precedence table&lt;/a&gt; (you don’t need to remember this, but note that unary operators are higher than corresponding binary ones):&lt;/p&gt;

&lt;h2&gt;
  
  
  Assignment
&lt;/h2&gt;

&lt;p&gt;Let’s note that an assignment &lt;code&gt;=&lt;/code&gt; is also an operator. It is listed in the precedence table with the very low priority of &lt;code&gt;2&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;That’s why, when we assign a variable, like &lt;code&gt;x = 2 * 2 + 1&lt;/code&gt;, the calculations are done first and then the &lt;code&gt;=&lt;/code&gt; is evaluated, storing the result in &lt;code&gt;x&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bitwise operators
&lt;/h2&gt;

&lt;p&gt;Bitwise operators treat arguments as 32-bit integer numbers and work on the level of their binary representation.&lt;/p&gt;

&lt;p&gt;These operators are not JavaScript-specific. They are supported in most programming languages.&lt;/p&gt;

&lt;p&gt;The list of operators:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AND ( &lt;code&gt;&amp;amp;&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;OR ( &lt;code&gt;|&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;XOR ( &lt;code&gt;^&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;NOT ( &lt;code&gt;~&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;LEFT SHIFT ( &lt;code&gt;&amp;lt;&amp;lt;&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;RIGHT SHIFT ( &lt;code&gt;&amp;gt;&amp;gt;&lt;/code&gt; )&lt;/li&gt;
&lt;li&gt;ZERO-FILL RIGHT SHIFT ( &lt;code&gt;&amp;gt;&amp;gt;&amp;gt;&lt;/code&gt; )&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These operators are used very rarely when we need to fiddle with numbers on the very lowest (bitwise) level. We won’t need these operators any time soon, as web development has little use for them, but in some special areas, such as cryptography, they are useful. You can read the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise_operators"&gt;Bitwise Operators&lt;/a&gt; chapter on MDN when a need arises.&lt;/p&gt;

&lt;h2&gt;
  
  
  Comma
&lt;/h2&gt;

&lt;p&gt;The comma operator &lt;code&gt;,&lt;/code&gt; is one of the rarest and most unusual operators. Sometimes, it’s used to write shorter code, so we need to know it in order to understand what’s going on.&lt;/p&gt;

&lt;p&gt;The comma operator allows us to evaluate several expressions, dividing them with a comma &lt;code&gt;,&lt;/code&gt;. Each of them is evaluated but only the result of the last one is returned.&lt;/p&gt;

&lt;p&gt;Among my favorites are the bitwise operators, even though they might not be everyday tools in web development. There's something intriguing about working at the binary level, especially in specialized areas like cryptography. It's a reminder that JavaScript, with its vast array of operators, has applications beyond the typical web development landscape.&lt;/p&gt;

&lt;p&gt;I encourage you to not just stop here but to continue exploring and experimenting with these operators in your own code. Whether you find elegance in the simplicity of addition or the intricacies of bitwise manipulation, JavaScript has a rich tapestry waiting to be woven by developers like you.&lt;/p&gt;

&lt;p&gt;So, as you sip your virtual coffee and code away, remember that each operator is like a brushstroke on the canvas of your program, contributing to the masterpiece you're creating.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.buymeacoffee.com/christophegw"&gt;buy me a coffee☕&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>programming</category>
    </item>
    <item>
      <title>Introduction to Javascript functions</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Fri, 10 Nov 2023 06:37:49 +0000</pubDate>
      <link>https://dev.to/umahichristopher/javascript-function-5ef3</link>
      <guid>https://dev.to/umahichristopher/javascript-function-5ef3</guid>
      <description>&lt;p&gt;A JavaScript function is like a recipe in a bustling kitchen. It's a block of reusable code that outlines specific tasks. Just like a chef writes down a recipe for a special dish, you give your function a name (e.g., "bakeCake") and define the steps it should follow. For instance, you list the ingredients (flour, sugar, eggs) and actions (mix, bake, frost).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="nx"&gt;javascriptCopy&lt;/span&gt; &lt;span class="nx"&gt;code&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;bakeCake&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 1: Preheat the oven.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 2: Mix flour, sugar, and eggs.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 3: Pour the mixture into a baking pan.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 4: Bake in the oven for 30 minutes.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Step 5: Frost the cake once it's cooled.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nf"&gt;bakeCake&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Call the function to bake a cake&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This code defines the function &lt;strong&gt;&lt;code&gt;bakeCake&lt;/code&gt;&lt;/strong&gt; and outlines the steps to bake a cake. When you want to bake another cake, simply call &lt;strong&gt;&lt;code&gt;bakeCake()&lt;/code&gt;&lt;/strong&gt; again. This saves time and keeps your code organized. Functions in JavaScript can be much more complex and perform a wide range of tasks. This simple example demonstrates the basic idea of how functions work in JavaScript.&lt;/p&gt;

&lt;p&gt;You’ve probably seen arrow functions written a few different ways.&lt;/p&gt;

&lt;p&gt;You can convert the &lt;strong&gt;&lt;code&gt;bakeCake&lt;/code&gt;&lt;/strong&gt; function into an arrow function like this:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;const bakeCake = () =&amp;gt; {&lt;br&gt;
console.log("Step 1: Preheat the oven.");&lt;br&gt;
console.log("Step 2: Mix flour, sugar, and eggs.");&lt;br&gt;
console.log("Step 3: Pour the mixture into a baking pan.");&lt;br&gt;
console.log("Step 4: Bake in the oven for 30 minutes.");&lt;br&gt;
console.log("Step 5: Frost the cake once it's cooled.");&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;bakeCake(); // Call the function to bake a cake&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This arrow function does the same thing as the original &lt;strong&gt;&lt;code&gt;bakeCake&lt;/code&gt;&lt;/strong&gt; function.&lt;/p&gt;

&lt;h3&gt;
  
  
  A Major Difference
&lt;/h3&gt;

&lt;p&gt;Arrow functions are another—more concise—way to write function expressions. However, they don’t have their own binding to the &lt;strong&gt;&lt;code&gt;this&lt;/code&gt;&lt;/strong&gt; keyword.&lt;/p&gt;

&lt;h3&gt;
  
  
  parameters
&lt;/h3&gt;

&lt;p&gt;parameters are variables that are used to pass values to functions. When you define a function, you can specify parameters in the function declaration. Parameters act as placeholders for the values that will be passed to the function when it is called.&lt;/p&gt;

&lt;p&gt;Here's a simple example&lt;/p&gt;

&lt;p&gt;&lt;code&gt;function addNumbers(a, b) {&lt;br&gt;
return a + b;&lt;br&gt;
}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;// Calling the function with arguments 5 and 3&lt;br&gt;
let result = addNumbers(5, 3);&lt;br&gt;
console.log(result); // Output: 8&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In the example, &lt;strong&gt;&lt;code&gt;a&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;b&lt;/code&gt;&lt;/strong&gt; are parameters of the &lt;strong&gt;&lt;code&gt;addNumbers&lt;/code&gt;&lt;/strong&gt; function. When the function is called with &lt;strong&gt;&lt;code&gt;addNumbers(5, 3)&lt;/code&gt;&lt;/strong&gt;, the values &lt;strong&gt;&lt;code&gt;5&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;3&lt;/code&gt;&lt;/strong&gt; are passed as arguments, and they are assigned to the parameters &lt;strong&gt;&lt;code&gt;a&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;b&lt;/code&gt;&lt;/strong&gt; within the function.&lt;/p&gt;

&lt;p&gt;understanding functions and parameters is fundamental to effective JavaScript programming. Functions encapsulate blocks of code, allowing you to reuse and organize your code efficiently. Whether using traditional function expressions or the more concise arrow functions, the choice depends on the context and your specific needs.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Mind-Expanding Read: Head First JavaScript</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 25 Oct 2023 20:07:59 +0000</pubDate>
      <link>https://dev.to/umahichristopher/mind-expanding-read-head-first-javascript-f0</link>
      <guid>https://dev.to/umahichristopher/mind-expanding-read-head-first-javascript-f0</guid>
      <description>&lt;p&gt;I've just wrapped up a captivating journey through "Head First JavaScript" and let me tell you, the insights it provides are nothing short of mind-blowing. If you're into web development or looking to dive deep into JavaScript, this book is an absolute gem.&lt;/p&gt;

&lt;p&gt;It's not just a book; it's an experience. The authors have a unique way of presenting complex concepts that just click. From DOM manipulation to asynchronous programming, everything is covered in a way that makes it all so clear.&lt;/p&gt;

&lt;p&gt;Want to dive in? You can click &lt;a href="https://uccodejavascript.ck.page/602dd6117a"&gt;here&lt;/a&gt; to get the ebook in your inbox.&lt;/p&gt;

&lt;p&gt;Now, what's the last book that stayed with you long after you turned the last page? Let's swap recommendations! 📖&lt;/p&gt;

&lt;p&gt;Share your thoughts in the comments below! 📝&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>discuss</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JavaScript Promises</title>
      <dc:creator>christopher</dc:creator>
      <pubDate>Wed, 18 Oct 2023 17:07:52 +0000</pubDate>
      <link>https://dev.to/umahichristopher/javascript-promises-f0i</link>
      <guid>https://dev.to/umahichristopher/javascript-promises-f0i</guid>
      <description>&lt;p&gt;Imagine that you’re a top singer, and fans ask day and night for your upcoming song.&lt;/p&gt;

&lt;p&gt;To get some relief, you promise to send it to them when it’s published. You give your fans a list. They can fill in their email addresses so that when the song becomes available, all subscribed parties instantly receive it. And even if something goes very wrong, say, a fire in the studio, so that you can’t publish the song, they will still be notified.&lt;/p&gt;

&lt;p&gt;Everyone is happy: you, because the people don’t crowd you anymore, and fans, because they won’t miss the song.&lt;/p&gt;

&lt;p&gt;This is a real-life analogy for things we often have in programming.&lt;/p&gt;

&lt;p&gt;Now, just like our singer's promise to deliver that eagerly awaited song, JavaScript also offers a powerful tool to handle similar situations in programming. Enter Promises.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are Promises in JavaScript?
&lt;/h2&gt;

&lt;p&gt;In the realm of programming, a "Promise" is like a contract. It's an object representing the eventual outcome of an asynchronous operation. This could be something like fetching data from a server, reading a file, or any task that takes a significant amount of time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Three States of a Promise&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Promises in JavaScript have three possible states:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pending:&lt;/strong&gt; This is the initial state. The operation hasn't been completed yet.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Fulfilled:&lt;/strong&gt; The operation was successful, and the Promise now has a result.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Rejected:&lt;/strong&gt; Something went wrong, and the operation couldn't be completed. The Promise has an error.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Just like our singer's promise to deliver the song, JavaScript Promises uphold their commitment, ensuring that you'll eventually get a result, even if there are unexpected hurdles along the way.&lt;/p&gt;

&lt;p&gt;Now, let's dive into the practical aspect of working with Promises in JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating a Promise
&lt;/h2&gt;

&lt;p&gt;A Promise in JavaScript is created using the new Promise() syntax. Here's an example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myPromise = new Promise((resolve, reject) =&amp;gt; {
  // Simulating an asynchronous task
  setTimeout(() =&amp;gt; {
    const success = true;
    if (success) {
      resolve('Task completed successfully'); // Resolve the Promise
    } else {
      reject('Task failed'); // Reject the Promise
    }
  }, 2000); // Simulating a 2-second delay
});

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

&lt;/div&gt;



&lt;p&gt;In this example, we've created a Promise named myPromise. It's constructed with a callback function that takes two parameters:** resolve** and &lt;strong&gt;reject&lt;/strong&gt;. These are functions provided by JavaScript to handle the eventual completion or failure of the asynchronous operation.&lt;/p&gt;

&lt;p&gt;If the operation is successful, we call** resolve** with the &lt;strong&gt;result&lt;/strong&gt;. If there's an error, we call &lt;strong&gt;reject&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Handling Promise States&lt;/strong&gt;&lt;br&gt;
Using .then() and .catch()&lt;/p&gt;

&lt;p&gt;To manage the outcomes of a Promise, we use the &lt;strong&gt;.then() *&lt;em&gt;and *&lt;/em&gt;.catch()&lt;/strong&gt; methods.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;myPromise
  .then((result) =&amp;gt; {
    console.log(result); // Handle the resolved state
  })
  .catch((error) =&amp;gt; {
    console.error(error); // Handle the rejected state
  });

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

&lt;/div&gt;



&lt;p&gt;Here, if the Promise resolves, the first function inside &lt;strong&gt;.then()&lt;/strong&gt; executes. If it rejects, the function inside &lt;strong&gt;.catch()&lt;/strong&gt; handles the error.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Returning Values from Promises&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;You can return values from a resolved Promise using &lt;strong&gt;return.&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myPromise = new Promise((resolve) =&amp;gt; {
  setTimeout(() =&amp;gt; {
    resolve('Returned value');
  }, 2000);
});

myPromise
  .then((result) =&amp;gt; {
    console.log(result); // Output: Returned value
  })
  .catch((error) =&amp;gt; {
    console.error(error);
  });

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

&lt;/div&gt;



&lt;p&gt;In this example, the resolved Promise returns the value &lt;strong&gt;'Returned value'&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In summary, Promises are a fundamental feature in modern JavaScript development, providing an organized and efficient way to handle asynchronous tasks. They allow for smoother execution of code, ensuring that results are managed appropriately, even in the face of unexpected challenges.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Subscribe to our Newsletter&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Stay up-to-date with the latest in JavaScript development! Subscribe to our daily newsletter for insightful articles, tutorials, and news delivered straight to your inbox.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://uccodejavascript.ck.page/e27a96062c"&gt;Subscrible&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
