[{"data":1,"prerenderedAt":1287},["ShallowReactive",2],{"navigation":3,"index":26,"mdc--ph8zf2-key":166,"mdc--yaom0s-key":179,"mdc--4ni4z8-key":188,"index-blogs":197},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"A Developer's Guide to Scalable API Requests with Params in JavaScript and TypeScript","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"Primitives vs. Objects in JavaScript","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"A detailed explanation of five most used CSS frameworks","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"Mastering JavaScript Array and it methods","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"about":29,"blog":32,"body":35,"description":36,"experience":37,"extension":62,"faq":63,"hero":102,"meta":135,"navigation":136,"path":137,"seo":138,"stem":141,"testimonials":142,"__hash__":165},"index/index.yml","Hey, I'm Emmanuel Abanobi, A Full Stack Engineer",{"title":30,"description":31},"About Me","A Full-stack Developer based right here in Lagos. For the past six years, I've been immersed in the world of software Enginering, focusing on building experiences that are not just functional, but genuinely intuitive and engaging for users. My path began at the Federal University of Technology Owerri, where I earned my degree in Computer Science. It was there that I discovered a rare equilibrium between the visual language of design and the logic of code. Today, I work across the full stack, bridging aesthetic precision with code.\n",{"title":33,"description":34},"Latest Articles","Some of my recent thoughts",null,"I craft intuitive digital experiences where design meets functionality. Based in Lagos, bringing ideas to life through code and creativity.",{"title":38,"items":39},"Work Experience",[40,48,56],{"position":41,"date":42,"company":43},"SWE at dev-matrix","2023 - Present",{"name":44,"logo":45,"url":46,"color":47},"The Dev Matrix","","https://nuxt.com","#00DC82",{"position":49,"date":50,"company":51},"SWE at Zenith bank","2022 - 2023",{"name":52,"logo":53,"url":54,"color":55},"Zenith Bank PLC","i-simple-icons-zigbee","https://Zenithbank.com","#FF6363",{"position":57,"date":58,"company":59},"Frelance at upwork","2020 - 2021",{"name":60,"logo":45,"url":45,"color":61},"upwork","#5E6AD2","yml",{"title":64,"description":65,"categories":66},"Frequently Asked Questions","Answers to common questions about my process and services.",[67,79,94],{"title":68,"questions":69},"Services & Process",[70,73,76],{"label":71,"content":72},"What services do you offer?","I specialize in building end-to-end digital products, bridging the gap between sophisticated UX/UI design and robust full-stack development. My expertise spans the entire lifecycle of a project—from user research and wireframing to engineering scalable back-end systems and high-performance front-ends with Vue.js/Nuxt.js. By combining aesthetic precision with architectural logic, I create seamless, concept-to-deployment solutions that are as stable as they are visually engaging.\n",{"label":74,"content":75},"What is your design process like?","I see every project as a balance between logic and \"vibe.\" I start with the emotional intent and the social impact of the product, then build it out using a lean, type-safe stack like Nuxt and Tailwind. By favoring custom, zero-dependency code over heavy libraries, I bridge the gap between high-fidelity design and stable engineering to create something that feels as natural as it does powerful.\n",{"label":77,"content":78},"Do you work with startups?","Yes, I do. I’m particularly drawn to the startup space because it’s where the \"technical puzzle\" meets the \"vibe-first\" vision. My experience building and registering my own ventures means I don’t just ship code—I build with a founder’s mindset. I specialize in taking raw concepts and turning them into lean, high-performance MVPs using Nuxt and Tailwind, ensuring the foundation is stable enough to scale from a hackathon project to a professional reality.\n",{"title":80,"questions":81},"Pricing & Timelines",[82,85,88,91],{"label":83,"content":84},"How much does a project typically cost?","Project cost depends on the technical complexity. A ocused MVP usually ranges from $5,000 to $15,000. It’s designed to quickly build the core product and validate the main idea. A full-stack startup build, including custom UI and API integrations, typically falls between $15,000 and $50,000. Advanced systems that require deeper architecture, high-performance infrastructure, or AI integration usually start at $50,000 and above. For smaller tasks or specialized consulting, I also work hourly, typically between $80 and $150. My goal is simple: I keep development lean, focused, and scalable as the product grows.\n",{"label":86,"content":87},"What are your payment terms?","I generally require a 40% deposit to schedule the project and begin work, with the remaining 60% due upon successful project completion and delivery. I accept payments via bank transfer, paypal, crypto and Stripe.\n",{"label":89,"content":90},"How long does a typical project take?","Timelines depend heavily on the project's scope and complexity. Smaller projects might take 3-4 weeks, while larger, more involved projects can range from 2 to 4 months. I always provide a detailed timeline estimate after the initial discovery phase.\n",{"label":92,"content":93},"Do you offer retainers or ongoing support?","Yes, for clients needing ongoing design support, feature development, or maintenance, I offer monthly retainer options tailored to specific needs. Let's discuss if this is something you're interested in.\n",{"title":30,"questions":95},[96,99],{"label":97,"content":98},"What do you enjoy most about your work?","I love the challenge of solving complex problems through design and technology. It's incredibly rewarding to see people interact with something I've created and find it genuinely useful and easy to navigate. Bridging the gap between user needs and technical possibilities is what truly excites me.\n",{"label":100,"content":101},"What are your hobbies outside of work?","When I'm not designing or coding, I enjoy exploring Lagos's art galleries, playing chess, and playing backetball at the gym. I'm also passionate about modeling, social\nscience and occasionally contribute to open-source projects.\n",{"links":103,"images":107},[104],{"label":105,"to":45,"color":106},"Biography","neutral",[108,111,114,117,120,123,126,129,132],{"src":109,"alt":110},"/hero/random-1.avif","Random Image 1",{"src":112,"alt":113},"/hero/random-2.avif","Random Image 2",{"src":115,"alt":116},"/hero/random-3.avif","Random Image 3",{"src":118,"alt":119},"/hero/random-4.avif","Random Image 4",{"src":121,"alt":122},"/hero/random-5.avif","Random Image 5",{"src":124,"alt":125},"/hero/random-6.avif","Random Image 6",{"src":127,"alt":128},"/hero/random-7.avif","Random Image 7",{"src":130,"alt":131},"/hero/random-8.avif","Random Image 8",{"src":133,"alt":134},"/hero/random-9.avif","Random Image 9",{},true,"/",{"title":139,"description":140},"Emmanuel Abanobi - Full Stack Enginer","Welcome to my portfolio! I'm Emmanuel Abanobi, a Full Stack Engineer based in Lagos. I specialize in creating user-centered digital experiences that are both beautiful and functional.","index",[143,150,157],{"quote":144,"author":145},"Emma's approach to SWE completely transformed our product. He has a rare ability to balance beautiful aesthetics with functional simplicity. The redesign not only looked better, but it reduced our customer support tickets by 40% and increased conversion rates across all key metrics.",{"name":146,"description":147,"avatar":148},"Sarah Adewale","Product Director ",{"src":149},"https://media.istockphoto.com/id/1468484747/photo/portrait-of-black-woman-in-office-startup-for-eco-friendly-green-mission-and-sustainable.webp?a=1&b=1&s=612x612&w=0&k=20&c=OFQs0BPorTf6hCqO0BYDn5dmrT0liTSeN2irclghQe4=",{"quote":151,"author":152},"Working with Emma was the best decision we made for our startup. He didn't just deliver designs—He challenged our assumptions, conducted thorough user research, and created an experience that truly resonated with our audience. His technical knowledge of front-end development  meant the handoff to our engineering team was seamless.",{"name":153,"description":154,"avatar":155},"Mark Essien","founder of hotel.ng ",{"src":156},"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhBMlqsLqPK2AHEt-lB4EKxzhcmEqdvHOlNKizm8T_kYpD86oTHm7ijFy5X38i7f9P1yJOPiVts9zCKyP0MpJePd8Iavwks3qAzCGY0_M&s=10",{"quote":158,"author":159},"Emma excels at turning complex technical puzzles into clean, editorial-grade interfaces. His work fundamentally improved how our users interact with data by merging high-fidelity design with analytical rigor. He’s that rare developer who understands both the 'vibe' and the architecture behind it.",{"name":160,"description":161,"avatar":162},"Dr. Aisha Johnson","Chief Innovation Officer",{"src":163,"srcset":164},"https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=40&h=40&q=80","https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=80&h=80&q=80 2x","-rnDtp6M64mM0XQIvKeZbJjDYR9tL9-5yZznUq_MCw4",{"data":167,"body":168},{},{"type":169,"children":170},"root",[171],{"type":172,"tag":173,"props":174,"children":175},"element","p",{},[176],{"type":177,"value":178},"text","I specialize in building end-to-end digital products, bridging the gap between sophisticated UX/UI design and robust full-stack development. My expertise spans the entire lifecycle of a project—from user research and wireframing to engineering scalable back-end systems and high-performance front-ends with Vue.js/Nuxt.js. By combining aesthetic precision with architectural logic, I create seamless, concept-to-deployment solutions that are as stable as they are visually engaging.",{"data":180,"body":181},{},{"type":169,"children":182},[183],{"type":172,"tag":173,"props":184,"children":185},{},[186],{"type":177,"value":187},"I see every project as a balance between logic and \"vibe.\" I start with the emotional intent and the social impact of the product, then build it out using a lean, type-safe stack like Nuxt and Tailwind. By favoring custom, zero-dependency code over heavy libraries, I bridge the gap between high-fidelity design and stable engineering to create something that feels as natural as it does powerful.",{"data":189,"body":190},{},{"type":169,"children":191},[192],{"type":172,"tag":173,"props":193,"children":194},{},[195],{"type":177,"value":196},"Yes, I do. I’m particularly drawn to the startup space because it’s where the \"technical puzzle\" meets the \"vibe-first\" vision. My experience building and registering my own ventures means I don’t just ship code—I build with a founder’s mindset. I specialize in taking raw concepts and turning them into lean, high-performance MVPs using Nuxt and Tailwind, ensuring the foundation is stable enough to scale from a hackathon project to a professional reality.",[198,324,830],{"id":199,"title":10,"author":200,"body":204,"date":316,"description":317,"extension":318,"image":319,"meta":320,"minRead":321,"navigation":136,"path":11,"seo":322,"stem":12,"__hash__":323},"blog/blog/from-mockup-to-market.md",{"name":201,"avatar":202},"Emmanuel Abanobi",{"src":203,"alt":201},"/hero/Emma.avif",{"type":205,"value":206,"toc":306},"minimark",[207,210,213,216,221,224,233,238,244,247,251,254,257,263,266,272,278,282,285,288,292,295,300,303],[173,208,209],{},"Welcome back to my article. Today, we will be discussing how we can make a scalable and dynamic API call using parameters.",[173,211,212],{},"In the world of software engineering, it’s likely for every developer to make an API call, whether a POST or a GET API request, so it is very important for developers to understand how to make this call dynamically.",[173,214,215],{},"However, to make an API call, we need to organise how our data should be received and sent. To do this, we need a parameter for dynamic API calls, a schema to store data in our database, and an interface to keep our data organized. First, let's look at how we can make an API call in JavaScript and TypeScript.",[217,218,220],"h2",{"id":219},"api-request","Api Request",[173,222,223],{},"Assuming we want to make an API call from the Unsplash URL, we would need an API key to access the data from Unsplash. Once we have an API key, we can make this API call. Here’s a quick way to make this call using JavaScript and TypeScript.",[225,226,230],"pre",{"className":227,"code":229,"language":177},[228],"language-text","// Create a global variable for our API key env file, which we will be using to access  unsplash endpoint in our code\n\nconst Api_key = process.env.API_KEY ; \n\nconst url = 'https://unsplash_api';\n\nasync function fetchApi(url, method = 'GET', body = null, headers = {}) {\n  const defaultHeaders = {\n    'Content-type': 'application/json',\n    'Authorization': `Bearer ${Api_Key}`,\n    ...headers\n  };\n\n  const response = await fetch(url, {\n    method,\n    headers: defaultHeaders,\n    body: body ? JSON.stringify(body) : null\n  });\n\n  let data;\n  try {\n    data = await response.json();\n    if (!response.ok) {\n      return 'Data failed to retrieve';\n    }\n  } catch (error) {\n    console.error('API call failed to fetch data', error);\n    return 'Error trying to fetch data';\n  }\n\n  return data;\n}\n\n\n",[231,232,229],"code",{"__ignoreMap":45},[234,235,237],"h3",{"id":236},"in-typescript-this-is-how-we-make-the-same-call","In TypeScript, this is how we make the same call.",[225,239,242],{"className":240,"code":241,"language":177},[228],"const api_key = 'unspalsh00992';\n\nasync function fetchapi(url: string, method: string = 'GET', body: any = null, header: Record\u003Cstring, string> = {}): Promise\u003Cstring> {\n  // Try to get the response\n  try {\n    // Create a default header to dynamically access headers in the function\n    const defaultHeader = {\n      'Content-type': 'application/json',\n      'Authorization': `Bearer ${process.env.api_key}`,\n      ...header\n    };\n\n    // Create a variable that defines our response data\n    const response = await fetch(url, {\n      method,\n      headers: defaultHeader,\n      body: body ? JSON.stringify(body) : null\n    });\n\n    // Create a variable to hold our response\n    let data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('API call failed', error);\n    return 'An error occurred while fetching data';\n  }\n}\n\n",[231,243,241],{"__ignoreMap":45},[173,245,246],{},"Now that we have finally learned how to make our first API call, let's look at the issue at hand. Imagine we want to make an API call for specific images of a certain kind of location, e.g., \"beach in Spain.\" When we make the api call like the previous one, it wont give us full control of the kind of data we want to use, and it isn't scalable or ideal to allow our API to keep fetching irrelevant data. This is where parameters come into play.",[234,248,250],{"id":249},"what-is-a-parameter","What is a Parameter",[173,252,253],{},"A parameter is what we feed into our API call to get a specific kind of data. This is useful when we don't want to get irrelevant data. Here is a detailed example of how we can make an API call using a parameter.",[173,255,256],{},"Firstly, we need to set our parameter dynamically, and to do this, we can use a plain Object-based parameter structure. This can be done directly in JavaScript or TypeScript. While libraries like Zod can assist with table validation, this article focuses on using pure JavaScript and TypeScript.",[225,258,261],{"className":259,"code":260,"language":177},[228],"async function fetchApi(\n  url: string,\n  params: { country: string; type: string; location: string },\n  method: string = 'GET',\n  body: any = null,\n  headers: Record\u003Cstring, string>\n): Promise\u003Cstring> {\n  try {\n    const { country, type, location } = params;\n    const unsplashParam = `${country}, ${location}, ${type}`;\n    const apiUrl = `https://unsplashapi/search/photos?query=${encodeURIComponent(unsplashParam)}&per_page=40`;\n\n    const defaultHeaders = {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${process.env.API_KEY}`,\n      ...headers\n    };\n\n    const response = await fetch(apiUrl, {\n      method,\n      headers: defaultHeaders,\n      body: body ? JSON.stringify(body) : null\n    });\n\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Failed to retrieve API response', error);\n    return 'API retrieval failed';\n  }\n}\n\n\n",[231,262,260],{"__ignoreMap":45},[173,264,265],{},"Then we can dynamically call our function this way.",[225,267,270],{"className":268,"code":269,"language":177},[228],"await fetchApi('https://unsplashapi...',{ type: 'beach', country: 'Spain', location: 'Ibiza' });\n\nawait fetchApi('https://usplashapi',{ type: 'temple', country: 'India', location: 'Dubai' });\n\nawait fetchApi('https://unspalashapi',{ type: 'temple', country: 'Nigeria', location: 'Akure' });\n",[231,271,269],{"__ignoreMap":45},[273,274,275],"note",{},[173,276,277],{},"You can call multiple APIs dynamically without hardcoding values. This approach offers a more scalable and efficient way to make API requests to any endpoint of your choice.",[234,279,281],{"id":280},"what-is-a-database","What is a database",[173,283,284],{},"A database is a backend system where useful data can be stored. Think of it as the brain of an application, where the key information ,logic and useful data are saved and used throughout the application. To organise data effectively , we use what we call a schema",[173,286,287],{},"In JavaScript development, PostgreSQL is highly recommended. Although PostgreSQL isn't written in JavaScript, we can interact with it using JavaScript libraries like pg or Prisma.",[234,289,291],{"id":290},"what-is-a-schema","What is a schema?",[173,293,294],{},"A schema is a structure or blueprint that helps us organize data in a database or system. Think of it as a data organizer. For instance, imagine we don't have a schema and we want to make an API call. Without a schema, our server wouldn't be able to recognize what data the user is asking for. But with a schema, the system understands what kind of data we are dealing with.",[273,296,297],{},[173,298,299],{},"This article does not focus on saving dynamic API calls data. To learn more about SQL databases and how to store data using sql , I will cover this topic in my next article.",[173,301,302],{},"Thank you for taking the time to read this. I hope it helps you understand how you can effectively use an API parameters, when making an api call to get a specific kind data.",[173,304,305],{},"Until the next article!",{"title":45,"searchDepth":307,"depth":307,"links":308},2,[309],{"id":219,"depth":307,"text":220,"children":310},[311,313,314,315],{"id":236,"depth":312,"text":237},3,{"id":249,"depth":312,"text":250},{"id":280,"depth":312,"text":281},{"id":290,"depth":312,"text":291},"2025-04-23","Build a robust, type-safe API wrapper from scratch without the bloat of external libraries. Learn to use dynamic parameters to turn complex data fetching into a lean, reusable, and zero-dependency workflow.","md","https://images.unsplash.com/photo-1554306274-f23873d9a26c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},5,{"title":10,"description":317},"zW8Vw1_1NmX9J8Pp5X3nrAoLg-a66xgVcmZAaKx3WPM",{"id":325,"title":22,"author":326,"body":328,"date":823,"description":824,"extension":318,"image":825,"meta":826,"minRead":827,"navigation":136,"path":23,"seo":828,"stem":24,"__hash__":829},"blog/blog/slow-design-in-fast-paced-digital-world.md",{"name":201,"avatar":327},{"src":203,"alt":201},{"type":205,"value":329,"toc":806},[330,333,339,342,345,348,352,355,358,361,363,367,370,374,377,384,390,395,398,403,405,409,412,417,423,427,430,435,437,441,444,449,455,460,466,470,473,478,480,484,487,490,495,500,506,510,513,518,520,524,527,531,534,538,544,549,553,556,560,566,570,576,581,583,587,590,594,597,601,607,612,614,618,621,626,630,636,640,643,648,650,654,657,661,664,673,677,680,685,687,691,694,699,703,709,714,720,724,727,734,739,741,745,748,753,757,763,768,783,788,790,794,797],[173,331,332],{},"Arrays are variables that can hold multiple values. In this article, I will be discussing JavaScript arrays and their methods.",[225,334,337],{"className":335,"code":336,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\n",[231,338,336],{"__ignoreMap":45},[173,340,341],{},"The code above is an example of how an array looks in JavaScript.",[173,343,344],{},"Congratulations, we just wrote our first array variable in JavaScript!",[346,347],"hr",{},[217,349,351],{"id":350},"why-arrays-in-javascript","Why Arrays in JavaScript?",[173,353,354],{},"We use arrays in JavaScript in order to reduce the amount of repeated code in our program. Instead of saving each value in a separate variable, we can just put them into an array.",[173,356,357],{},"Now let's focus on how we can manipulate our array to get our desired outcome.",[173,359,360],{},"In JavaScript, there are several methods we can use in manipulating arrays. These are well-known as array methods. However, without these methods, we can't work with arrays effectively.",[346,362],{},[217,364,366],{"id":365},"array-methods","Array Methods",[173,368,369],{},"We have multiple array methods in JavaScript, and I will explain each of them in this article.",[234,371,373],{"id":372},"array-slice","Array slice()",[173,375,376],{},"An array slice is used to select an element in an array and store it in a new array. However, the original array remains the same, unlike the pop and push methods.",[173,378,379,383],{},[380,381,382],"strong",{},"Syntax:","\narray.slice(first, end)",[225,385,388],{"className":386,"code":387,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\nconst newArray = myArray.slice(0, 2)\nconsole.log(newArray) // this returns [\"Nigeria\", \"USA\"]\n",[231,389,387],{"__ignoreMap":45},[173,391,392],{},[380,393,394],{},"Code Explanation:",[173,396,397],{},"In our code above, we created an array that we called myArray, then we used the slice method to select some elements in myArray, which were the first and second values in myArray elements. In JavaScript, if we are to target a value or element in an array, we use number type to get the index of the element we are targeting, which means an index of 0 is the first element in myArray and also index of 1 is the second element in myArray. As we all know, we do not count from an index of 1 in JavaScript; we start counting from an index of 0. In conclusion, we then saved the selected elements in a new variable called newArray.",[273,399,400],{},[173,401,402],{},"The original array remains unchanged when using slice().",[346,404],{},[234,406,408],{"id":407},"array-splice","Array splice()",[173,410,411],{},"The array splice method removes or adds elements in an array and returns the removed elements if any.",[173,413,414,416],{},[380,415,382],{},"\narray.splice(index, howmany, item1, ....., itemX)",[225,418,421],{"className":419,"code":420,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\nmyArray.splice(3, 1, \"Spain\", \"Zimbabwe\")\nconsole.log(myArray) // this returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n",[231,422,420],{"__ignoreMap":45},[173,424,425],{},[380,426,394],{},[173,428,429],{},"In our example above we created an array, then we used the splice method to start adding more countries at the index of 3. The 1 inside the splice method is the number of items we want to remove before adding our new countries. Lastly, we added the countries we wanted to add inside our array.",[273,431,432],{},[173,433,434],{},"Unlike slice(), the splice() method modifies the original array.",[346,436],{},[234,438,440],{"id":439},"array-sort","Array sort()",[173,442,443],{},"This method is used for sorting or organizing an array in a descending or ascending order.",[173,445,446,448],{},[380,447,382],{},"\narray.sort(compareFunction)",[225,450,453],{"className":451,"code":452,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nconsole.log(myArray) // this returns [\"Canada\", \"Nigeria\", \"Spain\", \"USA\", \"Zimbabwe\"]\n\n//Example (sorting in ascending order)\nconst myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nconsole.log(myArray) // this returns [\"Canada\", \"Nigeria\", \"Spain\", \"USA\", \"Zimbabwe\"]\n\n\n",[231,454,452],{"__ignoreMap":45},[173,456,457],{},[380,458,459],{},"Example (sorting in descending order):",[225,461,464],{"className":462,"code":463,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nmyArray.reverse()\nconsole.log(myArray) // this returns [\"Zimbabwe\", \"USA\", \"Spain\", \"Nigeria\", \"Canada\"]\n\n",[231,465,463],{"__ignoreMap":45},[173,467,468],{},[380,469,394],{},[173,471,472],{},"In the code above, we created an array of countries, then we used the sort method to organize the code alphabetically. For descending order, we combined sort() with reverse(). If you are sorting numbers, it targets the smallest to the biggest and vice versa, but if you are sorting strings, it targets the first letter to organize alphabetically.",[273,474,475],{},[173,476,477],{},"The sort() method modifies the original array.",[346,479],{},[234,481,483],{"id":482},"array-shift-and-unshift","Array shift() and unshift()",[173,485,486],{},"Now let's look into the shift and unshift methods. We can use the shift method to completely remove the first element in our array. We can store the value which was removed entirely from our original array in a new array variable, if necessary.",[173,488,489],{},"The unshift method is used to add elements at the beginning of the original array.",[173,491,492,494],{},[380,493,382],{},"\narray.shift()\narray.unshift(item1, item2, ..., itemX)",[173,496,497],{},[380,498,499],{},"Example:",[225,501,504],{"className":502,"code":503,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.shift()\nconsole.log(myArray) // this returns [\"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n// Using the unshift method\nmyArray.unshift(\"Ethiopia\")\nconsole.log(myArray) // This returns [\"Ethiopia\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n\n",[231,505,503],{"__ignoreMap":45},[173,507,508],{},[380,509,394],{},[173,511,512],{},"Using the .shift and .unshift methods is very simple because we do not need to do any complex solution to get our desired outcome. We just have to use the .shift or the .unshift syntax on our array. The .unshift syntax added an element to the start of our original array and the .shift element removed the first element.",[273,514,515],{},[173,516,517],{},"Both shift() and unshift() modify the original array.",[346,519],{},[234,521,523],{"id":522},"array-pop-and-array-push","Array pop() and array push()",[173,525,526],{},"This array method plays almost a similar role as the shift and unshift methods. However, the array.pop() method removes the last element from an array, while the array.push() method can be used to add new elements to an array.",[173,528,529],{},[380,530,382],{},[173,532,533],{},"array.pop()\narray.push(item1, item2, ..., itemX)",[173,535,536],{},[380,537,499],{},[225,539,542],{"className":540,"code":541,"language":177},[228],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.pop()\nconsole.log(myArray) // This returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\"]\n\n// Using the push method\nmyArray.push(\"Ethiopia\")\nconsole.log(myArray) // This returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Ethiopia\"]\n\n\n",[231,543,541],{"__ignoreMap":45},[273,545,546],{},[173,547,548],{},"Both pop() and push() modify the original array.",[234,550,552],{"id":551},"array-delete","Array delete()",[173,554,555],{},"Array.delete() can be used to delete an element in an array, but I will advise you not to use this method because it leaves an undefined hole in your code. Instead, you can use the pop or shift method to delete an element in an array.",[173,557,558],{},[380,559,382],{},[173,561,562,563],{},"delete array",[564,565,141],"span",{},[173,567,568],{},[380,569,499],{},[225,571,574],{"className":572,"code":573,"language":177},[228],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\ndelete myCities[0]\nconsole.log(myCities) // This returns [empty, \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\n\n",[231,575,573],{"__ignoreMap":45},[273,577,578],{},[173,579,580],{},"Avoid using delete() on arrays as it leaves undefined holes. Use pop(), shift(), or splice() instead.",[346,582],{},[234,584,586],{"id":585},"array-join","Array join()",[173,588,589],{},"Array join() joins all elements together that are separated by commas or any specific separators in an array.",[173,591,592],{},[380,593,382],{},[173,595,596],{},"array.join(separator)",[173,598,599],{},[380,600,499],{},[225,602,605],{"className":603,"code":604,"language":177},[228],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconsole.log(myCities.join('')) // this returns \"LagosSacramentoTokyoCapetownKampala\"\nconsole.log(myCities.join(' - ')) // this returns \"Lagos - Sacramento - Tokyo - Capetown - Kampala\"\n",[231,606,604],{"__ignoreMap":45},[273,608,609],{},[173,610,611],{},"The join() method does not modify the original array.",[346,613],{},[234,615,617],{"id":616},"array-concat","Array concat()",[173,619,620],{},"This method joins two or more arrays together. Moreover, it works just like the + operator.",[173,622,623,625],{},[380,624,382],{},"\narray1.concat(array2, array3, ..., arrayX)",[173,627,628],{},[380,629,499],{},[225,631,634],{"className":632,"code":633,"language":177},[228],"const myCities1 = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconst myCities2 = [\"Texas\", \"Addis Ababa\", \"Accra\", \"Cotonou\"]\nconst newArray = myCities1.concat(myCities2)\nconsole.log(newArray) // this returns [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\", \"Texas\", \"Addis Ababa\", \"Accra\", \"Cotonou\"]\n",[231,635,633],{"__ignoreMap":45},[173,637,638],{},[380,639,394],{},[173,641,642],{},"In the code above, we created our first array \"myCities1\" and also created another array called \"myCities2\". We then called the concat method on myCities1 and added myCities2 to the parenthesis. This resulted in the first and second arrays joining together to form a new array.",[273,644,645],{},[173,646,647],{},"The concat() method does not modify the original arrays.",[346,649],{},[234,651,653],{"id":652},"array-tostring","Array toString()",[173,655,656],{},"Array toString() works on turning all the elements in an array into one string type.",[173,658,659],{},[380,660,382],{},[173,662,663],{},"array.toString()",[173,665,666,668,669,672],{},[380,667,499],{},"\nconst myCities = ",[564,670,671],{},"\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"","\nconst newArray = myCities.toString()\nconsole.log(newArray) // This returns \"Lagos,Sacramento,Tokyo,Capetown,Kampala\"",[173,674,675],{},[380,676,394],{},[173,678,679],{},"We created an array in the code above. After that, we created a new variable called newArray, and then we assigned it to the original array \"myCities\" and called the toString() method on myCities. Finally, we logged newArray to our console and got our desired result.",[273,681,682],{},[173,683,684],{},"The toString() method does not modify the original array.",[346,686],{},[234,688,690],{"id":689},"array-length","Array length",[173,692,693],{},"The length method checks for the length of an array element and returns the actual number of elements in an array.",[173,695,696,698],{},[380,697,382],{},"\narray.length",[173,700,701],{},[380,702,499],{},[225,704,707],{"className":705,"code":706,"language":177},[228],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconst arrayLength = myCities.length\nconsole.log(arrayLength) // 5\n",[231,708,706],{"__ignoreMap":45},[173,710,711],{},[380,712,713],{},"Bonus example:",[225,715,718],{"className":716,"code":717,"language":177},[228],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nmyCities.length = 3\nconsole.log(myCities) // This returns [\"Lagos\", \"Sacramento\", \"Tokyo\"]\n",[231,719,717],{"__ignoreMap":45},[173,721,722],{},[380,723,394],{},[173,725,726],{},"This is a very simple code. We started by creating a new array, afterward, we created a variable and assigned it to our original array \"myCities\" and called the length method. After that, we console logged the variable, which resulted in 5 because the length of our myCities array is 5.",[173,728,729,730,733],{},"In our second example, myCities.length returns ",[564,731,732],{},"\"Lagos\", \"Sacramento\", \"Tokyo\""," because we assigned myCities.length to get the length of 3 elements.",[273,735,736],{},[173,737,738],{},"The length property can also be used to truncate an array.",[346,740],{},[234,742,744],{"id":743},"array-flat","Array flat()",[173,746,747],{},"Array flat methods are used to concatenate sub-arrays elements.",[173,749,750,752],{},[380,751,382],{},"\narray.flat()",[173,754,755],{},[380,756,499],{},[225,758,761],{"className":759,"code":760,"language":177},[228],"const myArray = [[1,2], [3,4], [5,6]]\nconst newArray = myArray.flat()\nconsole.log(newArray) // This returns [1,2,3,4,5,6]\n",[231,762,760],{"__ignoreMap":45},[173,764,765],{},[380,766,767],{},"Explanation:",[173,769,770,771,774,775,778,779,782],{},"The code above takes the nested array [[1,2], ",[564,772,773],{},"3,4",", ",[564,776,777],{},"5,6","] and transforms it into a single-dimensional array ",[564,780,781],{},"1, 2, 3, 4, 5, 6"," by flattening it using the flat() method.",[273,784,785],{},[173,786,787],{},"The flat() method does not modify the original array.",[346,789],{},[217,791,793],{"id":792},"conclusion","Conclusion",[173,795,796],{},"We have come to the end of this article. I hope you understand all concepts that were explained in this article. As we all know, array methods are very great tools to use while manipulating arrays. In this article, we looked at the frequently used array methods.",[173,798,799,800],{},"Please note, there are more array methods in JavaScript that we didn't look into. You can read more on array methods here: ",[801,802,803],"a",{"href":803,"rel":804},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array",[805],"nofollow",{"title":45,"searchDepth":307,"depth":307,"links":807},[808,809,822],{"id":350,"depth":307,"text":351},{"id":365,"depth":307,"text":366,"children":810},[811,812,813,814,815,816,817,818,819,820,821],{"id":372,"depth":312,"text":373},{"id":407,"depth":312,"text":408},{"id":439,"depth":312,"text":440},{"id":482,"depth":312,"text":483},{"id":522,"depth":312,"text":523},{"id":551,"depth":312,"text":552},{"id":585,"depth":312,"text":586},{"id":616,"depth":312,"text":617},{"id":652,"depth":312,"text":653},{"id":689,"depth":312,"text":690},{"id":743,"depth":312,"text":744},{"id":792,"depth":307,"text":793},"2025-01-28","Master the functional power of JavaScript arrays. From basic manipulation to advanced iteration, this deep dive breaks down the most essential methods for building lean, high-performance codebases. Learn to handle data structures with the same 'aesthetic precision' you apply to your UI.","https://images.unsplash.com/photo-1514070706115-47c142769603?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},7,{"title":22,"description":824},"rytYDVgGWxurUadqKXoBCbs-uk6lLZtEI_2MqxM-mfA",{"id":831,"title":14,"author":832,"body":834,"date":1281,"description":1282,"extension":318,"image":1283,"meta":1284,"minRead":827,"navigation":136,"path":15,"seo":1285,"stem":16,"__hash__":1286},"blog/blog/how-i-built-my-own-design-system-from-scratch.md",{"name":201,"avatar":833},{"src":203,"alt":201},{"type":205,"value":835,"toc":1257},[836,841,844,846,850,853,856,858,862,865,871,876,880,883,886,889,891,895,898,901,905,908,914,918,921,924,930,937,940,946,953,957,960,963,969,971,975,978,981,985,988,991,997,1001,1004,1010,1013,1015,1019,1022,1026,1029,1039,1042,1048,1051,1054,1056,1060,1063,1066,1072,1075,1077,1081,1084,1087,1093,1095,1099,1102,1105,1108,1111,1114,1116,1120,1123,1126,1129,1135,1138,1140,1144,1239,1241,1243,1246,1249,1252,1254],[837,838,840],"h1",{"id":839},"understanding-javascript-data-types-a-comprehensive-guide-for-beginners","Understanding JavaScript Data Types: A Comprehensive Guide for Beginners",[173,842,843],{},"In this article, I will be discussing data types in JavaScript. I'm very sure that anyone reading this should be able to comprehend JavaScript data types well enough. Firstly, I will start by defining data types for a better understanding.",[346,845],{},[217,847,849],{"id":848},"what-are-data-types","What Are Data Types?",[173,851,852],{},"Data types can be described as different types or kinds of data we will be working with while using the JavaScript programming language. Data types are used in multiple ways while writing a program; we use them mostly when storing values in variables.",[173,854,855],{},"However, there are multiple types of data we will be looking into in this article.",[346,857],{},[217,859,861],{"id":860},"string-type","String Type",[173,863,864],{},"A string is a set of alphanumeric characters that can be written with double quotes in JavaScript. Here's how a string looks in JavaScript:",[225,866,869],{"className":867,"code":868,"language":177},[228],"const str = \"string\"\n",[231,870,868],{"__ignoreMap":45},[273,872,873],{},[173,874,875],{},"JavaScript strings are immutable, which means that once the string is created, it cannot be changed.",[234,877,879],{"id":878},"string-indexing","String Indexing",[173,881,882],{},"It is noted that the first character of a string is at the index of 0, the second character is at the index of 1.",[173,884,885],{},"As a newbie in JavaScript programming language, you may be confused about why I started counting from 0 instead of 1. Here's why: In computer science algorithms and data structures, we do not count from 1 when looking for the index in a string or number.",[173,887,888],{},"I will talk more about this topic in my next article; for now, we are only focusing on data type basics.",[346,890],{},[217,892,894],{"id":893},"number-type","Number Type",[173,896,897],{},"JavaScript has only one number type, which can be written with or without a decimal point:",[173,899,900],{},"const num = 45 // without decimal\nconst num2 = 3.5 // with decimal",[234,902,904],{"id":903},"scientific-notation","Scientific Notation",[173,906,907],{},"Extra large and extra small numbers can be written with scientific exponent notation. Using this exponent saves you time from writing lots of zeros behind or ahead of your number type:",[225,909,912],{"className":910,"code":911,"language":177},[228],"const myNum = 35e7\nconsole.log(myNum) // returns 350000000\nconsole.log(typeof myNum) // returns \"number\"\n\nconst myNum2 = 35e-7\nconsole.log(myNum2) // returns 0.0000035\n",[231,913,911],{"__ignoreMap":45},[234,915,917],{"id":916},"integer-precision-and-floating-precision","Integer Precision and Floating Precision",[173,919,920],{},"Furthermore, I would love to dive deeper into JavaScript number types. We have two types of numbers: integer precision and floating precision.",[173,922,923],{},"Integer precision numbers are those number types that don't have a decimal or exponent notation. These numbers are accurate to 15 digits:",[225,925,928],{"className":926,"code":927,"language":177},[228],"// Integer precision number\nconst myInteger = 42\nconsole.log(myInteger) // 42\nconsole.log(typeof myInteger) // 'number'\n",[231,929,927],{"__ignoreMap":45},[173,931,932,933],{},"There are deeper explanations to this; you can read more about it here: ",[801,934,935],{"href":935,"rel":936},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type",[805],[173,938,939],{},"Floating precision arithmetic points are numbers in JavaScript that aren't 100% accurate. For example:",[225,941,944],{"className":942,"code":943,"language":177},[228],"// Non-integer precision number\nconst myFloat = 3.14\nconsole.log(myFloat) // 3.14\nconsole.log(typeof myFloat) // 'number'\n",[231,945,943],{"__ignoreMap":45},[173,947,948,949],{},"You can also dive deeper into non-integer numbers here: ",[801,950,951],{"href":951,"rel":952},"https://developer.mozilla.org/en-US/docs/Glossary/float",[805],[234,954,956],{"id":955},"working-with-the-operator","Working with the + Operator",[173,958,959],{},"When you use the + operator with number types, it adds the numbers; when you use the + operator on a string, it concatenates the string.",[173,961,962],{},"For example:",[225,964,967],{"className":965,"code":966,"language":177},[228],"\n// Using the + operator with numbers\nconst myNum1 = 22\nconst myNum2 = 13\nconsole.log(myNum1 + myNum2) // returns 35\n\n// Using the + operator with a string\nconst myStr = \"string\"\nconst myNum3 = 13\nconsole.log(myStr + myNum3) // returns \"string13\"\n",[231,968,966],{"__ignoreMap":45},[346,970],{},[217,972,974],{"id":973},"equality-operators","Equality Operators",[173,976,977],{},"Now let's look at the equality operator. While programming, we will be using this operator constantly. As we all know, without this operator, we cannot assign a value to a variable or define a variable.",[173,979,980],{},"The equality operator comes with a strict (===) and loose (==) alternative for comparing values or data.",[234,982,984],{"id":983},"strict-equality","Strict Equality (===)",[173,986,987],{},"This operator does not perform coercion before comparing a value. For strict equality to return true, the values being compared must have the same data type and value.",[173,989,990],{},"// When comparing using strict equality",[225,992,995],{"className":993,"code":994,"language":177},[228],"\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 === myNum3) // this returns true\nconsole.log(myNum1 === myNum2) // this returns false\n",[231,996,994],{"__ignoreMap":45},[234,998,1000],{"id":999},"loose-equality","Loose Equality (==)",[173,1002,1003],{},"This equality must perform coercion or conversion before comparing values.",[225,1005,1008],{"className":1006,"code":1007,"language":177},[228],"\n// When comparing using loose equality\n\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 == myNum3) // this returns true\nconsole.log(myNum1 == myNum2) // this returns true\n",[231,1009,1007],{"__ignoreMap":45},[173,1011,1012],{},"Please note: There are many operators in JavaScript, but we are just looking at the most frequently used ones. Check my profile for an article on all JavaScript operators for a deeper understanding.",[346,1014],{},[217,1016,1018],{"id":1017},"null-type","Null Type",[173,1020,1021],{},"Null is a special primitive data type that indicates an empty value or an absence of a value. When a variable is assigned null, it means that the variable is not pointing to any object or variable in memory.",[234,1023,1025],{"id":1024},"primitive-vs-non-primitive","Primitive vs Non-Primitive",[173,1027,1028],{},"You might be wondering what primitive data types are:",[1030,1031,1032,1036],"ul",{},[1033,1034,1035],"li",{},"Primitive data types are data that are predefined in JavaScript",[1033,1037,1038],{},"Non-primitive data types are data that aren't predefined—it is the duty of the programmer to define these",[173,1040,1041],{},"Important: null and undefined are two different data types, although they play almost the same role in JavaScript.",[225,1043,1046],{"className":1044,"code":1045,"language":177},[228],"\nlet myVariable = null\nconsole.log(myVariable) // null\nconsole.log(typeof myVariable) // \"object\"\n",[231,1047,1045],{"__ignoreMap":45},[173,1049,1050],{},"In the example above, we assigned a variable to null, and you can clearly see what it returns. We also use the typeof operator to check for the data type, and it returns an object type.",[173,1052,1053],{},"The fact that typeof null is \"object\" in JavaScript is counterintuitive because we might expect it to be something like \"null\". This is because null is an empty object.",[346,1055],{},[217,1057,1059],{"id":1058},"undefined-type","Undefined Type",[173,1061,1062],{},"Undefined is a primitive data type that returns undefined when a variable isn't assigned a value. It represents the absence of any value, including objects or properties.",[173,1064,1065],{},"The difference between null and undefined is that null represents the intentional absence of an object.",[225,1067,1070],{"className":1068,"code":1069,"language":177},[228],"\nlet myVariable\nconsole.log(myVariable) // undefined\nconsole.log(typeof myVariable) // \"undefined\"\n",[231,1071,1069],{"__ignoreMap":45},[173,1073,1074],{},"Because the variable isn't defined in the example above, it automatically returns \"undefined\".",[346,1076],{},[217,1078,1080],{"id":1079},"boolean-type","Boolean Type",[173,1082,1083],{},"When working with programming languages, most times you will need a data type to check if a value is true or false, on or off, yes or no. This is where the boolean data type comes into play.",[173,1085,1086],{},"This data type only returns true or false:",[225,1088,1091],{"className":1089,"code":1090,"language":177},[228],"\nlet myBoolean1 = true\nlet myBoolean2 = false\n\nconsole.log(myBoolean1) // true\nconsole.log(typeof myBoolean1) // \"boolean\"\nconsole.log(myBoolean2) // false\nconsole.log(typeof myBoolean2) // \"boolean\"\n",[231,1092,1090],{"__ignoreMap":45},[346,1094],{},[217,1096,1098],{"id":1097},"symbol-type","Symbol Type",[173,1100,1101],{},"Symbols are primitive data types that were introduced in ECMAScript 2015 (ES6). They are unique and immutable values that can be used as keys for object properties.",[173,1103,1104],{},"Symbols can be created using the symbol function Symbol(), which returns a symbol. The symbol function takes an optional parameter of a string that serves as a description. These descriptions are mainly used for debugging and do not affect the uniqueness of the symbol.",[173,1106,1107],{},"const symbol1 = Symbol('mySymbol')\nconst symbol2 = Symbol('mySymbol')",[173,1109,1110],{},"console.log(symbol1 === symbol2) // false",[173,1112,1113],{},"From the example above, we got a falsy return value when comparing two symbols with the same description. This means two symbols with the same descriptions can never be equal.",[346,1115],{},[217,1117,1119],{"id":1118},"object-type-non-primitive-data-type","Object Type (Non-Primitive Data Type)",[173,1121,1122],{},"It wouldn't be cool if we only looked at primitive data types and didn't look into non-primitive data types. The object type is the only non-primitive data type we have in JavaScript.",[173,1124,1125],{},"Object is the only non-primitive and complex data type we have in JavaScript because you have to define it. Objects can be used to store collections of data. This data comes with property names; these property names are normally stored as strings, and the strings carry the values of the object.",[173,1127,1128],{},"Moreover, the values can be strings, numbers, or even arrays:",[225,1130,1133],{"className":1131,"code":1132,"language":177},[228],"\nconst person = {\n  name: \"Satochi\",\n  age: 25,\n  address: {\n    homeNum: 2,\n    street: \"Lincoln Avenue\",\n    city: \"Houston\",\n    state: \"Texas\"\n  }\n}\n\nconsole.log(person) // returns every detail: \"name\", \"age\", \"address\" of the object person\nconsole.log(typeof person) // returns \"object\"\n\n\n",[231,1134,1132],{"__ignoreMap":45},[173,1136,1137],{},"In the example above, we created an object variable called person and assigned properties of name, age, and address to it. When we log the console of person and typeof person, it brings out all the properties of person, and the typeof operator returns \"object\".",[346,1139],{},[217,1141,1143],{"id":1142},"summary","Summary",[1145,1146,1147,1163],"table",{},[1148,1149,1150],"thead",{},[1151,1152,1153,1157,1160],"tr",{},[1154,1155,1156],"th",{},"Data Type",[1154,1158,1159],{},"Category",[1154,1161,1162],{},"Example",[1164,1165,1166,1178,1188,1198,1208,1218,1228],"tbody",{},[1151,1167,1168,1172,1175],{},[1169,1170,1171],"td",{},"String",[1169,1173,1174],{},"Primitive",[1169,1176,1177],{},"\"hello\"",[1151,1179,1180,1183,1185],{},[1169,1181,1182],{},"Number",[1169,1184,1174],{},[1169,1186,1187],{},"42, 3.14",[1151,1189,1190,1193,1195],{},[1169,1191,1192],{},"Boolean",[1169,1194,1174],{},[1169,1196,1197],{},"true, false",[1151,1199,1200,1203,1205],{},[1169,1201,1202],{},"Null",[1169,1204,1174],{},[1169,1206,1207],{},"null",[1151,1209,1210,1213,1215],{},[1169,1211,1212],{},"Undefined",[1169,1214,1174],{},[1169,1216,1217],{},"undefined",[1151,1219,1220,1223,1225],{},[1169,1221,1222],{},"Symbol",[1169,1224,1174],{},[1169,1226,1227],{},"Symbol()",[1151,1229,1230,1233,1236],{},[1169,1231,1232],{},"Object",[1169,1234,1235],{},"Non-Primitive",[1169,1237,1238],{},"{name: \"John\"}",[346,1240],{},[217,1242,793],{"id":792},[173,1244,1245],{},"Now that we have come to the end of this technical article, I'm sure you all now understand data types in JavaScript.",[173,1247,1248],{},"Thank you for reading my article. Do not forget to follow me, share this article, and also hit that like button.",[173,1250,1251],{},"Sending you all peace, love, and light. Namaste",[346,1253],{},[173,1255,1256],{},"Got questions? Drop them in the comments below!",{"title":45,"searchDepth":307,"depth":307,"links":1258},[1259,1260,1263,1268,1272,1275,1276,1277,1278,1279,1280],{"id":848,"depth":307,"text":849},{"id":860,"depth":307,"text":861,"children":1261},[1262],{"id":878,"depth":312,"text":879},{"id":893,"depth":307,"text":894,"children":1264},[1265,1266,1267],{"id":903,"depth":312,"text":904},{"id":916,"depth":312,"text":917},{"id":955,"depth":312,"text":956},{"id":973,"depth":307,"text":974,"children":1269},[1270,1271],{"id":983,"depth":312,"text":984},{"id":999,"depth":312,"text":1000},{"id":1017,"depth":307,"text":1018,"children":1273},[1274],{"id":1024,"depth":312,"text":1025},{"id":1058,"depth":307,"text":1059},{"id":1079,"depth":307,"text":1080},{"id":1097,"depth":307,"text":1098},{"id":1118,"depth":307,"text":1119},{"id":1142,"depth":307,"text":1143},{"id":792,"depth":307,"text":793},"2023-04-24","A Comprehensive Explanation of Primitive and Object Types","https://plus.unsplash.com/premium_photo-1692241076210-9e696db67fce?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDd8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},{"title":14,"description":1282},"3UCeoz7xP4A4z8aVMMqe1RzT9SBUWeT6CWPh2H5uzqc",1773669616064]