{"version":3,"sources":["webpack:///./src/content/The_Power_of_Efficiency_Big_O_Analysis.mdx","webpack:///./src/components/MdxLink.vue?af12","webpack:///src/components/MdxLink.vue","webpack:///./src/components/MdxLink.vue?b35b","webpack:///./src/components/MdxLink.vue"],"names":["h","layoutProps","MDXLayout","MDXContent","components","props","require","isMDXComponent","name","inject","$mdxComponents","default","computed","this","render","createElement","mdx","bind","_vm","_h","$createElement","_c","_self","attrs","on","$event","preventDefault","navigate","_t","staticRenderFns","to","type","String","required","methods","$router","push","catch","err","console","error","component"],"mappings":"6HAEIA,E,yDAMEC,EAAc,GAGdC,EAAY,UAClB,SAASC,EAAT,GAGG,IAFDC,EAEC,EAFDA,WACGC,EACF,iCACD,mBAAsBJ,EAAtB,GAAuCI,EAAvC,mBAA0DD,EAA1D,QAA8E,gBAA9E,mBAES,sBAFT,0DAImB,OAJnB,+BAIsC,OAAS,CACvC,KAAQ,mBALhB,8CAOmB,OAPnB,+BAOsC,OAAS,CACvC,KAAQ,gDARhB,2EAUmB,OAVnB,+BAUsC,OAAS,CACvC,KAAQ,+CAXhB,2EAamB,OAbnB,+BAasC,OAAS,CACvC,KAAQ,uCAdhB,kEAgBmB,OAhBnB,+BAgBsC,OAAS,CACvC,KAAQ,iBAjBhB,sCAoBS,iBApBT,mCAsBQ,uBAtBR,+bA4BuB,MA5BvB,iDA4B6E,MA5B7E,oDA4BsI,MA5BtI,qgBAkCS,8CAlCT,gEAoCQ,uBApCR,woBA2CsE,MA3CtE,4RA6CmI,MA7CnI,wGA+Ca,2CA/Cb,gBAgDW,iCAhDX,WAgDiDE,EAAQ,QAhDzD,QAgD8I,OAhD9I,IAgDyJ,yBAhDzJ,YAgD8L,8BAhD9L,2CAmDc,mDAnDd,QAmDyE,YAnDzE,oYAqDS,6CArDT,gEAuDQ,uBAvDR,0WA4D4B,MA5D5B,oDA4DqF,MA5DrF,mKA6D0C,MA7D1C,+IA8D4B,MA9D5B,qJA8DsL,MA9DtL,yIA+D8G,MA/D9G,wFAgE4B,MAhE5B,6KAiE0C,MAjE1C,2FAiE0I,MAjE1I,iIAmE4B,MAnE5B,mIAmEoK,MAnEpK,2DAmEoO,MAnEpO,iDAmE0R,MAnE1R,yHAoEkG,MApElG,6DAqE4B,MArE5B,sJAqEuL,MArEvL,6PAwE4B,MAxE5B,wPAyE6G,MAzE7G,qHA2E4B,MA3E5B,gQA4EmH,MA5EnH,uGA8E4B,MA9E5B,8PA+E2G,MA/E3G,iGAgF4B,MAhF5B,2KAiFyB,MAjFzB,mTAoFS,qCApFT,uDAsFQ,uBAtFR,ijBA4FoB,MA5FpB,wHA8FmB,OA9FnB,yJA+FmB,OA/FnB,yIAgGmB,OAhGnB,sKAkGmB,OAlGnB,wKAoGmB,OApGnB,gXAyGS,eAzGT,iCA2GQ,uBA3GR,0bAiH4B,MAjH5B,uBAqHFH,EAAWI,gBAAiB,EAEb,cACbC,KAAM,MACNC,OAAQ,CACNC,eAAgB,CACdC,QAAS,kBAAM,iBAAO,OAG1BC,SAAU,CACRR,WADQ,WAEN,OAAOS,KAAKH,mBAGhBI,OAZa,SAYNC,GAEL,OADAf,EAAIgB,OAAIC,KAAK,CAAEF,gBAAeX,WAAYS,KAAKT,aACxCD,EAAW,CAAEC,WAAYS,KAAKT,gB,oCCrJzC,IAAIU,EAAS,WAAa,IAAII,EAAIL,KAASM,EAAGD,EAAIE,eAAmBC,EAAGH,EAAII,MAAMD,IAAIF,EAAG,OAAOE,EAAG,IAAI,CAACE,MAAM,CAAC,KAAO,KAAKC,GAAG,CAAC,MAAQ,SAASC,GAAgC,OAAxBA,EAAOC,iBAAwBR,EAAIS,SAASF,MAAW,CAACP,EAAIU,GAAG,YAAY,IAC/NC,EAAkB,GCMtB,G,UAAA,CACErB,KAAM,UACNH,MAAO,CACLyB,GAAI,CACFC,KAAMC,OACNC,UAAU,IAGdC,QAAS,CACPP,SADJ,WAGMd,KAAKsB,QAAQC,KAAKvB,KAAKiB,IAAIO,OAAM,SAAvC,GACyB,yBAAbC,EAAI9B,MACN+B,QAAQC,MAAMF,UCpByT,I,YCO7UG,EAAY,eACd,EACA3B,EACAe,GACA,EACA,KACA,KACA,MAIa,OAAAY,E","file":"js/chunk-4e65855e.ff13de0f.js","sourcesContent":["// vue babel plugin doesn't support pragma replacement\nimport { mdx } from '@mdx-js/vue'\nlet h;\n/* @jsxRuntime classic */\n/* @jsx mdx */\nimport MdxLink from '../components/MdxLink.vue';\n\n\nconst layoutProps = {\n  \n};\nconst MDXLayout = \"wrapper\"\nfunction MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n    <h4 id=\"table-of-contents\">Table of contents:</h4>\n    <ol>\n      <li parentName=\"ol\"><a parentName=\"li\" {...{\n          \"href\": \"#introduction\"\n        }}>{`Introduction`}</a></li>\n      <li parentName=\"ol\"><a parentName=\"li\" {...{\n          \"href\": \"#the-power-of-big-o-analysis-in-javascript\"\n        }}>{`The Power of Big O Analysis in JavaScript`}</a></li>\n      <li parentName=\"ol\"><a parentName=\"li\" {...{\n          \"href\": \"#exploring-javascripts-built-in-functions\"\n        }}>{`Exploring JavaScript's Built-in Functions`}</a></li>\n      <li parentName=\"ol\"><a parentName=\"li\" {...{\n          \"href\": \"#craftsmanship-in-code-efficiency\"\n        }}>{`Craftsmanship in Code Efficiency`}</a></li>\n      <li parentName=\"ol\"><a parentName=\"li\" {...{\n          \"href\": \"#conclusion\"\n        }}>{`Conclusion`}</a></li>\n    </ol>\n    <h2 id=\"introduction\">\n  Introduction\n  <a href=\"#table-of-contents\">↑ go up</a>\n    </h2>\n    <p>{`Imagine you have a toy box filled with treasures, and you're searching for a specific toy.\nBig O analysis helps us understand how quickly we can find that toy as the toy box gets bigger.\nIt's like a magic symbol that describes the speed of algorithms.`}</p>\n    <p>{`Just like finding toys, some algorithms are super fast, while others can be slower. Big O analysis uses some symbols like\n`}<inlineCode parentName=\"p\">{`O(1)`}</inlineCode>{`, `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, or `}<inlineCode parentName=\"p\">{`O(n^2)`}</inlineCode>{` to describe the efficiency of algorithms.`}</p>\n    <p>{`When we talk about the efficiency of an algorithm, we're interested in two things: time complexity\nand space complexity. Time complexity refers to how long an algorithm takes to solve a problem,\nwhile space complexity refers to how much memory or storage an algorithm needs to do its job.`}</p>\n    <p>{`By analyzing these complexities, we can make better decisions about which algorithms to use in different\nuse case situations.`}</p>\n    <h2 id=\"the-power-of-big-o-analysis-in-javascript\">\n  The Power of Big O Analysis in JavaScript\n  <a href=\"#table-of-contents\">↑ go up</a>\n    </h2>\n    <p>{`Big O analysis isn't just for the \"backend\", it's equally important on the \"client side\".\nWhether you're playing a game or using a website, efficiency matters. It helps programmers optimize their code,\nmaking it run smoothly and ensuring a delightful experience for users.`}</p>\n    <p>{`It allows us to choose the most efficient algorithms and data structures, resulting in faster and more responsive software.`}</p>\n    <p>{`For example, let's consider a scenario where we need to search for a specific name in a list of names. With a linear\nsearch algorithm, the time complexity would be `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, where \"n\" is the number of names in the list. This means that\nas the list grows larger, the search time increases linearly.`}</p>\n    <p>{`However, with a more efficient algorithm like binary search, the time complexity can be reduced to `}<inlineCode parentName=\"p\">{`O(log n)`}</inlineCode>{`, where the\nsearch time grows much slower as the list size increases.`}</p>\n    <div style=\"display: flex; justify-content: center;\">\n  <img style=\"max-width: 100%; height: auto;\" src={require('@/assets/img/post/Introduction_to_Algorithms/Big-O_complexity_Chart.jpeg')} loading=\"lazy\" alt=\"Big-O complexity Chart\" description=\"Big-O complexity Chart\" />\n    </div>\n    <p>{`Check-out\n: `}<MdxLink to=\"/post/Exploring_Sorting_Algorithms_in_JavaScript\" mdxType=\"MdxLink\">{`Exploring Sorting Algorithms in JavaScript`}</MdxLink>{` if you want to go slightly deeper in the topic.`}</p>\n    <p>{`By understanding Big O analysis, we can identify potential performance bottlenecks in our JavaScript code and optimize it accordingly. This ensures that our applications and websites run smoothly, even when dealing with large datasets or complex operations.`}</p>\n    <h2 id=\"exploring-javascripts-built-in-functions\">\n  Exploring JavaScript's Built-in Functions\n  <a href=\"#table-of-contents\">↑ go up</a>\n    </h2>\n    <p>{`JavaScript provides us with a range of powerful built-in functions that make our lives easier.\nLet's explore a few examples and understand their time and space complexities. Having an understanding\nof these complexities can help us make better decisions when choosing the right functions for.`}</p>\n    <p><inlineCode parentName=\"p\">{`push`}</inlineCode>{` and `}<inlineCode parentName=\"p\">{`pop`}</inlineCode>{`: These functions allow us to add or remove elements from an array quickly. They have a constant\ntime complexity of `}<inlineCode parentName=\"p\">{`O(1)`}</inlineCode>{`, meaning they execute in the same amount of time, regardless of the size of the array.`}</p>\n    <p><inlineCode parentName=\"p\">{`slice`}</inlineCode>{`: This function creates a new array by copying a portion of the original one. Its time complexity is `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`,\nwhere \"n\" is the size of the resulting sliced array. It also has a space complexity of `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{` because it creates a new array.`}</p>\n    <p><inlineCode parentName=\"p\">{`sort`}</inlineCode>{`: Sorting an array can be a complex task. JavaScript's built-in sorting function typically has an average\ntime complexity of `}<inlineCode parentName=\"p\">{`O(n log(n))`}</inlineCode>{` and a worst-case time complexity of `}<inlineCode parentName=\"p\">{`O(n^2)`}</inlineCode>{`. It may seem slower for large arrays\nbut performs well in most cases.`}</p>\n    <p><inlineCode parentName=\"p\">{`concat`}</inlineCode>{`: This function combines multiple arrays into a new array. Its time complexity is `}<inlineCode parentName=\"p\">{`O(m + n)`}</inlineCode>{`, where `}<inlineCode parentName=\"p\">{`m`}</inlineCode>{` and `}<inlineCode parentName=\"p\">{`n`}</inlineCode>{`\nare the sizes of the input arrays. Similarly, its space complexity is also `}<inlineCode parentName=\"p\">{`O(m + n)`}</inlineCode>{`.`}</p>\n    <p><inlineCode parentName=\"p\">{`indexOf`}</inlineCode>{`: This function is used to find the index of a specific element in an array. Its time complexity is `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`,\nas it may need to traverse the entire array to find the desired element. However, if the array is sorted, we can use\nthe more efficient binarySearch function with a time complexity of O(log n).`}</p>\n    <p><inlineCode parentName=\"p\">{`map`}</inlineCode>{`: The map function is used to transform each element of an array based on a provided callback function. It creates\na new array with the same length as the original array. The time complexity of map is `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, as it performs the callback\nfunction on each element once.`}</p>\n    <p><inlineCode parentName=\"p\">{`filter`}</inlineCode>{`: The filter function is used to create a new array with elements that pass a certain condition. It iterates over\neach element of the array, performing a check for the condition. Its time complexity is also`}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, as it may need to examine\neach element once.`}</p>\n    <p><inlineCode parentName=\"p\">{`reduce`}</inlineCode>{`: The reduce function is used to aggregate the elements of an array into a single value. It applies a callback function\nto each element, accumulating a final result. The time complexity of reduce is also `}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, as it needs to visit each element once.`}</p>\n    <p><inlineCode parentName=\"p\">{`includes`}</inlineCode>{`: This function checks if an array includes a specific element and returns a boolean value. It has a time complexity\nof`}<inlineCode parentName=\"p\">{`O(n)`}</inlineCode>{`, as it may need to traverse the entire array to find the element.`}</p>\n    <p>{`By understanding the time and space complexities of these built-in functions, we can choose the most efficient ones for our\nalgorithm, ensuring optimal performance in our JavaScript applications.`}</p>\n    <h2 id=\"craftsmanship-in-code-efficiency\">\n  Craftsmanship in Code Efficiency\n  <a href=\"#table-of-contents\">↑ go up</a>\n    </h2>\n    <p>{`Efficiency plays a vital role in software development, by considering time and space complexities, we optimize our code and\nimprove performance. Efficient code ensures faster responses, scalability as the software grows, and optimal resource utilization.\nIt's like crafting a masterpiece that runs smoothly and impresses users. To achieve efficiency, we need to choose the right\nalgorithms and data structures, write clean and optimized code, and be mindful of the trade-offs between time and space`}</p>\n    <p><em parentName=\"p\">{`Here are a few best practices to keep in mind when aiming for code efficiency:`}</em></p>\n    <ol>\n      <li parentName=\"ol\">{`Choose the appropriate data structures and algorithms for the task at hand. Understand their time and space complexities.`}</li>\n      <li parentName=\"ol\">{`Minimize unnecessary computations and iterations. Optimize loops and conditionals for better performance.`}</li>\n      <li parentName=\"ol\">{`Avoid unnecessary memory usage and optimize memory-intensive operations. Reuse variables and release resources when\nno longer needed.`}</li>\n      <li parentName=\"ol\">{`Utilize built-in functions and libraries when they offer optimized implementations. Leverage the expertise of the JavaScript\ncommunity.`}</li>\n      <li parentName=\"ol\">{`Regularly profile and analyze your code to identify bottlenecks and areas for improvement. Tools like profilers and debuggers\ncan help in this process.`}</li>\n    </ol>\n    <p>{`By following these best practices and considering time and space complexities, we can unlock the full potential of JavaScript\nand create efficient, high-performing applications.`}</p>\n    <h2 id=\"conclusion\">\n  Conclusion\n  <a href=\"#table-of-contents\">↑ go up</a>\n    </h2>\n    <p>{`By understanding efficiency, we can create scalable, and resource-efficient software. Remember to consider time and space\ncomplexities when writing code, as it leads to a better user experience.`}</p>\n    <p>{`Embrace the art of crafting efficient code, and let it be the foundation of your coding journey.`}</p>\n    <p>{`Keep exploring, coding, and optimizing your way to success.`}</p>\n    <p><inlineCode parentName=\"p\">{`Happy coding!`}</inlineCode></p>\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n\nexport default {\n  name: 'Mdx',\n  inject: {\n    $mdxComponents: {\n      default: () => () => ({})\n    }\n  },\n  computed: {\n    components() {\n      return this.$mdxComponents()\n    }\n  },\n  render(createElement) {\n    h = mdx.bind({ createElement, components: this.components })\n    return MDXContent({ components: this.components })\n  }\n}\n   ","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',{attrs:{\"href\":\"#\"},on:{\"click\":function($event){$event.preventDefault();return _vm.navigate($event)}}},[_vm._t(\"default\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <a href=\"#\" @click.prevent=\"navigate\">\n    <slot />\n  </a>\n</template>\n\n<script>\nexport default {\n  name: 'MdxLink',\n  props: {\n    to: {\n      type: String,\n      required: true,\n    },\n  },\n  methods: {\n    navigate() {\n      // Use Vue Router's programmatic navigation to ensure it works\n      this.$router.push(this.to).catch(err => {\n        if (err.name !== 'NavigationDuplicated') {\n          console.error(err);\n        }\n      });\n    },\n  },\n};\n</script>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MdxLink.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MdxLink.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MdxLink.vue?vue&type=template&id=9b234c46&\"\nimport script from \"./MdxLink.vue?vue&type=script&lang=js&\"\nexport * from \"./MdxLink.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}