<?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: Insha Ramin</title>
    <description>The latest articles on DEV Community by Insha Ramin (@insha).</description>
    <link>https://dev.to/insha</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%2F638808%2F0c40791f-8d8c-4d85-b62c-1ad109a71fd1.png</url>
      <title>DEV Community: Insha Ramin</title>
      <link>https://dev.to/insha</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/insha"/>
    <language>en</language>
    <item>
      <title>Network Built for people who code 💻</title>
      <dc:creator>Insha Ramin</dc:creator>
      <pubDate>Thu, 30 Jun 2022 11:53:01 +0000</pubDate>
      <link>https://dev.to/insha/network-built-for-people-who-code-2aab</link>
      <guid>https://dev.to/insha/network-built-for-people-who-code-2aab</guid>
      <description>&lt;p&gt;The shift to a future that is dominated by digital technology is currently accelerating. To quickly adapt and create better, faster, more efficient, and more innovative products and services in the event of a pandemic in 2020, digital transformation has become a must for every business, idea, and corporation.&lt;/p&gt;

&lt;p&gt;The resulting outcome is that the demand for people that can code is now at its highest ever. At the same time, the number of people transitioning into the tech industry has also been rapidly increasing.&lt;/p&gt;

&lt;p&gt;Nevertheless, the way developers are portrayed, as well as how we engage and discover new prospects, is utterly fragmented. Nothing is designed with our unique workflows and demands in mind; instead, it has a low NPS and inconsistent design. &lt;/p&gt;

&lt;h3&gt;
  
  
  How will Showwcase help tech workers transition into this era?
&lt;/h3&gt;

&lt;p&gt;As this future takes shape, our goal is to build a completely new way to represent who we are, build connections with our communities, and gain access to these future-of-work opportunities. &lt;/p&gt;

&lt;p&gt;Showwcase is a professional network built for coders to connect, build communities, and find new opportunities. &lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Community&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The ability to interact, develop, encourage one another, and advance one's career is greatly enhanced by being a part of a community.&lt;/p&gt;

&lt;p&gt;Getting engaged with the community can help you develop skills in the areas you're interested in, even if the majority of tech workers are passionate about their careers and the technology they use.&lt;/p&gt;

&lt;p&gt;No matter how niche your interests are, you'll likely discover a community group at Showwcase to share knowledge, experiences, and interests with.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fptk22qhzv0roedaiwukp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fptk22qhzv0roedaiwukp.png" alt="Image description" width="800" height="459"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Shows&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;My life has transformed because of content creation. Content is all about creating value for your audience and building meaningful relationships. The more that you educate and provide value for your target audience, the more trust you can build over time.&lt;/p&gt;

&lt;p&gt;At the end of the day, your audience isn’t hanging around unless they’re getting something from you.&lt;/p&gt;

&lt;p&gt;You can share your knowledge and experiences with other developers through Showwcases' Shows, which are blog articles. &lt;/p&gt;

&lt;p&gt;When you sit down to write a blog post, an email series or create the outline for a video/podcast, you have to put yourself in the shoes of an expert who knows what they’re talking about.&lt;/p&gt;

&lt;p&gt;Shows can also be, in addition to written content:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Products - AMAs - Repos - Podcasts - Videos&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;&lt;strong&gt;Circles&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;What are Circles on Showwcase?&lt;/p&gt;

&lt;p&gt;Who we've worked with as developers leave a thumbprint of reference for what we've done and serve as a jumping-off point for what we intend to achieve next. All of those persons can now be added to your Circle.&lt;/p&gt;

&lt;p&gt;Your network is your Circle. They are people you have worked and partnered with, people you can vouch for.&lt;/p&gt;

&lt;p&gt;You can find members of your Circle, your Circle's Circle, and other people who are willing to work together on new projects, ideas, and gigs on the Circles website. To make finding people easier, people are categorised by either their Tech Stack or their Profile Tags.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Jobs&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Find your next developer job on Showwcase!&lt;/p&gt;

&lt;p&gt;If you're looking for your next role, make sure you've got your Showwcase profile filled up!&lt;/p&gt;

&lt;p&gt;Once you're on the &lt;strong&gt;Jobs&lt;/strong&gt; page, all jobs are ordered based on your profile and how well they match your preferences. Just keep in mind that changing your choices NEVER HIDE JOBS. It merely arranges things more wisely. You can always utilise the filters to eliminate jobs that are not of interest to you.&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;Resume 2.0&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A good resume can get you an edge over your competitors. &lt;/p&gt;

&lt;p&gt;Your most appealing abilities and experiences are highlighted in a well-structured Resume for potential employers. This enables them to advance to the most qualified applicant. For this reason, it's crucial to make sure your most recent experiences and talents are represented in your resume.&lt;/p&gt;

&lt;p&gt;More significantly, a Resume should explain to employers what you add to the company, not just your abilities and expertise.&lt;/p&gt;

&lt;p&gt;At Showwcase, we offer Resume2.0, which includes everything you need to highlight in your resume to land the job of your dreams.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;As software becomes a pillar of every industry, it is nearly inescapable that coders will be essential to every business. Large areas have already begun to exhibit this trend.&lt;br&gt;
Developers are advancing up the organisational stack, into positions in product development, design, customer service, dependability, hiring, and executive management. &lt;/p&gt;

&lt;p&gt;You are entirely free to choose how you wish to participate with the network at Showwcase. You control who is a part of your network. You choose the information you wish to view. You control the communications that are sent to you.&lt;/p&gt;

&lt;p&gt;We're constantly bringing up features that developers require. Your support is all that we seek. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.showwcase.com" rel="noopener noreferrer"&gt;👉🏻Sign up now👈🏻  &lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>career</category>
      <category>community</category>
    </item>
    <item>
      <title>Big Boom in Conversational AI global market!</title>
      <dc:creator>Insha Ramin</dc:creator>
      <pubDate>Wed, 10 Nov 2021 16:26:17 +0000</pubDate>
      <link>https://dev.to/insha/big-boom-in-conversational-ai-global-market-1el3</link>
      <guid>https://dev.to/insha/big-boom-in-conversational-ai-global-market-1el3</guid>
      <description>&lt;p&gt;Companies across various industries are quickly adopting conversational AI for business-specific purposes.&lt;/p&gt;

&lt;p&gt;Let’s explore what industries use conversational AI and what real-world problems they solve with it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbfysdoj7hzukemxdhsg0.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbfysdoj7hzukemxdhsg0.gif" alt="tenor (2).gif" width="220" height="220"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  ⚡What does Conversational AI mean?
&lt;/h1&gt;

&lt;p&gt;It is a set of technologies that let a machine understand what is being said, evaluate what would be a contextually relevant response, and reply in a human-like manner.&lt;/p&gt;

&lt;p&gt;It uses a large volume of data, machine learning, and natural language processing to help imitate human interactions, recognize speech and text inputs and translate their meanings across various languages.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;⚡You may have probably heard of the terms 'Conversational AI' and 'chatbots' being thrown around.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Unfortunately, the two technologies are all too often confusing; the terms are used interchangeably. However, both of them are different!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let's dig a little deeper:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Conversational AI has principle components that enable efficient, automated communication via text and speech by understanding customer intent, and responding in a human-like manner.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Whereas, in chatbots, you need to type the exact keyword required to receive the appropriate response. Unlike conversational AI they do not use NLP or dialog management or machine learning to improve over time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The most common way to interact with chatbots is via text. For example, through messaging apps or chat interfaces.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Whereas some of the examples of Conversational AI are Amazon Alexa, Apple's Siri, and Google Home.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;By using speech recognition, it understands the spoken language of your customers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Natural language processing (NLP) helps it understand and analyze human language, be it written or spoken.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;(NLU) helps it understand what the customers need to be done.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚡To recognize human speech and be able to talk like a human a set of machine learning (ML), natural language processing (NLP), text-to-speech (TTS), speech-to-text (STT), and named entity recognition (NER) tools are used.&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚡Benefits of conversational AI
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Increased productivity and effectiveness.&lt;/li&gt;
&lt;li&gt;Lower operating costs&lt;/li&gt;
&lt;li&gt;Increased customer satisfaction and experience&lt;/li&gt;
&lt;li&gt;Increased employee satisfaction&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Do you know lower operating costs Businesses spend over $1 trillion on customer service calls? 🤯&lt;/p&gt;

&lt;p&gt;Like WTF $1 Trillion????&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy59vhwllp1rlbbp3ytpv.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy59vhwllp1rlbbp3ytpv.gif" alt="tenor (3).gif" width="220" height="220"&gt;&lt;/a&gt;&lt;br&gt;
Smart businesses are transitioning to Conversational AI as: &lt;/p&gt;

&lt;p&gt;It can lower that cost drastically!&lt;/p&gt;

&lt;p&gt;It is able to handle hundreds of calls simultaneously.&lt;/p&gt;

&lt;p&gt;Conversational AI automates repetitive processes, letting employees respond to more complex calls that require human creativeness. &lt;/p&gt;

&lt;p&gt;The AI is available to take and make calls 24/7, has no sick days, is able to handle requests and answer questions no worse than a human can.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Are you smart enough to make a transition? 😉&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;What industries use conversational voice AI?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Automotive industry&lt;/li&gt;
&lt;li&gt;Banking industry&lt;/li&gt;
&lt;li&gt;Loan application automation&lt;/li&gt;
&lt;li&gt;Healthcare industry&lt;/li&gt;
&lt;li&gt;Automated hotel operations&lt;/li&gt;
&lt;li&gt;Payment processing&lt;/li&gt;
&lt;li&gt;Logistics industry&lt;/li&gt;
&lt;li&gt;Feedback surveys&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚡Conversational AI automation is easy - and mega efficient&lt;/p&gt;

&lt;p&gt;◽Happy customers mean loyal customers that are ready to support your business financially for a long period of time. That’s why companies are obsessed with having superior customer support.&lt;/p&gt;

&lt;p&gt;◽Employing conversational AI makes companies even more customer-centric.&lt;/p&gt;

&lt;p&gt;◽Most of the customers’ inquiries can be solved by AI in a prompt and personalized manner.&lt;/p&gt;

&lt;p&gt;Sounds interesting right? 🔥&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You must be thinking but how can we learn Insha?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Let me tell you I'm a JavaScript developer and have no background in AI/ML. But I had a keen interest in knowing how Conversational AI works. &lt;/p&gt;

&lt;p&gt;So how do I get familiar with this technology? &lt;/p&gt;

&lt;p&gt;The answer is Easy peasy -  &lt;a href="https://dasha.ai/en-us" rel="noopener noreferrer"&gt;Dasha&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;I came across &lt;a href="https://twitter.com/DashaAI_" rel="noopener noreferrer"&gt;@DashaAI_&lt;/a&gt;that lets you build a Conversational AI app with just a basic knowledge of JavaScript! &lt;/p&gt;

&lt;p&gt;I was like no it's a lie!&lt;br&gt;
How can someone build an AI app without any prior knowledge of AI?&lt;/p&gt;

&lt;p&gt;After going through their documentation and blogs I made my first conversation AI app with &amp;gt;20 lines of code. &lt;/p&gt;

&lt;p&gt;The conversational AI global market size is expected to grow from $4.8b up to $13.9b by 2025. 💪&lt;/p&gt;

&lt;h5&gt;
  
  
  I hope you found the article insightful and informative. If you got any questions feel free to ask! I'll be more than happy to address your queries!
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Let's connect on  &lt;a href="https://twitter.com/Insharamin" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; . I share my learnings on JavaScript, Web Development, and Blogging on the platform.
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fndryy55rmsnu8m1zikcr.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fndryy55rmsnu8m1zikcr.gif" alt="tenor (4).gif" width="220" height="361"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>javascript</category>
      <category>machinelearning</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JavaScript Arrays and its Methods.</title>
      <dc:creator>Insha Ramin</dc:creator>
      <pubDate>Fri, 24 Sep 2021 12:29:15 +0000</pubDate>
      <link>https://dev.to/insha/javascript-array-and-its-methods-432k</link>
      <guid>https://dev.to/insha/javascript-array-and-its-methods-432k</guid>
      <description>&lt;h3&gt;
  
  
  Abstract
&lt;/h3&gt;

&lt;p&gt;JavaScript provides a data type specifically for storing an ordered collection of values. It is called an array and is written as a list of values between square brackets, separated by commas.&lt;br&gt;
Arrays are zero-indexed. It can hold many values under a single name, and you can access the values by referring to an index number.&lt;/p&gt;
&lt;h3&gt;
  
  
  Scope of Article
&lt;/h3&gt;

&lt;p&gt;This article defines a special type of data structure in JavaScript named Array and a number of its properties that hold function values.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Definition&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An array is like a big container into which we can store elements of any type and then later reference them. &lt;br&gt;
An Array is written as a list of values between square brackets, separated by commas.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const friends= ["Mike"," Steven","Elena","Bonnie"];
console.log(friends);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can store values of any type like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let arr= ["Orange", {name: "Insha"}, true, function(){alert('hello');}];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;JavaScript, Arrays are zero-indexed. That basically means the first element of an array is at position 0.&lt;/p&gt;

&lt;p&gt;You might be thinking How to access an Array Element?&lt;/p&gt;

&lt;p&gt;You can easily access an array element by referring to the index number.&lt;/p&gt;

&lt;p&gt;Let’s suppose we want to access elements of the friends array. This is how we’ll do that:&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(friends[0]); // Mike
console.log(friends[2]); // Elena
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note- The notation for getting at the elements inside an array also uses square brackets.&lt;/p&gt;

&lt;h3&gt;
  
  
  There are multiple ways to manipulate an array like :
&lt;/h3&gt;

&lt;p&gt;-We can change the elements of an array&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;friends[2]= "John";
console.log(friends); // ["Mike"," Steven","John","Bonnie"];

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

&lt;/div&gt;



&lt;p&gt;-Or add a new one to the array:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;friends[4]= "Insha"; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The length property of an array tells us how many elements it has.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let fruits = ["Apple", "Orange", "Plum"];

console.log( fruits.length ); // 3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Moving forward to Array Methods.
&lt;/h3&gt;

&lt;p&gt;Array methods are built-in functions in JavaScript that you apply to arrays. Each method has a particular function that changes or manipulates the array.&lt;/p&gt;

&lt;p&gt;Methods to add elements.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Push&lt;/em&gt; - It adds an element to the end of an array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const friends= ["Mike"," Steven","Elena","Bonnie"];
friends.push("John");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;push() is basically a function as we can see the parenthesis(). Since push is a function here so it can even return something Right?&lt;/p&gt;

&lt;p&gt;As we pass arguments in a function we did the same here. We passed ‘John’ as an argument and it returned a value here and that is the length.&lt;/p&gt;

&lt;p&gt;To see if it works. Let’s log in to the console:&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(friends);
console.log(friends.length); //5
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;Unshift&lt;/em&gt; - It adds the element to the beginning of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;friends.unshift("Ronnie");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And if we log in to the console we’ll see that Ronnie is added to the beginning of the friends array.&lt;/p&gt;

&lt;h4&gt;
  
  
  Methods to Remove Elements:
&lt;/h4&gt;

&lt;p&gt;&lt;em&gt;Pop&lt;/em&gt;- It removes the last element of an array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;friends.pop();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the pop() method, we don’t need to pass any argument. &lt;br&gt;
If we do this twice it will remove 2 elements from the end.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;shift&lt;/em&gt;-  It removes the first element of an array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;friends.shift();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note-  pop() and shift() method does not return the length of an array instead they return the element that’s removed.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;slice&lt;/em&gt;-  It selects a chunk of an array &amp;amp; returns a NEW array with a copy of all elements selected from the start index to the end index(not including the end). &lt;br&gt;
It doesn’t mutate the original array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Let arr= [“a”, “b”, “c”, “d”, “e];
console.log(arr.slice(2,4)); // ["c", "d"]
console.log(arr.slice(2)); //  ["c", "d", "e"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note- When the end parameter is not declared, it copies all the elements from the starting index till the end.&lt;/p&gt;

&lt;p&gt;We can also use the slice method to create a shallow copy of an array (same as the spread operator).&lt;/p&gt;

&lt;p&gt;console.log(arr.slice());&lt;/p&gt;

&lt;p&gt;&lt;em&gt;splice&lt;/em&gt;-  slice() and splice() methods are exactly the same. The only fundamental difference is that the splice method does mutate the original array.&lt;br&gt;
It can be used to remove, replace, or add new elements to the array.&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(arr.splice(1,2)); // ["a" , "d"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, In the above example, we specify two arguments that are the starting index and the deleteCount.  What it does is select the element from index 1 and remove the next 2 elements.&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(arr.splice(2)); // ["c", "d", "e"]
console.log(arr); // ["a" , "b"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We see the original array is mutated and the extracted element is gone away.&lt;/p&gt;

&lt;p&gt;One pretty use case of the splice method is to simply remove the last element of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;arr.splice(-1);
console.log(arr);  // ["a", "b", "c", "d"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The splice method is also able to insert the elements without any removals. For that, we need to set the deleteCount to 0.&lt;/p&gt;

&lt;p&gt;Let’s see it in action.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Let arr= [ "I", "am", "a", "Developer"];
arr.splice(3, 0, "from" , "India");
console.log(arr); 

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

&lt;/div&gt;



&lt;p&gt;What happened here is that from index 3 no elements are deleted instead the two new elements are inserted.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;reverse&lt;/em&gt;-  It reverses an array; the first element becomes last, and the last becomes first. It changes the original array and returns the reversed array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const arr2= ["j", "i", "h", "g", "f”];

console.log(arr2.reverse()); // ["f", "g", "h", "i", "j”];
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It does mutate the original array and also returns the array arr2 after the reversal.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;concat&lt;/em&gt;-  It merges two arrays into a new array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const letters= arr.concat(arr2);
console.log(letters); 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Does this look familiar to you? &lt;/p&gt;

&lt;p&gt;Let me tell you it is similar to something like :&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([...arr, ...arr2]);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Earlier we did the same using the spread operator. But after knowing the array methods we can use them to our convenience.&lt;/p&gt;

&lt;p&gt;concat() doesn’t mutate the original array.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;join&lt;/em&gt; -  The join() method returns an array of elements as a string either separated by commas or a specified separator.&lt;/p&gt;

&lt;p&gt;It doesn’t mutate the original array.&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(letters.join('-')); // a-b-c-d-e-f-g-h-i-j
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;forEach&lt;/em&gt;-  It is used for looping arrays. forEach is a Higher-Order Function that requires a callback function to tell it what to do. &lt;/p&gt;

&lt;p&gt;forEach() will iterate over the array and in each iteration, it’ll execute the callback function. It passes the current element, the index, and the entire array that we’re looping.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const movements= [200, 450, -400, 3000, -650, -130, 70, 1300];
movements.forEach(function(movement, index, array){
if(movement &amp;gt; 0) {
console.log(` Movement${i+1}: You deposited ${movement}`);
} else{
console.log(`Movement${i+1}:You withdrew ${movement}`)'
}
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Just notice the order of the parameters that we passed in the callback function. Here the first value is the current element, and the second one is the index.&lt;/p&gt;

&lt;p&gt;Note- The break and the continue method doesn’t work in forEach.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;map&lt;/em&gt;-  The map() method does return a brand new array and calls the function for each element in the array.&lt;br&gt;
&lt;/p&gt;

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

const movementUSD= movements.map(function(mov){
return mov * eurToUSD;
});
console.log(movements);
console.log(movementsUSD);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It doesn’t mutate the original array.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;filter&lt;/em&gt; - The filter() method is used to filter elements of an array that satisfy a certain condition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const deposits= movements.filter(function(mov){
return mov &amp;gt; 0;
});
console.log(deposits); //[200, 450, 3000, 70, 1300]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Each element of the array is passed to a callback function that either returns &lt;code&gt;true&lt;/code&gt; or &lt;code&gt;false&lt;/code&gt;. If the callback returns &lt;code&gt;true&lt;/code&gt; for a specific element, that element is added to the new array.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;reduce&lt;/em&gt;-  It simply reduces the array into a single element. It passes the return value of the previous element in the callback function.&lt;/p&gt;

&lt;p&gt;reduce() also l0op over the array and calls the callback function in each iteration.&lt;/p&gt;

&lt;p&gt;To put it simply, it kind of adds the result of the previous value to the current value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const movements= [“200”, “450”, “-400”, “3000”, “-650”, “-130”, “70”, “1300”];

const balance = movements.reduce(function(accumulator, currentValue, i, arr){

return accumulator + currentValue ;
},0); // 0 is the initial value of the accumulator in the forst loop iteration

console.log(movements); // 3840
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Accumulator keeps accumulating the value that we ultimately want to return.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;find&lt;/em&gt; - This method is used to retrieve an element of the array based on a certain condition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const firstWithdrawal= movements.find(mov=&amp;gt; mov&amp;lt;0);
console.log(firstWithdrawal); // -450
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You may find it similar to the filter() method but there’s some fundamental difference between these two:&lt;/p&gt;

&lt;p&gt;filter() returns all the elements that match the condition while the find() method only returns the first one.&lt;br&gt;
The filter() method returns a new array while find() only returns the element itself and not an array.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;findIndex&lt;/em&gt;-  It returns the index of the found element in the array that satisfies a certain condition. and not the element itself.&lt;/p&gt;

&lt;p&gt;Both the find() and the findIndex() method get access to the current Index and the current entire array.&lt;br&gt;
&lt;/p&gt;

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

//find the index of the first element that is divisible by 2

Let indexNum= num.findIndex(num=&amp;gt; num% 2 === 0);
console.log(indexNum); // returned the index [1] = 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;includes&lt;/em&gt;-  This method checks for equality. That means if the array includes the item which is passed to the method it returns &lt;code&gt;true&lt;/code&gt; or else  &lt;code&gt;false&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;const num= [1,2,3,4,5,6,7,8];

let numIncludes= num.includes(4);
console.log(numIncludes); //true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;some&lt;/em&gt;- The includes() and some() methods are almost similar. The only difference is that the includes method checks for equality while some method checks a given condition and if it’s true it returns ‘true’ or else ‘false’.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const movements= [“200”, “450”, “-400”, “3000”, “-650”, “-130”, “70”, “1300”];

const anyDeposits= movements.some(mov=&amp;gt; mov&amp;gt;0);
console.log(anyDeposits); //true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note- Every element isn't required to pass the callback; if one element returns &lt;code&gt;true&lt;/code&gt;, some() method returns &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;every&lt;/em&gt;-  The every() method returns true only if all of the elements in the array satisfy the condition that we passed into the callback function.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const movements= ["200", "450", "-400", "3000", "-650", "-130", "70", "1300"];

const anyDeposits= movements.every(mov=&amp;gt; mov&amp;gt;0); 
console.log(anyDeposits); //false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this case, it returns false because all the elements in the movements array isn’t a positive number.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;sort&lt;/em&gt;- It sorts the elements in an array, then returns it.  The sort() method keeps looping over the array and applying the callback function until everything is in ascending order.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const owners= ['Zach', 'Emily', 'Jack', 'Demon'];
console.log(owners.sort());
console.log(owners); // ['Demon', 'Emily', 'Jack', 'Zach']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;sort() method first converts the elements into strings, then compares its code. This actually mutates the original array and returns the sorted array.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;toString&lt;/em&gt;-  It simply converts an array into a string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const arr= ['Hey' 'Developer'];
let arrToString= arr.toString();
console.log(arrToString);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;flat&lt;/em&gt;- The flat() method simply flattens the nested array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const arr= [[1,2,3], [4,5,6], 7,8];
console.log(arr.flat()); //[1,2,3,4,5,6,7,8]

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

&lt;/div&gt;



&lt;p&gt;Here we see the flat method removed the nested array and flattened it to one level.&lt;/p&gt;

&lt;p&gt;But what if we have some complex nested array?&lt;/p&gt;

&lt;p&gt;We use the depth argument in such cases.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const arrDeep= [[1,2],3], [4,[5,6]], 7,8];
console.log(arrDeep.flat(2)); //[1,2,3,4,5,6,7,8]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;flatMap&lt;/em&gt;- Exactly the same as flat() method. The only difference is that it essentially combines a flat() and a map() method into just one method which is actually good for performance.&lt;/p&gt;

&lt;p&gt;Note- flatMap() needs to receive the exact callback as the map does.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let arr1 = [1, 2, 3, 4];

arr1.map(x =&amp;gt; [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x =&amp;gt; [x * 2]);
// [2, 4, 6, 8]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;p&gt;-An array is like a big container into which we can store elements of any type and then later reference them. &lt;/p&gt;

&lt;p&gt;-Array methods are built-in functions in JavaScript that we apply to arrays.&lt;/p&gt;

&lt;p&gt;-Array methods are useful in order to mutate or manipulate the array.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Optional chaining '?.' in JavaScript 💪🔥</title>
      <dc:creator>Insha Ramin</dc:creator>
      <pubDate>Sun, 15 Aug 2021 09:09:34 +0000</pubDate>
      <link>https://dev.to/insha/optional-chaining-in-javascript-520m</link>
      <guid>https://dev.to/insha/optional-chaining-in-javascript-520m</guid>
      <description>&lt;h3&gt;
  
  
  Hey Readers 👋
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;In this article, we’ll learn about the optional chaining (?.) that simplifies the way to access values through nested objects.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What the heck is Optional chaining?  🥴
&lt;/h3&gt;

&lt;p&gt;The optional chaining &lt;code&gt;?.&lt;/code&gt;  is a recent addition to the language which is a secure way to access nested object properties, even if an intermediate property doesn’t exist. &lt;/p&gt;

&lt;p&gt;With the optional chaining if a certain property doesn't exist then undefined is returned immediately.&lt;/p&gt;

&lt;h3&gt;
  
  
  The optional chaining ?. syntax has three forms:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;obj?.prop – returns obj.prop if obj exists, otherwise undefined.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;obj?.[prop] – returns obj[prop] if obj exists, otherwise undefined.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;obj.method?.() – calls obj.method() if obj.method exists, otherwise returns undefined&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  To understand the concept better let's have a look at a few of the use cases.
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
Let's see what happens if we try to access a property that doesn't exist without the use of optional chaining.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(restaurant.closingHours.mon.close)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We get an error. That’s the expected result. JavaScript works like this. As &lt;code&gt;restaurant.closingHours&lt;/code&gt; is undefined, an attempt to get &lt;code&gt;restaurant.closingHours.mon.close&lt;/code&gt; fails with an error.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
In order to avoid this error, we first need to check if this property exists. The obvious solution would be to check the value using &lt;code&gt;if&lt;/code&gt; or the conditional operator &lt;code&gt;?&lt;/code&gt;, before accessing its property.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if(restaurant.closingHours &amp;amp;&amp;amp; restaurant.closingHours.mon)
console.log(restaurant.closingHours.mon.close);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It works, there’s no error. But it makes our code more unreadable and messier. It gets more offended pretty quickly when we have a deeply nested object with lots of optional properties.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
Now, let's attempt to access the property by using optional chaining.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(restaurant.closingHours.mon?.close); //undefined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We see the code is short and clean, there’s no duplication at all.&lt;/p&gt;

&lt;p&gt;Note: Only if the property that is before &lt;code&gt;?.&lt;/code&gt; that's &lt;strong&gt;mon&lt;/strong&gt; here exists then this &lt;strong&gt;close&lt;/strong&gt; property will be read and if not then immediately undefined will be returned.&lt;/p&gt;

&lt;p&gt;In other words, the &lt;code&gt;?.&lt;/code&gt; checks the left part for null/undefined and allows the evaluation to proceed if it’s not so.&lt;/p&gt;

&lt;p&gt;Something “exists” here means if it’s not null and not undefined.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
Let's see one more example:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let nestedProp = user.first?.last;

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

&lt;/div&gt;



&lt;p&gt;By using the &lt;code&gt;?.&lt;/code&gt; operator instead of just &lt;code&gt;.&lt;/code&gt;, JavaScript knows to implicitly check to be sure &lt;strong&gt;user.first&lt;/strong&gt; is not null or undefined before attempting to access &lt;strong&gt;user.first.last&lt;/strong&gt;. If &lt;strong&gt;user.first&lt;/strong&gt; is null or undefined, the expression automatically short-circuits, returning undefined.&lt;/p&gt;

&lt;h3&gt;
  
  
  Combining with the nullish coalescing operator
&lt;/h3&gt;

&lt;p&gt;In a nutshell, the nullish coalescing operator, written as &lt;code&gt;??&lt;/code&gt; is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. &lt;/p&gt;

&lt;p&gt;We can set a default value if our optional chaining returns something unwanted.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let user = {
  name: "Insha",
  details: { age: 19 }
};
const userCity = user?.city ?? "Unknown city";
console.log(userCity); // Unknown city

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

&lt;/div&gt;



&lt;p&gt;Since the city property is not provided and evaluates to the &lt;code&gt;&lt;br&gt;
undefined&lt;/code&gt; &lt;br&gt;
 courtesy of the optional chaining operator, the nullish coalescing operator then kicks in and defaults to the right-hand side operand "Unknown city" because the left-hand side operand is evaluated to undefined.&lt;/p&gt;
&lt;h3&gt;
  
  
  Optional chaining on the left-hand side of an assignment
&lt;/h3&gt;

&lt;p&gt;Optional chaining is invalid when used on the left-hand side of an assignment. This results in an error.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let user = {};
user?.name = Insha; //  SyntaxError
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Optional chaining with function calls
&lt;/h3&gt;

&lt;p&gt;We can use optional chaining when attempting to call a method that may not exist. &lt;/p&gt;

&lt;p&gt;For example, &lt;code&gt;&lt;br&gt;
?.()&lt;/code&gt; &lt;br&gt;
 is used to call a function that may not exist.&lt;/p&gt;

&lt;p&gt;Using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception if the method isn't found:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let userAdmin = {
  admin() {
    alert("I am admin");
  }
};

let userGuest = {};

userAdmin.admin?.(); // I am admin

userGuest.admin?.(); // nothing (no such method)

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

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;&lt;br&gt;
?.[]&lt;/code&gt; &lt;br&gt;
 syntax also works, if we’d like to use brackets [] to access properties instead of dot &lt;code&gt;.&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;Optional chaining can be used often when we are fetching responses from an API. We may not be 100% sure if a certain object exists in our API response. With optional chaining, we can check to see if something exists and handle an error gracefully.&lt;/p&gt;

&lt;h3&gt;
  
  
  Wrapping Up!
&lt;/h3&gt;

&lt;p&gt;Optional chaining in JavaScript is very useful - we can access values without checking if the parent object exists. Instead of returning an error, it will return null or undefined.&lt;/p&gt;

&lt;p&gt;Also if you got any questions feel free to ping me on  &lt;a href="https://twitter.com/Insharamin" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; &lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>deeplearning</category>
    </item>
    <item>
      <title>The Ultimate Cheat sheet List For Web Developers</title>
      <dc:creator>Insha Ramin</dc:creator>
      <pubDate>Mon, 19 Jul 2021 15:37:54 +0000</pubDate>
      <link>https://dev.to/insha/the-ultimate-cheat-sheet-list-for-web-developers-2i9i</link>
      <guid>https://dev.to/insha/the-ultimate-cheat-sheet-list-for-web-developers-2i9i</guid>
      <description>&lt;p&gt;Being developers, we work with many different languages. Which makes it humanly impossible to remember all its aspects. Yes, we do have MDN docs, but looking at them for every little issue can be time-consuming. This is when a "Cheat Sheet" comes super-handy.&lt;/p&gt;

&lt;p&gt;In this post, we'll go through some quick and useful cheat sheets that'll save you hours in wasted time each week.&lt;/p&gt;

&lt;p&gt;When it comes to Web development, HTML is the first choice. Web development generally comprises 3 fundamentals: basically HTML, CSS, and JAVASCRIPT.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://htmlcheatsheet.com/" rel="noopener noreferrer"&gt; HTML Cheat Sheet&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Looking for a cheat sheet that contains useful code examples and web developer tools, markup generators, and more? Well, you’re going to love this. &lt;br&gt;
This single-page cheat sheet is for all your needs. It covers all the basic syntax along with proper examples. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff7fbv8g850qvoijvkcs5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff7fbv8g850qvoijvkcs5.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Do you want to know how to structure tables, lists, forms on your webpage? Well, you’ll find it all here.&lt;/p&gt;

&lt;p&gt;This cheat sheet also contains a text editor that’ll help you preview your code live.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://htmlreference.io/" rel="noopener noreferrer"&gt; HTML Reference&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;If you believe in learning by examples: Let me tell you about this one. &lt;/p&gt;

&lt;p&gt;htmlreference.io is a free guide to HTML. You will find all the elements and attributes with proper examples for a better understanding. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvf8f1es77jvx5vacz6ii.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvf8f1es77jvx5vacz6ii.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You’ll find every HTML element arranged in alphabetical order.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://cssreference.io/" rel="noopener noreferrer"&gt; CSS Reference - A free visual guide to CSS&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;As we know CSS has a number of properties. Do you remember them all? I guess nobody does.&lt;br&gt;
So what’s the hack? These cheat sheets are a hack.&lt;/p&gt;

&lt;p&gt;If you’re looking for a complete reference with adequate examples, you need to check this.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbz9jn8mfkhru0fqysng.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbz9jn8mfkhru0fqysng.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It features the most popular properties and explains them with illustrated and animated examples.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://htmlcheatsheet.com/css/" rel="noopener noreferrer"&gt; CSS Cheat Sheet&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box, and text-shadow generators, color picker, and more. &lt;/p&gt;

&lt;p&gt;This cheat sheet also contains a text editor that’ll help you preview your code live.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqj1b1e7myyuvc5ynpl59.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqj1b1e7myyuvc5ynpl59.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://grid.malven.co/" rel="noopener noreferrer"&gt;GRID: A simple visual cheatsheet for CSS Grid Layout&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Learn all about the properties available in the Grid Layout through simple visual examples. I as a developer use this handy cheat sheet all the time.&lt;/p&gt;

&lt;p&gt;Grid is one of those CSS topics where every beginner faces difficulty. I too have banged my head every time I had to work with it. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuwxyxrmqqzgheqwurydf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuwxyxrmqqzgheqwurydf.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://flexbox.malven.co/" rel="noopener noreferrer"&gt;FLEX: A simple visual cheatsheet for flexbox&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;The Flexible Box Layout module makes it easier to design flexible responsive layout structures without using float or positioning.&lt;/p&gt;

&lt;p&gt;Learn all about the properties available in flexbox through simple visual examples. You need to fix the alignment of your webpage but you don’t know which property would work? Take a look at these cheat sheets. It'll give you a clear idea of the properties you need to apply.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12z3jfibjoh3el6xfkqp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F12z3jfibjoh3el6xfkqp.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://htmlcheatsheet.com/js/" rel="noopener noreferrer"&gt;Online Interactive JavaScript (JS) Cheat Sheet&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This JavaScript cheat sheet comes with the most important concepts, functions, methods, and more. A complete quick reference for beginners.&lt;br&gt;
Find code for JS loops, variables, objects, data types, strings, events, and many other categories along with examples on this single page.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F69toki5qfwgo4z2eerr4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F69toki5qfwgo4z2eerr4.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://ilovecoding.org/blog/js-cheatsheet" rel="noopener noreferrer"&gt; JavaScript Cheatsheet&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This 13-page cheat sheet will take you from a beginner to advanced on the fundamentals of JavaScript. Giving you proper terminologies, and syntax of common constructs. &lt;/p&gt;

&lt;p&gt;This cheat sheet cover:- ES6+, simple explanations, DOM API, Event loop, functions, array, object, type and so much more. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flikbt8exi6o3w6i91a6w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flikbt8exi6o3w6i91a6w.png" alt="js-cheatsheet.png" width="800" height="618"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://github.com/mbeaudru/modern-js-cheatsheet" rel="noopener noreferrer"&gt; Modern-JS-cheatsheet&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This document is a cheat sheet for JavaScript containing tips, tricks, and best practices you will frequently encounter in modern projects and most contemporary sample code.&lt;/p&gt;

&lt;p&gt;If you know the basics of JavaScript then this cheat sheet will be a smooth ride for you.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filawqcfxjxsppc0274e0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filawqcfxjxsppc0274e0.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://cheatography.com/" rel="noopener noreferrer"&gt;Cheatography.com&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;Cheatography has thousands of incredible, original programming cheat sheets. You will find everything related to a particular programming language and can easily download them. &lt;/p&gt;

&lt;p&gt;For quick reference purposes, this is the best one to pick. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F37z5lhuxg7yx4cuzy27h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F37z5lhuxg7yx4cuzy27h.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://overapi.com/" rel="noopener noreferrer"&gt;OverAPI.com&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;If you’re looking for a site containing all the cheat sheets, all!&lt;br&gt;
OverAPI.com is the one for you. You don’t need to bang your head every time you don’t remember something. Take a look at these cheat sheets and ease your work.&lt;/p&gt;

&lt;p&gt;This website aggregates cheat sheets for many popular programming languages such as JavaScript, NodeJS, PHP, Python, CSS.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo0ybjcx1sf7r2hwjs5ll.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo0ybjcx1sf7r2hwjs5ll.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://www.developer-cheatsheets.com/" rel="noopener noreferrer"&gt; Developer Cheat Sheets&lt;/a&gt;
&lt;/h3&gt;

&lt;p&gt;This cheat sheet is a compilation of some of the most popular languages: The history of web development, React cheat sheet, React Router cheat sheet, Redux cheat sheet, ES6 cheat sheet, Request cheat sheet.&lt;/p&gt;

&lt;p&gt;Get familiar with the syntax and its usage with these handy cheat sheets.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F16l67ba9ffndooylu6vs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F16l67ba9ffndooylu6vs.png" alt="image.png" width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping Up
&lt;/h2&gt;

&lt;p&gt;There are literally hundreds of resources out there, and I hope that some of the ones listed here will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Happy coding!&lt;/p&gt;

&lt;p&gt;Also if you got any question feel free to ping me on  &lt;a href="https://twitter.com/Insharamin" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; &lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>html</category>
      <category>css</category>
    </item>
  </channel>
</rss>
