Latest Tutorials

Learn about the latest technologies from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
NEW

JavaScript Compilation vs Interpretation: A Deep Dive

In this comprehensive guide, we will demystify a fascinating aspect of JavaScript, one of the most widely-used programming languages today. The key question we will grapple with is: "Is JavaScript a compiled or interpreted language?" We'll probe into the complex depths of JavaScript code execution and the functioning of modern JavaScript engines. This understanding will equip you to grasp the finer dynamics of JavaScript, empowering you to evolve into a more proficient JavaScript developer. JavaScript is frequently labeled as an 'interpreted' language, a tag attributed to its execution style. However, this description isn't wholly accurate. While it doesn't generate an executable file like conventional compiled languages, JavaScript does undergo a compilation phase. This guide aims to shed light on this intriguing facet of JavaScript, thereby dispelling any prevailing misconceptions. Conventionally, 'compiled' languages such as C++ convert the source code into a binary executable file. This file can then be disseminated and executed. 'Interpreted' languages, on the contrary, don't yield an executable file. They rely on interpreters to read and execute the code in real-time. In the case of JavaScript, the engines don't produce an executable file, thus reinforcing the perception of it being an interpreted language. Nevertheless, JavaScript code is compiled into an intermediate form known as 'byte code'. This byte code is subsequently executed by the virtual machine. Although the virtual machine interprets byte code, modern JavaScript engines deploy a "Just-in-time (JIT) compiler" to transmute the byte code into native machine code. This machine code executes at a faster pace than byte code, thereby boosting performance. The JIT compilation is a methodology extensively leveraged by present-day JavaScript engines to augment the execution speed of JavaScript code. Post the conversion of JavaScript code into byte code, the engine executes it. The engine also implements several optimizations based on the data accumulated during code execution to enhance performance. One such optimization strategy involves the compilation of byte code into machine code, which executes quicker. The engine earmarks the frequently executed or "hot" sections of the code for this process. These "hot" segments are compiled into native machine code, which is then executed in lieu of the corresponding byte code. The JIT compiler significantly diverges from traditional compilers employed by languages such as C++. Unlike conventional compilers that compile the code in advance, the JIT compiler compiles the code at runtime, during the code execution process. Despite the distribution of JavaScript code in source code format instead of executable format, it is compiled into byte code and potentially into native machine code. Based on the above elaboration, it can be conclusively stated that JavaScript is a fusion of both compiled and interpreted language. It amalgamates the advantages of both paradigms, employing a hybrid approach for efficient execution. The non-existence of an executable output file coupled with the presence of a JIT compiler that compiles code at runtime endows JavaScript with a distinctive identity. Grasping these nuances of JavaScript can offer invaluable insights into the mechanics of code execution and can steer developers towards crafting more effective and high-performing JavaScript code. Therefore, the next time you are quizzed about whether JavaScript is compiled or interpreted, you'll be well-equipped with a sound response! To dive deeper into JavaScript and explore concepts like this, the book Advanced JavaScript Unleashed by Yousaf, an experienced full-stack software engineer, is highly recommended. With a deep understanding of JavaScript and valuable insights shared in this book, any JavaScript developer aspiring to achieve greater heights will find it beneficial.

    NEW

    🔮 No More Guesswork. Introducing Student Reviews on Course Pages!🔍

    Have you ever found yourself teetering on the edge of purchasing a course? It's like you're on a suspenseful game show, faced with choosing a mystery door. It could be total junk or it might be GOLD! Exactly what your looking for. The stakes are high. Will it be the right choice? We’ve all been there, desperately scouring the internet for any snippet of information that might shed light on what lies ahead. Will the course be a game-changer or a glorified nap session? Without the wisdom of those who've gone before us, it's like navigating a jungle blindfolded — exciting, yes, but also potentially treacherous. We're here to banish uncertainty and save you valuable time, eliminating the mystery and suspense— although we apologize if you were looking forward to that adventure and countless hours of wasted time. You'll NOW find student reviews proudly displayed on course pages by default! To uncover firsthand insights from students who've already embarked on the learning journey you're considering, simply navigate to newline.co and select any course that piques your interest. Once on the course page, scroll down to find the section titled "What Students are Saying." Here, you'll discover invaluable feedback directly from those who have gone before you. Gain clarity on the most valuable aspects of the course and what you can expect to gain from enrolling. Let their experiences guide you in making informed decisions about your educational path. Ready to help future learners navigate that jungle of course options? Leave your own review for any course you're enrolled in! At the end of each module, you'll find a rating scale and an opportunity to share your thoughts. We ALL want to hear your thoughts! Because really, who needs mystery doors and potential for a zonk?

    Thumbnail Image of Tutorial 🔮 No More Guesswork. Introducing Student Reviews on Course Pages!🔍

    I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

    This has been a really good investment!

    Advance your career with newline Pro.

    Only $30 per month for unlimited access to over 60+ books, guides and courses!

    Learn More
    NEW

    A Comprehensive Guide to Custom Iterables in JavaScript

    This article embarks on a journey into the captivating world of JavaScript custom iterable objects. It's an important topic when there is a need to iterate over related objects or define specific iteration behaviors for certain objects. Iterables and iterators are frequently used in JavaScript coding. An iterable is an object that determines its iteration behavior, like the values looped over in a for...of construct, while an iterator is an object that maintains its current position in an iterable. Understanding these two principles, we can create custom iterable objects in JavaScript by implementing the Symbol.iterator method, which returns the iterator object that includes the next method. Let's dive deeper into this concept with a practical example. Imagine a scenario where student objects must be made iterable to streamline the printing of their properties using the for...of loop. The process commences with the creation of a Student constructor, which will be utilized to generate student objects: To render all student objects iterable, the Symbol.iterator method is implemented in the Student.prototype object: Now, when iterating over any student instance, the formatted values defined in the student iterator's next method will be obtained: The brilliance of creating custom iterables in JavaScript lies in the flexibility it offers. The iteration behavior can be fashioned according to any logic, and the returned value in the iterator result object can be formatted in any preferred manner. However, it's noteworthy that the studentIterator object in our example does not inherit from the Iterator.prototype object, so it isn't iterable: This can be addressed by either explicitly establishing the prototype chain link between the Iterator.prototype object and our studentIterator object, or by implementing the Symbol.iterator method in the studentIterator object to make it iterable: Now, the studentIterator object is iterable and can be used with the for...of loop if needed. Currently, the Symbol.iterator method is defined in the Student.prototype object, but it is enumerable, which isn't ideal. It can be made non-enumerable by defining it using the Object.defineProperty method: This article dove into the creation of custom iterable objects in JavaScript. The process of outlining the iteration behavior for any suitable object or a group of related objects was discussed. We also improved the implementation by making the Symbol.iterator method non-enumerable. This understanding is critical when managing collections of related objects, leading to a more flexible and adaptable JavaScript codebase. To dive deeper into JavaScript and explore concepts like this, the book Advanced JavaScript Unleashed by Yousaf, an experienced full-stack software engineer, is highly recommended. With a deep understanding of JavaScript and valuable insights shared in this book, any JavaScript developer aspiring to achieve greater heights will find it beneficial.

      NEW

      📢Your Exclusive Preview to the Next Learning Wave🏄‍♀️

      The uncertainty of what courses will be available in the future can be a real headache, especially when you're eager to stay ahead of the curve, expand your skill set or are planning to take advantage of your annual employer education reimbursement benefit. To help with this we've launched a brand new, "Coming Soon" section, right on our homepage! Stay in the loop with upcoming courses, giving you the clarity and confidence to plan your learning. It's like having a roadmap to success right at your fingertips! Head over to https://www.newline.co/ and go to the 'Explore newline Courses' section. There you'll see the new 'Coming Soon' section live. Right now we have 20+ titles in the active production - something for everyone. Here's a quick overview of what's coming As we inch closer to the title's launch date, we'll continue to enrich these pages with even more comprehensive details. If patience isn't your virtue, or if you're already certain about a particular course, don't hesitate to drop your email address on its page. By doing so, you'll secure your spot as a privileged insider, receiving updates on the course's progress, status, and launch details. And here's a little insider tip : there are limited opportunities to beta-test these courses, offering you an exclusive, behind-the-scenes peek before the rest of the world for FREE! If you haven't spotted the course you're eagerly anticipating, let us know! We're committed to publishing courses that cover exactly what your looking for. Head over to our dedicated page at newline.co/requests/courses and let us know what you want to see in the pipeline. Whether it's a specific topic, skill, or area of interest, we're all ears. Our new "Coming Soon" section will be regularly refreshed, offering you a firsthand glimpse into what's currently in the pipeline. Stay ahead of the curve and catch the wave of knowledge heading your way at any time! 🌊

      Thumbnail Image of Tutorial 📢Your Exclusive Preview to the Next Learning Wave🏄‍♀️
      NEW

      JavaScript Memory Management: Misconceptions and Grasping the Reality

      In this comprehensive guide, we will traverse through the complexities of memory management in JavaScript. There are numerous myths regarding memory allocation in JavaScript; a prevalent one being primitive values are stored on the stack , while objects are housed on the heap . However, the reality is far more nuanced. We will debunk these misconceptions about memory allocation, explore the role of the JavaScript engine, and shed light on the concept of automatic garbage collection . Memory allocation in JavaScript extends beyond the simplistic dichotomy of stack and heap storage. The ECMAScript specification , which forms the framework for scripting languages including JavaScript, does not dictate specific rules for memory allocation or deallocation. Consequently, decision-making about memory management is left to the individual JavaScript engines. Distinct JavaScript engines may implement diverse strategies for memory management. For instance, in the V8 engine , utilized by Chrome and Node.js, virtually all values, including objects, arrays, numbers, and strings, are stored on the heap. This method doesn't imply that all JavaScript engines allocate everything on the heap. Some might optimize memory usage by storing temporary values on the stack, particularly if these values are not required beyond a function call. The crucial takeaway is that there's no universal rule concerning memory allocation in JavaScript. Simplistic assumptions like " primitives go on the stack and objects go on the heap " fail to capture the complexities inherent in JavaScript engines. In contrast to languages like C that necessitate programmers to manually deallocate memory when it's no longer needed, JavaScript streamlines this process through automatic garbage collection . JavaScript engines are equipped with a garbage collector that identifies and marks redundant memory blocks for garbage collection. Contemporary JavaScript engines utilize the Mark-and-sweep algorithm to identify 'unreachable' memory blocks, i.e., blocks that no longer have any active references in the application. Unlike Java, where programmers can manually initiate garbage collection, JavaScript doesn't offer this level of control. While some may perceive this as a limitation, it's predominantly viewed as an advantage as it mitigates common memory leaks that occur in languages devoid of automatic garbage collection. In summary, memory management in JavaScript is not as simplistic as it's often perceived. It encompasses intricate decisions made by the JavaScript engine and automatic garbage collection. The stereotype that " primitives go on the stack and objects go on the heap " is just a myth. On the contrary, memory allocation is a sophisticated process differing across various JavaScript engines. Understanding these nuances can enable programmers to appreciate the flexibility and sophistication inherent in JavaScript as a programming language. To dive deeper into JavaScript and explore concepts like this, the book Advanced JavaScript Unleashed by Yousaf, an experienced full-stack software engineer, is highly recommended. With a deep understanding of JavaScript and valuable insights shared in this book, any JavaScript developer aspiring to achieve greater heights will find it beneficial.