DEV Community: Kapil Raghuwanshi🖥

10 JavaScript Output Questions That Look Innocent but Might Betray You in Interviews

Kapil Raghuwanshi🖥 — Tue, 03 Mar 2026 18:08:41 +0000

JavaScript was written in 10 days, and we've been debugging it for decades.

Microsoft, Amazon, Atlassian, Walmart, eBay, and several similar big tech companies test candidates' JavaScript knowledge with such quirky problems.
So if you are a frontend developer - React, Next.js, or maybe Node.js developer, you know JavaScript doesn't test syntax in interviews. It tests mental models.
If you don't understand how the engine thinks-hoisting, closures, the event loop, mutation-these questions will humble you very quickly.

Let's break 10 of them as a JS engine would.

Are you ready?

Cool, give me the output for …

Problem 1: Modifying Array While Iterating (forEach + splice)

var aa = [1, 2, 3, 4, 5, 6];

aa.forEach(i => {
  console.log(i);
  if (i > 3) aa.splice(aa.indexOf(i), 1);
});

Mutation during iteration + how forEach handles index internally.

Output:
1
2
3
4
6

Explanation:
forEach moves forward using the internal index. When you remove 4, the array becomes [1,2,3,5,6]. Now the next index moves forward - but since elements shifted left, 5 gets skipped. forEach iterates using an internal index and does not account for structural changes in the array during iteration.
When splice() removes an element, subsequent elements shift left, but the internal pointer still increments forward, causing elements to be skipped. This is why mutating an array while iterating over it often produces unexpected results.

You mutate the array while walking on it. Classic trap.

Dry Run:

Initial: [1,2,3,4,5,6]
i=1 → ok
i=2 → ok
i=3 → ok
i=4 → splice → [1,2,3,5,6]
Next internal index → skips 5
i=6 → splice → [1,2,3,5]

The engine doesn't rewind for your feelings.

JavaScript started as a browser toy and accidentally became the language that runs the internet.

Problem 2: Default Params + Destructuring

function getApp({ name = "Anonymous", age } = {}) {
  console.log(name, age);
}

getApp({name:"Tech Monk Kapil",age:25});
getApp({age:25});
getApp();

Default parameters + destructuring + default object.

Output:

Tech Monk Kapil 25
Anonymous 25
Anonymous undefined

Explanation:
If argument missing → {} used.
If name missing → default applies.
If age is missing → undefined.
Destructuring + default object prevents a crash.

Dry Run:
Call 1 → name="john", age=25
Call 2 → name default, age=25
Call 3 → param defaults to {}, name default, age undefined

All these questions are curated and collected from my past interview experiences in last 10 years.

Problem 3: Immutable vs Mutating Copy

const obj = { id: 5, name: "Tech Monk Kapil" };
const updated = { ...obj, name: "Kapil Raghuwanshi" };
const updated1 = { ...obj };
updated1.name = "Mohan";

obj
updated
updated1

The spread operator makes a shallow copy.

Output:

{ id: 5, name: "Tech Monk Kapil" }
{ id: 5, name: "Kapil Raghuwanshi" }
{ id: 5, name: "Mohan" }

Explanation:
Spread creates a new object reference. But it's shallow - nested objects would still mutate.
Read more about the shallow vs deep copy difference.

Simple right?

Cool, another one on similar lines then …

Problem 4: Default Param + Rest Param

function getOutput(name = "Unknown", ...nums) {
  console.log(name, nums);
}

getOutput("kapil", 10, 20, 30);
getOutput();
getOutput(undefined, 10, 20);
getOutput(null);

Default param triggers only on undefined.

Output:

kapil [10,20,30]
Unknown []
Unknown [10,20]
null []

Explanation:
Only undefined activates the default. null is considered a valid value.

Follow me on Medium and let's be connected on LinkedIn (@kapilraghuwanshi) and Twitter (@techygeeeky) for more such interesting tech articles.🤝

Problem 5: Promise.all + fetch

const GOOGLE = "https://www.google.com";

Promise.all([
  fetch(GOOGLE).then(() => console.log("b")),
  fetch(GOOGLE).then(() => console.log("c"))
]).then(() => console.log("after"));

Parallel promises + microtasks.

Output:

b
c
after
(or c then b - depends on network timing)

Explanation:
Promise.all executes promises in parallel and resolves only when all included promises resolve. The order of execution of individual .then() callbacks depends on when each promise settles, not the order they were declared. The final .then() runs after all promises are fulfilled. Both fetch calls fire simultaneously. Promise.all waits until both resolve. Then after runs.

Once you see JavaScript as a runtime engine - not a syntax language - interviews become pattern recognition instead of panic mode.

Also, I have recently started creating tech content on my YouTube channel, just have a look at it TechMonkKapil, and subscribe if you like the content!🤝

Problem 6: Event Loop Madness

console.log("Script Start");

setTimeout(() => console.log("setTimeout"), 0);

async function check() {
  console.log("Async Start");
  await Promise.resolve();
  console.log("Async End");
}

check();

new Promise((resolve) => {
  console.log("Promise Executor");
  resolve();
}).then(() => {
  console.log("Promise Then");
});

console.log("Script End");

Call stack + microtask queue + macrotask queue.
Output:

Script Start
Async Start
Promise Executor
Script End
Async End
Promise Then
setTimeout

Explanation:
JavaScript executes synchronous code first, then processes all microtasks (like Promise.then and await), and finally handles macrotasks (like setTimeout). Microtasks are always completed before the next macrotask begins. This strict priority order determines the output sequence.
Order of priority:

Synchronous code
Microtasks (Promise, await)
Macrotasks (setTimeout)

Event loop is deterministic. Chaos is only in our heads.

These questions are not about tricks. They're about understanding execution context, scope, mutation, and the event loop deeply.

Problem 7: map(parseInt) Trap

[10,10,10].map(parseInt)
[10,10,10].map(parseFloat)

map passes (value, index). parseInt(value, radix)
Output:

[10, NaN, 2]
[10,10,10]

Explanation:

parseInt("10", 0) → 10
parseInt("10", 1) → NaN
parseInt("10", 2) → 2

map passes three arguments to its callback: value, index, and array. Since parseInt expects the second argument to be a radix, the array index unintentionally becomes the radix value. This mismatch leads to unexpected results like NaN.

Index becomes radix. Interview classic

JavaScript distinguishes absence from intentional emptiness.

Problem 8: Function vs var Hoisting

console.log(typeof foo)
var foo
function foo(){}

Function hoisting wins over var.

Output:
"function"

Explanation:
Function declarations are hoisted first. var is hoisted, but without overwriting the function at that stage.

JavaScript didn't win because it was perfect; it won because it was everywhere.

The next one is very famous already, and 80% chances are there that you have faced or solved this already.

But still give it a try one more time

Problem 9: IIFE Closure with setTimeout

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(() => {
      console.log(i);
    }, i * 2000);
  })(i);
}

Closure + IIFE + var scope.
Output:

0
after 2 sec
1
after 2 sec
2
after 2 sec
3
after 2 sec
4

Explanation:
var is function-scoped, so without additional scoping, all loop iterations would share the same variable reference. Wrapping each iteration in an IIFE creates a new execution context and captures the current value in a closure. This preserves the expected behavior for asynchronous callbacks. IIFE creates a new scope per iteration. Without it → all would print 5.

Problem 10: Arrow Function and this

let person = {
  name: 'Kapil',
  hobbies: ['React', 'Langchain', 'Next.js'],
  showHobbies: function() {
    this.hobbies.forEach((hobby) => {
      console.log(`${this.name} likes ${hobby}`);
    });
  }
};

person.showHobbies();

Arrow function inherits this.

Kapil likes React
Kapil likes Langchain
Kapil likes Next.js

Arrow functions do NOT bind their own this. They inherit from the parent scope (showHobbies). If normal function used → this would be undefined (or window).

That's all, folks, for this article. Hope it was fun!😃

Hope you learned something new today, at least one new concept. If yes, save it and share it with your colleagues.

Also, I have recently started creating tech content on my YouTube channel, just have a look at it TechMonkKapil, and subscribe if you like the content!🤝

Also, we are building a tech community on Telegram(Tech Monks) and Discord(Tech Monks). Join if you are looking to interact with like-minded folks.

Follow me on Medium and let's be connected on LinkedIn (@kapilraghuwanshi) and Twitter (@techygeeeky) for more such interesting tech articles.🤝

Write your suggestions and feedback in the comment section below👇🏻

Create your own GenAI Image Generator App like MidJourney or DALLE-2

Kapil Raghuwanshi🖥 — Sat, 06 Jan 2024 06:01:05 +0000

Simple React App to demonstrate Generative AI Text-to-Image Capability using any third-party APIs

In the fast-paced world of web development, staying ahead often involves incorporating cutting-edge technologies into our projects. One such innovation that has been gaining traction is the integration of Artificial Intelligence (AI) into web applications. In this article, we'll explore how I leveraged third-party APIs built by Segmind to seamlessly integrate AI-generated images into my React app, pushing the boundaries of creativity and user engagement.

What's Generative AI?

It refers to a class of artificial intelligence systems designed to generate new content, such as images, text, or even music, often in a way that mimics human creativity. These systems, often based on neural networks, can learn patterns and generate novel outputs without explicit programming. Generative AI has applications in various fields, including art, content creation, and data synthesis, contributing to innovative solutions and creative outputs.

Image Generation in AI:

Image generation in AI involves using artificial intelligence models to create new, realistic images. This process often leverages generative models, which are trained on large datasets to learn patterns and generate novel content.

Stable Diffusion is a deep learning, text-to-image model released in 2022 based on diffusion techniques. Uses deep neural networks to generate high-quality images. It trains models using input images and generates new images based on them until the network reaches stability.

DALL·E, developed by OpenAI, is a variant of the GPT (Generative Pre-trained Transformer) architecture designed for image generation. It can generate images from textual descriptions and has gained attention for its ability to create unique and imaginative visuals.

Vision for our App:

When conceptualising my React app, I envisioned an immersive user experience that went beyond traditional static content. I wanted to incorporate dynamic, AI-generated images that would not only captivate users but also add a touch of uniqueness to each interaction. To achieve this, I turned to third-party APIs specialising in AI image generation.

Top Features of the App:

Generate the image from the prompt with various parameters.
Surprise Me option to get the idea instantly, if you're falling short ;).
Few previously generated images to pick from.
The recent history of the generated images can be picked again.
Download the generated images.
Responsive web app.

Technologies used:

Uses the latest React hooks to fetch the SegMind text2Img API.
Deployed on Firebase.
Recent history has been stored on the localStorage.

Choosing the Right API:

The first step was selecting a suitable API that aligned with my vision. After careful research, I settled on SegMind text2Img API (Create your account and get the API token from https://www.SegMind.com), a versatile platform renowned for its powerful image generation capabilities. It offered a range of features, including style transfer, deep dreaming, and more, making it the perfect choice for injecting creativity into my app.

Use my referral link to sign up and get extra credits for API [segmind.com/invite/3fb71a62-a0e5–4e87-af7a-8e4f3a774689].
You can explore their API Postman collection. We are going to use API sdxl1.0-txt2img in our app.

With the API chosen, we seamlessly integrated it into our React app. Leveraging React's component-based architecture, I created a dedicated component responsible for handling API requests and rendering the AI-generated images. Thanks to the simplicity and flexibility of React, this process was smooth and well-organized.

By leveraging third-party APIs, developers can effortlessly integrate AI capabilities into their projects, pushing the boundaries of what's possible in web development.

React Code

You can follow all the code behind our app on my GitHub: https://github.com/kapilraghuwanshi/gen-ai-image-generator, with all the proper file structure and required components, static content, and other config files.

Home.jsx



import React, { useState, useEffect } from "react";
import ImageBox from "../components/ImageBox";
import NavBar from "../components/NavBar";
import { fetchImages } from "../services/model-api";
import { getRandom, loaderMessages, promptIdeas } from "../utilities/utils";
import ChooseResults from "../components/ChooseResults";
import RecentResults from "../components/RecentResults";

const Home = () => {
  const [showLoader, setShowLoader] = useState(false);
  const [imageResult, setImageResult] = useState(null);
  const [promptQuery, setPromptQuery] = useState("");
  const [radioValue, setRadioValue] = useState("20");
  const [dropDownValue, setDropDownValue] = useState("DDIM");
  const [seedValue, setSeedValue] = useState(17123564234);
  const [loaderMessage, setLoaderMessage] = useState(loaderMessages[0]);

  useEffect(() => {
    const loaderInterval = setInterval(() => {
      setLoaderMessage(getRandom(loaderMessages));
    }, 3000);
    // to avoid memory leak
    return () => {
      clearInterval(loaderInterval);
    };
  }, [loaderMessage]);

  const handleSearch = (event) => {
    setPromptQuery(event.target.value);
  };

  const handleChange = (event) => {
    if (event.target.name === "radio") {
      setRadioValue(event.target.value);
    } else if (event.target.name === "dropdown") {
      setDropDownValue(event.target.value);
    } else {
      setSeedValue(event.target.value);
    }
  };

  const handleGenerate = (e) => {
    e.preventDefault();
    fetchData();
  };

  const fetchData = async () => {
    try {
      setShowLoader(true);

      const imageBlob = await fetchImages(
        promptQuery,
        seedValue,
        dropDownValue,
        radioValue
      );

      const fileReaderInstance = new FileReader();
      // This event will fire when the image Blob is fully loaded and ready to be displayed
      fileReaderInstance.onload = () => {
        let base64data = fileReaderInstance.result;
        setImageResult(base64data);
      };
      // Use the readAsDataURL() method of the FileReader instance to read the image Blob and convert it into a data URL
      fileReaderInstance.readAsDataURL(imageBlob);
      setShowLoader(false);
    } catch (error) {
      // Handle error
      console.error("Error fetching images from API:", error);
      setShowLoader(false);
    }
  };

  const handleSurpriseMe = (e) => {
    const surprisePrompt = getRandom(promptIdeas);
    setPromptQuery(surprisePrompt);
  };

  const handleAvailOptions = (option) => {
    setPromptQuery(option);
  };

  return (
    <div>
      <NavBar />
      <div className="surpriseBox">
        <label>Bring your imaginations into reality!</label>
      </div>
      <div>
        <input
          type="text"
          id="prompt"
          value={promptQuery}
          onChange={handleSearch}
          placeholder="A plush toy robot sitting against a yellow wall"
          className="promptInput"
        />
        <button onClick={handleSurpriseMe}>Surprise Me</button>
      </div>
      <div className="formBox">
        <div className="formValue">
          <label>Scheduler &nbsp;</label>
          <select name="dropdown" value={dropDownValue} onChange={handleChange}>
            <option value="Euler">Euler</option>
            <option value="LMS">LMS</option>
            <option value="Heun">Heun</option>
            <option value="DDPM">DDPM</option>
          </select>
        </div>
        <div className="formValue">
          Steps
          <label>
            <input
              type="radio"
              name="radio"
              value="20"
              checked={radioValue === "20"}
              onChange={handleChange}
            />
            20
          </label>
          <label>
            <input
              type="radio"
              name="radio"
              value="30"
              onChange={handleChange}
            />
            30
          </label>
          <label>
            <input
              type="radio"
              name="radio"
              value="50"
              onChange={handleChange}
            />
            50
          </label>
        </div>
        <div className="formValue">
          <label>Seed &nbsp;</label>
          <input
            type="number"
            name="input"
            value={seedValue}
            onChange={handleChange}
          />
        </div>
      </div>
      <div>
        <button onClick={handleGenerate}>Generate the Image</button>
      </div>

      {showLoader ? (
        <div style={{ margin: 40 }}>Blazing fast results... ⚡️⚡️⚡️</div>
      ) : (
        <>
          <ImageBox promptQuery={promptQuery} imageResult={imageResult} />
        </>
      )}
      <ChooseResults onSelect={handleAvailOptions} />
      <RecentResults
        promptQuery={promptQuery}
        imageResult={imageResult}
        onSelect={handleAvailOptions}
      />
      <div className="slideShowMessage">{loaderMessage}</div>
      <div className="footer">Powered by SegMind</div>
    </div>
  );
};

export default Home;

model-api.js



import axios from "axios";
import { secret } from "../secret";

const { apiKey } = secret;

export const fetchImages = async (
  promptCall,
  seedValue,
  dropDownValue,
  radioValue
) => {
  const options = {
    method: "POST",
    url: "https://api.segmind.com/v1/sdxl1.0-txt2img",
    headers: {
      "x-api-key": `${apiKey}`,
      "Content-Type": "application/json",
    },
    responseType: "arraybuffer",
    data: {
      prompt: promptCall,
      seed: seedValue,
      scheduler: dropDownValue,
      num_inference_steps: radioValue,
      negative_prompt: "NONE",
      samples: "1",
      guidance_scale: "7.5",
      strength: "1",
      shape: 512,
    },
  };

  try {
    const response = await axios.request(options);
    // convert raw blob as ArrayBuffer to an image blob with MIME type
    const imageBlob = new Blob([response.data], { type: "image/jpeg" });
    // console.log(response, imageBlob);
    return imageBlob;
  } catch (error) {
    console.error("Error while fecthing Gen AI model API", error);
  }
};

Use SegMind text2Img API (Create your account and get the API token from https://www.SegMind.com, and replace the API key in the below variable.

It is ready to use for all of you, you can fork the repo, use your SegMind or any other third-party APIs, and make it yours!

Run in local:

Go to your project directory in the VSCode terminal/Console, you can run:



npm run build 
npm run start

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes. You may also see any lint errors in the console.

Deploy on Firebase:

We can follow this quick article for deploying our react image generation app on Firebase - a free deployment tool by Google for developers.

Run in Production:

Try our app here https://genai-image-generator.web.app/home

In case the API token expires, use yours in the code deploy on Firebase, and then run.

Share it with your friends and family, and show your swanky product to your colleagues.

Further Scope for Developers:

I would like the new developers to fork the GitHub repository https://github.com/kapilraghuwanshi/gen-ai-image-generator and work on to add few of the below features:

Create an image slideshow with a recent history of generated images.
Reverse the order for recent history images.
Create an Image slideshow of the recent history of generated images.
Build REST APIs to post images on your developed servers and database (free tiers), fetch those APIs, and show them on the app.
Reverse the order for recent history images.
Create an Image slideshow of the recent history of generated images.
Build REST APIs to post recent images on your developed servers and database (Render, Vercel, MongoDB Atlas free tiers), and fetch those from APIs and show them on the app.
Add i18n localization to the project using react-i18next.
Write Unit Test cases using @testing-library/react.

As technology continues to evolve, the fusion of AI and web development offers exciting opportunities for developers to create truly unique and captivating user experiences. Embrace the power of AI in your React projects, and watch as your applications come to life with dynamic, intelligent content.

That's all folks for this article!

Hope it will help you in creating your own MidJourney and DALLe-2 like applications, hope it is easy and fun!😃

Write your suggestions and feedback in the comment section below.

If you really learned something new with this article or it really made your dev work faster than before, like it, save it and share it with your colleagues.

Also, I have recently started creating tech content on my YouTube channel, just have a look at it TechMonkKapil, and subscribe if you like the content!🤝

Also, we are building a tech community on Telegram(Tech Monk Army) and Discord(Tech Monk Army). Join if you are looking to interact with like-minded folks.

I have been writing tech blogs for quite a time now, and have mostly published through my Medium account, this is my first tech article/tutorial in Dev.to. Hope you guys will shower love to it!🤩

Let’s be connected on LinkedIn and Twitter for more such engaging Tech Articles and Tutorials.🤝

Top 20 JavaScript tips and tricks to increase your Speed and Efficiency

Kapil Raghuwanshi🖥 — Tue, 08 Jun 2021 07:09:33 +0000

Convenient and useful techniques to reduce the lines of code and pace up your Dev Work!

In our daily tasks, we get to write functions such as sorting, searching, finding unique values, passing parameters, swapping values etc, so here I present my list of shorthand techniques to write all of them as a Pro!✌🏻

JavaScript is truly an awesome language💛 to learn and work with. And there can be more than one approach to reach to the same solution for given problem. In this article, we will discuss only the quickest ones.🚀

These approaches will definitely help you in:

Reducing the number of LOC(lines of code),
Coding Competitions,
Hackathons or
Other time bound tasks.⏱

Most of these JavaScript Hacks uses techniques from ECMAScript6(ES2015) onwards, though the latest version is ECMAScript11(ES2020).

Note: All below tricks have been tested on the Console of Google Chrome.

1. Declare and Initialize Arrays

We can initialize array of particular size with default values like "", null or 0. You might have used these for the 1-D array but how about initializing 2-D array/matrix?

const array = Array(5).fill(''); 
// Output 
(5) ["", "", "", "", ""]

const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Output
(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0: (5) [0, 0, 0, 0, 0]
1: (5) [0, 0, 0, 0, 0]
2: (5) [0, 0, 0, 0, 0]
3: (5) [0, 0, 0, 0, 0]
4: (5) [0, 0, 0, 0, 0]
length: 5

2. Find out the sum, minimum and maximum value

We should make use of reduce method to quickly find basic maths operations.

const array  = [5,4,7,8,9,2];

array.reduce((a,b) => a+b);
// Output: 35

array.reduce((a,b) => a>b?a:b);
// Output: 9

array.reduce((a,b) => a<b?a:b);
// Output: 2

3. Sorting Array of String, Numbers or Objects

We have inbuilt methods sort() and reverse() for sorting strings but How about numbers or array of objects?
Let's check out sorting hacks for Numbers and Objects in Increasing and Decreasing order as well.

Sort String Array

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Output
(4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Output
(4) ["Steve", "Musk", "Kapil", "Joe"]

Sort Number Array

const array  = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => a-b);
// Output
(6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => b-a);
// Output
(6) [100, 40, 25, 10, 5, 1]

Sort Array of Objects

const objectArr = [ 
    { first_name: 'Lazslo', last_name: 'Jamf'     },
    { first_name: 'Pig',    last_name: 'Bodine'   },
    { first_name: 'Pirate', last_name: 'Prentice' }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Output
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3

4. Ever need to filter falsy values out of an array?

Falsy values like 0, undefined, null, false, "", '' can be omitted easily through below trick

const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// Output
(3) [3, 6, 7]

5. Use Logical Operators for various conditions

If you want to reduce nested if..else or switch cases, you can simply play with basic of logical operators AND/OR.

function doSomething(arg1){ 
    arg1 = arg1 || 10; 
// set arg1 to 10 as a default if it’s not already set
return arg1;
}

let foo = 10;  
foo === 10 && doSomething(); 
// is the same thing as if (foo == 10) then doSomething();
// Output: 10

foo === 5 || doSomething();
// is the same thing as if (foo != 5) then doSomething();
// Output: 10

6. Remove Duplicates values

You might have used indexOf() with for loop which return first found index or newer one includes() which returns boolean true/false from the array to find out/remove duplicates. Here's we have 2 quicker approaches.

const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// Output: [5, 4, 7, 8, 9, 2]

7. Create a Counter Object or Map

Most of the time, the requirement to solve problem by creating counter object or map which tracks variables as keys with their frequency/occurrences as values.

let string = 'kapilalipak';

const table={}; 
for(let char of string) {
  table[char]=table[char]+1 || 1;
}
// Output
{k: 2, a: 3, p: 2, i: 2, l: 2}

and

const countMap = new Map();
  for (let i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } else {
      countMap.set(string[i], 1);
    }
  }
// Output
Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. Ternary Operator is cool

You can avoid nested conditional if..elseif..elseif with ternary operators.

function Fever(temp) {
    return temp > 97 ? 'Visit Doctor!'
      : temp < 97 ? 'Go Out and Play!!'
      : temp === 97 ? 'Take Some Rest!';
}

// Output
Fever(97): "Take Some Rest!" 
Fever(100): "Visit Doctor!"

9. Quicker for loops compare to legacy onces

for and for..in gets you index by default, but you can use arr[index].
for..in accepts non numeric as well so avoid it.
forEach, for...of gets you element directly.
forEach can get you index also but for...of can't.
for and for...of considers holes in array but other 2 do not.

10. Merge 2 objects

Often we need to merge multiple objects in our daily tasks.

const user = { 
 name: 'Kapil Raghuwanshi', 
 gender: 'Male' 
 };
const college = { 
 primary: 'Mani Primary School', 
 secondary: 'Lass Secondary School' 
 };
const skills = { 
 programming: 'Extreme', 
 swimming: 'Average', 
 sleeping: 'Pro' 
 };

const summary = {...user, ...college, ...skills};

// Output 
gender: "Male"
name: "Kapil Raghuwanshi"
primary: "Mani Primary School"
programming: "Extreme"
secondary: "Lass Secondary School"
sleeping: "Pro"
swimming: "Average"

11. Arrow Functions

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. Since they have lexical scope (parental scope) and does not have their own this and arguments hence they refer to the environment in which they are defined.

const person = {
name: 'Kapil',
sayName() {
    return this.name;
    }
}
person.sayName();
// Output
"Kapil"

But

const person = {
name: 'Kapil',
sayName : () => {
    return this.name;
    }
}
person.sayName();
// Output
""

12. Optional Chaining

The optional chaining ?. stops the evaluation if the value before ?. is undefined or null and returns undefined.

const user = {
  employee: {
    name: "Kapil"
  }
};
user.employee?.name;
// Output: "Kapil"
user.employ?.name;
// Output: undefined
user.employ.name
// Output: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13. Shuffle an Array

Making use of inbuilt Math.random() method.

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
list.sort(() => {
    return Math.random() - 0.5;
});
// Output
(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
// Call it again
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Nullish Coalescing Operator

The nullish coalescing operator (??) 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.

const foo = null ?? 'my school';
// Output: "my school"

const baz = 0 ?? 42;
// Output: 0

15. Rest & Spread operators

Those mysterious 3 dots ... can rest or spread!🤓

function myFun(a,  b, ...manyMoreArgs) {
   return arguments.length;
}
myFun("one", "two", "three", "four", "five", "six");

// Output: 6

and

const parts = ['shoulders', 'knees']; 
const lyrics = ['head', ...parts, 'and', 'toes']; 

lyrics;
// Output: 
(5) ["head", "shoulders", "knees", "and", "toes"]

16. Default Parameters

const search = (arr, low=0,high=arr.length-1) => {
    return high;
}
search([1,2,3,4,5]);

// Output: 4

17. Convert Decimal to Binary or Hexa

We can use some in-built methods like .toPrecision() or .toFixed() to achieve much of helping functionalities while solving problems.

const num = 10;

num.toString(2);
// Output: "1010"
num.toString(16);
// Output: "a"
num.toString(8);
// Output: "12"

18. Simple Swap 2 values using Destructuring

let a = 5;
let b = 8;
[a,b] = [b,a]

[a,b]
// Output
(2) [8, 5]

19. Single-liner Palindrome check

Well, this is not a shorthand trick overall but it will give you clear idea to play with strings.

function checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Output: true

20. Turn Object attributes into an Array of attributes

Using Object.entries(),Object.keys() and Object.values()

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj);
// Output
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]
length: 3

Object.keys(obj);
(3) ["a", "b", "c"]

Object.values(obj);
(3) [1, 2, 3]

So that's it guys for now! 🤗

If you know few more hacks like above, let's collaborate through GitHub Repository, so that we can all learn them together.

If you really learned something new with this article or it really made your dev work faster than before, like it, save it and share it with your colleagues.

I have been writing tech blogs for quite a time now, and have mostly published through my Medium account, this is my first tech article/tutorial in Dev.to. Hope you guys will shower love to it!🤩

Let’s be connected on LinkedIn and Twitter for more such engaging Tech Articles and Tutorials.🤝