<?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: C K Sanjay Babu</title>
    <description>The latest articles on DEV Community by C K Sanjay Babu (@sanjaybabu).</description>
    <link>https://dev.to/sanjaybabu</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%2F287588%2F78785f35-ccc3-4db3-8da2-57ef11775c12.jpg</url>
      <title>DEV Community: C K Sanjay Babu</title>
      <link>https://dev.to/sanjaybabu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sanjaybabu"/>
    <language>en</language>
    <item>
      <title>Bun is delicious. But why was it baked?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Sat, 16 Sep 2023 10:39:07 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/bun-is-delicious-but-why-was-it-baked-2fm</link>
      <guid>https://dev.to/sanjaybabu/bun-is-delicious-but-why-was-it-baked-2fm</guid>
      <description>&lt;p&gt;Bun is a brand new javascript runtime designed to be a "drop-in replacement for Node.js". The 3 pillars of Bun according to their website are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Blazing fast performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Elegant &amp;amp; optimized APIs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cohesive DX&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Check out their &lt;a href="https://bun.sh/blog/bun-v1.0"&gt;announcement&lt;/a&gt; for more details.&lt;/p&gt;

&lt;p&gt;The first impressions are great. It has certainly piqued my curiosity and I am going to try it out for sure. But enough about it. This blog isn't to talk about how great Bun is. But to talk about why it was needed in the first place. Even though Bun is a promising new JavaScript runtime, node.js is still the more mature platform with a larger ecosystem. Like all things in life, node.js isn't perfect. So we have had many runtimes come up in recent years to address the cons of node.js. As a result, it is still important to understand the shortcomings of Node.js.&lt;br&gt;&lt;br&gt;
Let's discuss the major disadvantages of node.js. For each of them, let's see&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;What is it?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Why does it occur?&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Where does it occur? with a real-life app example&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Workaround in node.js&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Blocking I/O Operations&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js is designed for non-blocking, event-driven I/O operations. However, it can suffer from performance issues when dealing with a lot of synchronous or blocking I/O operations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
When a Node.js application performs blocking I/O operations, it can cause the event loop to stall, affecting the application's responsiveness and potentially leading to slower request processing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Consider a file upload service that processes and stores large files. If Node.js blocks while reading or writing files, it can slow down the upload process for other users, resulting in a poor user experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Workaround&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
To mitigate blocking I/O issues, you can use asynchronous versions of I/O operations or delegate blocking tasks to worker threads. The effectiveness of these workarounds depends on the specific use case. Using asynchronous I/O operations is recommended for most cases, but for CPU-bound tasks, offloading them to worker threads may be necessary. Be mindful of the added complexity when choosing a workaround.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Single-threaded Nature&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js is single-threaded, which means it operates on a single process. This can be a disadvantage when handling CPU-intensive tasks because it can lead to blocking the event loop.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
In Node.js, when a CPU-intensive task is being processed, it can block the entire event loop, making your application less responsive to other incoming requests or tasks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Imagine a real-time gaming server using Node.js. If a single thread is occupied with a CPU-intensive task, such as collision detection or physics calculations for one player, it could delay updates for all other players, causing lag and a poor gaming experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Workaround&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
One common workaround is to offload CPU-intensive tasks to worker threads or external processes. Node.js provides the &lt;code&gt;worker_threads&lt;/code&gt; module for this purpose. While this can help mitigate the issue by allowing parallel processing of tasks, it adds complexity to your application. Whether to use this workaround depends on your specific use case. If CPU-bound tasks are rare and can be isolated, it may be worth using worker threads. However, if your application frequently faces CPU-bound tasks, you might consider using a different runtime or language more suited to parallel processing.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Limited Multi-core Scalability&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js's single-threaded nature limits its ability to fully utilize multi-core CPUs, which can be a bottleneck for applications that require high levels of concurrency.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Since Node.js primarily runs on a single thread, it can't take full advantage of multi-core CPUs by default. This means that, for CPU-bound tasks, Node.js won't be as efficient as other runtime environments designed for multithreading.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
In applications like video streaming services or data processing pipelines, where handling multiple concurrent requests or tasks is crucial, Node.js may not scale as well as alternatives like Python with multi-threading or Go with goroutines.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Workaround&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
To address limited multi-core scalability, one approach is to use clustering. Node.js provides a built-in module &lt;code&gt;cluster&lt;/code&gt; that allows you to create multiple child processes, each running on a separate core. This can distribute the workload across cores, but it adds complexity and requires careful management. Alternatively, for CPU-bound tasks, consider using a different runtime or language designed for multi-threading or multi-processing, depending on your application's needs.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Memory Consumption&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js applications can consume a significant amount of memory, especially when handling many concurrent connections or large data sets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js uses a V8 JavaScript engine, which loads and compiles JavaScript code into memory. When dealing with a large number of requests, each requiring memory allocation, it can lead to high memory usage.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Consider a social media platform with millions of users. Handling simultaneous connections, user data, and media files can lead to substantial memory consumption, impacting server performance and requiring more resources.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Workaround&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
To manage memory consumption in Node.js, you can implement strategies like connection pooling, optimizing your code for memory efficiency, and scaling horizontally by adding more server instances. Additionally, monitoring tools can help identify memory leaks and bottlenecks. Choosing the appropriate instance size or containerization strategy based on your memory requirements is crucial.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Callback-based Code&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;What?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Callback hell, also known as callback pyramids, can make Node.js code harder to read and maintain due to its reliance on callbacks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Node.js's asynchronous nature often leads to deeply nested callbacks, which can become challenging to manage as code complexity increases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Where?&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
In a real-time chat application, handling multiple concurrent users and messages can result in complex, nested callback structures, making the codebase difficult to understand.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Workaround&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
To address callback-based code, it's advisable to use Promises or async/await, which provide more structured and readable ways to handle asynchronous operations. These constructs are highly effective and should be used to improve code quality and maintainability. However, it may take some effort to refactor existing callback-based code.&lt;/p&gt;

&lt;p&gt;Ryan Dahl, the creator of node.js has also released &lt;a href="https://deno.com/"&gt;Deno&lt;/a&gt; recently marketed as next-gen Javascript runtime which addresses the problems of node.js. It will be interesting to learn how the Bun team has handled these shortcomings and compare how it stacks up against both Deno &amp;amp; node.js. But that's a topic for another day. Adios!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>bunjs</category>
    </item>
    <item>
      <title>The one with my blogging journey</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Wed, 11 May 2022 18:21:58 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/the-one-with-my-blogging-journey-eec</link>
      <guid>https://dev.to/sanjaybabu/the-one-with-my-blogging-journey-eec</guid>
      <description>&lt;h2&gt;
  
  
  Chapter 1 - The one where a random guy faraway eating bat soup affected me!
&lt;/h2&gt;

&lt;p&gt;I am a full-stack developer with 3 years of experience. I have always wanted to share my thoughts and contribute to the tech community which has helped me throughout my journey, but I always had some reason to back out. I even bought this domain (sanjaybabu.dev) back in 2020. But as we are all aware something massive happened in 2020 which disrupted the entire world like never before. I was fortunate enough to survive the pandemic with relatively minimal effects, but it still made enough alterations in my life to suspend this.&lt;/p&gt;

&lt;h2&gt;
  
  
  Chapter 2 - The one where I tried to eat a burger with a spoon!
&lt;/h2&gt;

&lt;p&gt;In 2021, when life started to return to a semblance of normalcy, I started writing, but chose the wrong platform for doing it - Twitter and stopped writing within a week.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why do I feel uncomfortable writing tech articles on Twitter?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Very short character limit. It's not nearly enough to explain any tech topics. No offense to tons of threads out there with some really high-quality content. But personally, I didn't like reading threads and hated writing them even more.&lt;/li&gt;
&lt;li&gt;Inserting images for code snippets. It was cumbersome for me, the writer, and a worse experience for the reader since they cannot copy the code from the image. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But to be fair, these are not twitter's shortcomings. Twitter was not made for this. It was like trying to eat a burger with a spoon. It is possible, but it's just not the &lt;em&gt;right&lt;/em&gt; way!&lt;/p&gt;

&lt;h2&gt;
  
  
  Chapter 3 - The one where I tried to fly without even standing up first!
&lt;/h2&gt;

&lt;p&gt;A few weeks after giving up on being a Twitter blogger, I was working with react for a side project of mine and found that I was not comfortable with a lot of javascript. So I decided to brush up on my javascript and learn the advanced concepts!&lt;/p&gt;

&lt;p&gt;That's when I thought "Why not write a blog about what I am learning?" Looked like a brilliant idea then. I could learn as well as write about it. It was like killing 2 birds with a single stone! Well to be fair, I did kill 2 birds with a single stone. Just not the way I expected. I stopped both learning and blogging. I tried to write a really impressive in-depth blog about each topic in JS like JS Engine, Hoisting, Closures, etc. Being in a slightly demanding full-time job, I got overwhelmed by learning and then documenting it and ended up doing nothing. It was like trying to fly before even learning to stand up first!&lt;/p&gt;

&lt;h2&gt;
  
  
  Chapter 4 - The one where I got on the right path
&lt;/h2&gt;

&lt;p&gt;Now, I was sure about a few things this time due to my past learning experiences(failures!)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Platform - Publish in the personal blog(Powered by Hashnode) and cross-post it in Dev Community. No more Twitter shenanigans. Just tweet the link to the blog if possible.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Content - Should be short. Even if it's a small topic, some simple, useful byte-sized information.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So moving on, One day I was having a casual chat with my friend and he was sharing his recent interview experience and that's when I thought about the next idea for writing again. Writing daily about one atomic concept in java, javascript, or React which may be asked in an interview. It was a perfect fit for me and within 2 days of thinking of this idea, I published my first ever blog post(excluding Twitter) on my personal blog(blog.sanjaybabu.dev) and in DEV.to!&lt;/p&gt;

&lt;p&gt;I started a series called 100 days of Interview Questions. This was a far far greater success than all of my previous experiments. I have so far published daily for 10 consecutive days in this series! I know this is a small sample size, but still, writing had many unexpected positive knock-on effects too.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I started waking up early and my eternally broken sleep cycle was finally fixed.&lt;/li&gt;
&lt;li&gt;I got into "The flow state" which helped me at work too. I was now more focused than ever. &lt;/li&gt;
&lt;li&gt;I got a few good ideas for side projects. &lt;/li&gt;
&lt;li&gt;When updating my bio in dev.to &amp;amp; Hashnode, it asked me for other social media profiles. So I revamped my LinkedIn profile, Twitter profile, and Github profile which I was planning for a long time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This was perfect. Almost! But..., yes! Of course, there is still a 'but'. After about 7 or 8 days, I began to realize the mistake in this chapter too! Can you guess what it is?&lt;/p&gt;

&lt;p&gt;"The 100 days" part!&lt;/p&gt;

&lt;p&gt;I learned another hard lesson that we should not put any pressure like X days, especially when you are just starting out. Now I am excited to work on the above-said side project ideas. I was trying to participate in ongoing writing contests in both dev.to &amp;amp; hashnode. But first I had to write this series because I committed to 100 days. So I have decided 100 days part is not gonna be 100 consecutive days, just 100 posts and taking some breaks in between. Which would have been so simple if I had not mentioned the X days.&lt;/p&gt;

&lt;p&gt;The 100 days of Interview Questions series may not be a great success. But just few weeks ago, I couldn't even imagine a post like this without any preset content and writing from my heart instead! So it did get me on the right path and I will always be grateful for that!&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing thoughts
&lt;/h2&gt;

&lt;p&gt;Last but not the least, the dev.to community. The response(or lack of any) in hashnode was abysmal. Maybe it had something to do with publishing under a custom domain instead of hashnode.&lt;/p&gt;

&lt;p&gt;However, dev.to community literally carried me and made sure I don't stop. Even a few likes or a couple of bookmarks or comments go a long way in motivating the new writers. The thought that even 1 fellow developer found my writing good enough to interact with it really makes my day!&lt;/p&gt;

&lt;p&gt;So if anyone is reading this piece, go ahead and share your blogging journey in the comments! I always love to hear the origin stories!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Day 10 - How is abstraction achieved in java?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Tue, 10 May 2022 17:59:40 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-10-how-is-abstraction-achieved-in-java-1plg</link>
      <guid>https://dev.to/sanjaybabu/day-10-how-is-abstraction-achieved-in-java-1plg</guid>
      <description>&lt;p&gt;Abstraction allows us to hide our implementation. It is one of the key properties of Object-Oriented Programming (OOP). In java, it is implemented using &lt;em&gt;abstract class&lt;/em&gt; &amp;amp; &lt;em&gt;Interface&lt;/em&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Abstract class
&lt;/h2&gt;

&lt;p&gt;We can simply create an abstract class by including the &lt;code&gt;abstract&lt;/code&gt; keyword in front of it. An abstract class cannot be instantiated. So no objects of an abstract class or constructors are allowed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;
&lt;span class="kd"&gt;abstract&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Animal&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="kt"&gt;int&lt;/span&gt; &lt;span class="n"&gt;type&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;abstract&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;move&lt;/span&gt;&lt;span class="o"&gt;();&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Interface
&lt;/h2&gt;

&lt;p&gt;The interface is a blueprint of a class that is used to specify its behavior. Again an interface cannot be instantiated. It can have only abstract functions. It cannot have any function body. So we don't need to specify the &lt;code&gt;abstract&lt;/code&gt; keyword.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;
&lt;span class="kd"&gt;interface&lt;/span&gt; &lt;span class="nc"&gt;Shape&lt;/span&gt;&lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="nc"&gt;String&lt;/span&gt; &lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
    &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;draw&lt;/span&gt;&lt;span class="o"&gt;();&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  When to use Abstract Class?
&lt;/h2&gt;

&lt;p&gt;If we have a use case where "A is a B" consider using an abstract class. &lt;/p&gt;

&lt;p&gt;Eg- &lt;em&gt;Lion&lt;/em&gt; is an &lt;em&gt;Animal&lt;/em&gt; , &lt;em&gt;Neem&lt;/em&gt; is a &lt;em&gt;Tree&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  When to use interface?
&lt;/h2&gt;

&lt;p&gt;If we have a use case where "A can do some activity of B" consider using an abstract class. &lt;/p&gt;

&lt;p&gt;Eg- &lt;em&gt;Scream&lt;/em&gt; can give the sound of an &lt;em&gt;Animal&lt;/em&gt; , &lt;em&gt;Blossom&lt;/em&gt; can give a flower of a &lt;em&gt;Tree&lt;/em&gt;&lt;/p&gt;

</description>
      <category>java</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Day 9 - What is ref in react?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Mon, 09 May 2022 12:45:21 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-9-what-is-ref-in-react-1l61</link>
      <guid>https://dev.to/sanjaybabu/day-9-what-is-ref-in-react-1l61</guid>
      <description>&lt;p&gt;In react, Refs provide a way to access or reference the DOM element from within a parent component. Generally, in react, we would use props for any interactions between the components. We can re-render the component with updated props to modify it. Refs provide a way to imperatively do this change.&lt;/p&gt;

&lt;h2&gt;
  
  
  When to use Refs?
&lt;/h2&gt;

&lt;p&gt;According to react documentation,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Manage focus, text selection, or media playback.&lt;/li&gt;
&lt;li&gt;Perform imperative animations.&lt;/li&gt;
&lt;li&gt;Integrate with third-party DOM libraries.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When not to use Refs?
&lt;/h2&gt;

&lt;p&gt;We use a library like react for its declarative programming style. We just specify this or that needs to be done and the react handles it. But when the ref provides us the flexibility of imperative control. Hence these should not be overused.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;CustomTextInput&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="c1"&gt;// create a ref to store the textInput DOM element&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textInput&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createRef&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;focusTextInput&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;focusTextInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;focusTextInput&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Explicitly focus the text input using the raw DOM API&lt;/span&gt;
    &lt;span class="c1"&gt;// Note: we're accessing "current" to get the DOM node&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;current&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;focus&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// tell React that we want to associate the &amp;lt;input&amp;gt; ref&lt;/span&gt;
    &lt;span class="c1"&gt;// with the `textInput` that we created in the constructor&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;
          &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt;
          &lt;span class="na"&gt;ref&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textInput&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;input&lt;/span&gt;
          &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt;
          &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"Focus the text input"&lt;/span&gt;
          &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;focusTextInput&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

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

&lt;/div&gt;



</description>
      <category>react</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Day 8- Undefined, Not defined &amp; null in javascript</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Sun, 08 May 2022 13:16:47 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-8-undefined-not-defined-null-in-javascript-e9a</link>
      <guid>https://dev.to/sanjaybabu/day-8-undefined-not-defined-null-in-javascript-e9a</guid>
      <description>&lt;p&gt;Javascript handles values that don't or shouldn't exist by the use of undefined, not defined &amp;amp; null keywords. These may seem similar, but there are subtle differences between them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Undefined
&lt;/h2&gt;

&lt;p&gt;In JS, &lt;code&gt;undefined&lt;/code&gt; is assigned to any variable that has been declared but not yet assigned.&lt;/p&gt;

&lt;p&gt;There are many reasons why we get undefined. A few of them are :&lt;/p&gt;

&lt;h3&gt;
  
  
  Hoisting
&lt;/h3&gt;

&lt;p&gt;All variables declared with &lt;code&gt;var&lt;/code&gt; are hoisted in js. So we are able to access them even before declaration but they will return &lt;code&gt;undefined&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/sanjaybabu/day-1-what-is-hoisting-and-how-to-prevent-it-in-javascript-2o84"&gt;Check here for more details about hoisting&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  When a variable is declared but accessed before its initialized
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;count&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//undefined&lt;/span&gt;

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  When a method without a return value is assigned.
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello&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="nx"&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;Value of str: &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="cm"&gt;/*
Output:
Hello
Value of str: undefined
*/&lt;/span&gt;

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Not defined
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;not defined&lt;/code&gt; error is thrown when a variable is not declared at all.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&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="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/*
Output:
undefined
Uncaught ReferenceError: b is not defined
 */&lt;/span&gt;

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

&lt;/div&gt;



&lt;p&gt;Note: Again for variable &lt;code&gt;a&lt;/code&gt; we got undefined and not an error because of hoisting.&lt;/p&gt;

&lt;h2&gt;
  
  
  null
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;null&lt;/code&gt; is an object that can we used to explicitly an empty value.&lt;/p&gt;

&lt;p&gt;The difference between &lt;code&gt;null&lt;/code&gt; &amp;amp; &lt;code&gt;undefined&lt;/code&gt; is that null is an object whereas type of &lt;code&gt;undefined&lt;/code&gt; is itself undefined.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Day 7- Is Java pass by value or reference?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Sat, 07 May 2022 16:55:26 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-7-is-java-pass-by-value-or-reference-22gf</link>
      <guid>https://dev.to/sanjaybabu/day-7-is-java-pass-by-value-or-reference-22gf</guid>
      <description>&lt;p&gt;Again Java passes variables in functions similar to js. Check out the detailed explanations here.&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/sanjaybabu" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yagxbe7C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--1Qn5Mqad--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/287588/78785f35-ccc3-4db3-8da2-57ef11775c12.jpg" alt="sanjaybabu"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/sanjaybabu/day-6-is-javascript-pass-by-value-or-pass-by-reference-1p19" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Day-6 - Is javascript pass by value or pass by reference?&lt;/h2&gt;
      &lt;h3&gt;C K Sanjay Babu ・ May 6 ・ 1 min read&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#beginners&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Pass by Value
&lt;/h2&gt;

&lt;p&gt;All primitive data types are passed by value in java.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class passByValue {
    public static void main(String args[]) {
        Integer i=0;
        increment(i);
        System.out.println("Value of i outside the function: "+i);
    }
    static void increment(Integer i){
        i++;
        System.out.println("Value of i inside the function: "+i); 
    }
}

/*
Output : 
Value of i inside the function: 1
Value of i outside the function: 0
*/

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Pass by Reference
&lt;/h2&gt;

&lt;p&gt;Objects &amp;amp; arrays are pass by reference in java&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class PassByValue {
  public static void main(String[] args) {
    Integer[] array = new Integer[2];
    array[0]=2;
    array[1]=3;
    add(array);
    System.out.println("Result from main: " +(array[0]+ array[1]));
  }

  private static void add(Integer[] array){
    array[0] = 10;
    System.out.println("Result from method: " +(array[0]+ array[1]));
  }
}

/*
Output:
Result from method: 13
Result from main: 13

*/

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

&lt;/div&gt;



</description>
      <category>java</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Day-6 - Is javascript pass by value or pass by reference?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Fri, 06 May 2022 17:20:49 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-6-is-javascript-pass-by-value-or-pass-by-reference-1p19</link>
      <guid>https://dev.to/sanjaybabu/day-6-is-javascript-pass-by-value-or-pass-by-reference-1p19</guid>
      <description>&lt;p&gt;It's both! Let's find out how.&lt;/p&gt;

&lt;h2&gt;
  
  
  Pass by value
&lt;/h2&gt;

&lt;p&gt;Whenever a function is called, if the value of the variable is passed directly as the parameter, then the changes made to that parameter are not propagated beyond the function.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;All primitive data types in javascript are passed by value.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var a=10;
console.log("Value of 'a' before method called: "+a);
add(a);
function add(a){
   a++;
   console.log("Value of 'a' inside the method call: "+a);
}

console.log("Value of 'a' outside the method called: "+a);

/*
Output:
Value of 'a' before method called: 10
Value of 'a' inside the method call: 11
Value of 'a' outside the method called: 10
 */

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  Pass by Reference
&lt;/h2&gt;

&lt;p&gt;Whenever a function is called, if the address of the variable is passed as a parameter directly instead of making a copy of it and just sending the value alone, then it's pass by reference. As we are still referencing the address inside the function, any change made to the variable inside the function will be propagated throughout the program.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Objects and Arrays are passed by reference in javascript&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Example
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var user={
   id:1,
   firstName:"John",
   lastName:"Doe"
}

console.log("Value of 'user' before method called: "+user.firstName+" "+user.lastName);

print(user);

function print(user){
   user.lastName="Wick";
   console.log("Value of 'user' inside the method call: "+user.firstName+" "+user.lastName);
}

console.log("Value of 'user' outside the method call: "+user.firstName+" "+user.lastName);

/*
Output:
Value of 'user' before method called: John Doe
Value of 'user' inside the method call: John Wick
Value of 'user' outside the method call: John Wick
*/

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

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Day 5 - Why is java not a Pure Object-Oriented language?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Thu, 05 May 2022 03:02:17 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-5-why-is-java-not-a-pure-object-oriented-language-1moc</link>
      <guid>https://dev.to/sanjaybabu/day-5-why-is-java-not-a-pure-object-oriented-language-1moc</guid>
      <description>&lt;p&gt;For any programming language to be called a pure object-oriented language, it should satisfy all the 7 rules below :&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Encapsulation/Data Hiding&lt;/li&gt;
&lt;li&gt;Inheritance&lt;/li&gt;
&lt;li&gt;Polymorphism&lt;/li&gt;
&lt;li&gt;Abstraction&lt;/li&gt;
&lt;li&gt;All predefined types are objects&lt;/li&gt;
&lt;li&gt;All user-defined types are objects&lt;/li&gt;
&lt;li&gt;All operations performed on objects must be only through methods exposed to the objects.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Java fails the rule no-5 and 7.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why java fails the "All predefined types are objects" rule?
&lt;/h2&gt;

&lt;p&gt;We have primitive data types - &lt;code&gt;boolean, byte, char, int, float, double, long, short&lt;/code&gt; which are predefined types but not objects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why java fails the "All operations performed on objects must be only through methods exposed at the objects" rule?
&lt;/h2&gt;

&lt;p&gt;It's due to the &lt;code&gt;static&lt;/code&gt; keyword. When a variable is declared as static, they become class-level elements instead of instance variables. These static variables are accessible directly with the class name and can be used without the objects.&lt;/p&gt;

</description>
      <category>java</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>Day 4 -Difference between slice() and splice() in javascript!</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Wed, 04 May 2022 10:33:40 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-4-difference-between-slice-and-splice-in-javascript-309n</link>
      <guid>https://dev.to/sanjaybabu/day-4-difference-between-slice-and-splice-in-javascript-309n</guid>
      <description>&lt;p&gt;&lt;code&gt;slice()&lt;/code&gt; and &lt;code&gt;splice()&lt;/code&gt; are both methods on javascript arrays!&lt;/p&gt;

&lt;h2&gt;
  
  
  slice()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;slice()&lt;/code&gt; copies the items from the original array and returns the elements the selected elements. The original array remains unaffected when using &lt;code&gt;slice()&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Syntax
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;slice(start,end)

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  Params
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;start&lt;/code&gt; - specifies the index to start the slicing. The indexing starts from 0. If negative value n is specified, then the last n values will be retrieved.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;end&lt;/code&gt; - specified the index till which elements are to be selected. Not inclusive. If negative value n is specified, then the last n values will be excluded.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Examples
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let a=[0,1,2,3,4,5,6,7,8,9];

//Return the elements from 3rd index till 6th index
console.log(a.slice(3,6)); //returns [3, 4, 5]

//Return all the elements from 2nd index
console.log(a.slice(2)); // returns [2, 3, 4, 5, 6, 7, 8, 9]

//Return the last 3 elements
console.log(a.slice(-3)); // returns [7, 8, 9]

//Return all the elements from 1st index except the last 3 elements
console.log(a.slice(1,-3));// returns [1, 2, 3, 4, 5, 6]

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

&lt;/div&gt;



&lt;h2&gt;
  
  
  splice()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;splice()&lt;/code&gt; removes the items from the original array and then returns the selected elements. The contents of the original array are also affected when using &lt;code&gt;splice()&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Syntax
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;splice(start,delete-count, item1, item 2, .... n)

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

&lt;/div&gt;



&lt;h4&gt;
  
  
  Params
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;start&lt;/code&gt; - specifies the index to start the splicing. The indexing starts from 0. If negative value n is specified, then the last n values will be retrieved.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;delete-count&lt;/code&gt; - It's the no. of items that need to be deleted from the original array and returned.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;item1, item 2, .... n&lt;/code&gt; - It's the new items to be added starting from the &lt;code&gt;start&lt;/code&gt; index.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Examples
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let a=[0,1,2,3,4,5,6,7,8,9];

//Delete the elements from 3rd index till 6th index
console.log(a.splice(3,3)); //returns [3, 4, 5] and a=[0, 1, 2, 6, 7, 8, 9]

//Delete 4 elements from 2nd index
let a=[0,1,2,3,4,5,6,7,8,9];
console.log(a.splice(2,4)); //returns [2, 3, 4, 5] and a=[0, 1, 6, 7, 8, 9]

//Delete all the elements from 2nd index
let a=[0,1,2,3,4,5,6,7,8,9];
console.log(a.splice(2)); // returns [2, 3, 4, 5, 6, 7, 8, 9] and a=[0, 1]

//Delete the last 3 elements
let a=[0,1,2,3,4,5,6,7,8,9];
console.log(a.splice(-3)); // returns [7, 8, 9] and a=[0, 1, 2, 3, 4, 5, 6]

//Delete 2 elements from the 5th index and add 2 new elements
let a=[0,1,2,3,4,5,6,7,8,9];
console.log(a.splice(5,2,"five","six")); // returns [5, 6] and a=[0, 1, 2, 3, 4, 'five', 'six', 7, 8, 9]

//No deletion. Just add 2 new elements before the 6th index
let a=[0,1,2,3,4,5,6,7,8,9];
console.log(a.splice(6,0,5.1,5.2)); // returns [] and a=[0, 1, 2, 3, 4, 5, 5.1, 5.2, 6, 7, 8, 9]

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

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Day 3 - What are fragments in React?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Tue, 03 May 2022 04:15:22 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-3-what-are-fragments-in-react-4n11</link>
      <guid>https://dev.to/sanjaybabu/day-3-what-are-fragments-in-react-4n11</guid>
      <description>&lt;p&gt;As you may already know, A React component can return only 1 node. So if we had multiple elements to return, then we have to simply wrap a &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; around them and return a single element like below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;render() {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;LeftItem /&amp;gt;
      &amp;lt;RightItem /&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

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

&lt;/div&gt;



&lt;p&gt;This affected the sematic nature of HTML and resulted in react apps having lots of unwanted nested components. So in order to solve this, &lt;em&gt;Fragments&lt;/em&gt; was introduced in react v16.2. Fragments are syntax that allows a React component to return multiple elements without wrapping them in an extra DOM node.&lt;/p&gt;

&lt;p&gt;Now we instead of adding &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; like before, we can use &lt;code&gt;&amp;lt;React.Fragment&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;render() {
  return (
    &amp;lt;React.Fragment&amp;gt;
      &amp;lt;LeftItem /&amp;gt;
      &amp;lt;RightItem /&amp;gt;
    &amp;lt;React.Fragment&amp;gt;
  );
}

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

&lt;/div&gt;



&lt;p&gt;Note that there is also a shorthand way to create Fragments. We can simple use empty tags &lt;code&gt;&amp;lt;&amp;gt;&lt;/code&gt; &amp;amp; &lt;code&gt;&amp;lt;/&amp;gt;&lt;/code&gt; instead of &lt;code&gt;&amp;lt;React.Fragment&amp;gt;&lt;/code&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Day 2 - Differences between checked &amp; unchecked exceptions in java!</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Mon, 02 May 2022 03:19:46 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-2-differences-between-checked-unchecked-exceptions-in-java-9bo</link>
      <guid>https://dev.to/sanjaybabu/day-2-differences-between-checked-unchecked-exceptions-in-java-9bo</guid>
      <description>&lt;h2&gt;
  
  
  Checked Exceptions
&lt;/h2&gt;

&lt;p&gt;These are checked during compile time itself. Checked Exceptions should be either handled or the same should be notified with the throws keyword.&lt;/p&gt;

&lt;p&gt;Example - SQLException, IOException.&lt;/p&gt;

&lt;h2&gt;
  
  
  Unchecked Exceptions
&lt;/h2&gt;

&lt;p&gt;These exceptions are checked during runtime. The classes that inherit the RuntimeException fall under unchecked exceptions. It's not necessary to handle these exceptions.&lt;/p&gt;

&lt;p&gt;Example - NullPointerException, ArrayIndexOutOfBoundsException.&lt;/p&gt;

</description>
      <category>java</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Day 1 - What is hoisting and how to prevent it in javascript?</title>
      <dc:creator>C K Sanjay Babu</dc:creator>
      <pubDate>Sun, 01 May 2022 09:47:41 +0000</pubDate>
      <link>https://dev.to/sanjaybabu/day-1-what-is-hoisting-and-how-to-prevent-it-in-javascript-2o84</link>
      <guid>https://dev.to/sanjaybabu/day-1-what-is-hoisting-and-how-to-prevent-it-in-javascript-2o84</guid>
      <description>&lt;h2&gt;
  
  
  What is hoisting?
&lt;/h2&gt;

&lt;p&gt;The default behavior of the javascript interpreter is to move variable and function declarations to the top. This behavior is called Hoisting. &lt;/p&gt;

&lt;p&gt;Take a look at the below code snippet!&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(x);
console.log(announce());
var x = 100;
function announce() {
  console.log('Hello World');
}

// Output :
// undefined
// Hello World
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that, we are calling the variable 'x' and function 'announce' even before we are declaring it. In most languages, this would result in an error! &lt;br&gt;
But it works in javascript due to hoisting!&lt;br&gt;
Now coming to the output itself, we see that the value of the variable is not printed but the function is executed properly. This is because, for variables, only the declarations are hoisted not the initialization. So we don't get an error while calling the variable before its declaration statement. But at the same time, we won't get the initialized value either. &lt;/p&gt;

&lt;p&gt;As you can see, clearly hoisting makes our code unpredictable because, even if a variable is assigned a value only once, its value is not the same throughout. Hence many developers don't prefer hoisting.&lt;/p&gt;
&lt;h2&gt;
  
  
  How to prevent hoisting?
&lt;/h2&gt;

&lt;p&gt;Javascript interpreter will hoist lines starting with&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
  and

 ```function```


We can prevent hoisting by using

 ```let```

 or

 ```const```

 keywords instead like below.


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

&lt;/div&gt;

&lt;p&gt;let x = 100;&lt;br&gt;
let announce=function() {&lt;br&gt;
  console.log('Hello World');&lt;br&gt;
}&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

 Hoisting will not take place for the above code since they don't start with

 ```var```

  or

 ```function```

. So if we try to access the variable 'x' or the function 'announce' before the declaration, we will get a

 ```not defined```

 error.






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

&lt;/div&gt;

</description>
      <category>javascript</category>
      <category>interview</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
