<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Abhishek Bankar</title>
    <description>The latest articles on DEV Community by Abhishek Bankar (@theabhi).</description>
    <link>https://dev.to/theabhi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4126115%2Fd22ea5fc-5ebc-4b96-9df2-f9611cfe4f61.jpg</url>
      <title>DEV Community: Abhishek Bankar</title>
      <link>https://dev.to/theabhi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/theabhi"/>
    <language>en</language>
    <item>
      <title>What Is JavaScript &amp; How Does It Run?</title>
      <dc:creator>Abhishek Bankar</dc:creator>
      <pubDate>Tue, 15 Sep 2026 11:15:38 +0000</pubDate>
      <link>https://dev.to/theabhi/what-is-javascript-how-does-it-run-5bd7</link>
      <guid>https://dev.to/theabhi/what-is-javascript-how-does-it-run-5bd7</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;When we open a website, we usually see text, images, buttons, forms, menus, animations, and many other elements.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;HTML gives the page its structure. CSS controls how those elements look. But something is still missing.&lt;/p&gt;

&lt;p&gt;What happens when we click a button?&lt;/p&gt;

&lt;p&gt;What happens when a menu opens?&lt;/p&gt;

&lt;p&gt;How does a website validate a form, fetch data from a server, or update part of the page without reloading the entire page?&lt;/p&gt;

&lt;p&gt;This is where JavaScript comes in.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is JavaScript?
&lt;/h2&gt;

&lt;p&gt;JavaScript is a programming language used to add behavior and logic to applications.&lt;/p&gt;

&lt;p&gt;On the web, JavaScript makes webpages interactive. It can respond to user actions, change content on a page, validate user input, communicate with servers, and perform application logic.&lt;/p&gt;

&lt;p&gt;But JavaScript is not limited to browsers. It can also be used for server-side development, desktop applications, development tools, and many other types of software.&lt;/p&gt;

&lt;p&gt;At a simple level, you can think of JavaScript as the language that allows us to describe &lt;strong&gt;what an application should do&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Abhishek&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we are giving JavaScript instructions. A JavaScript environment processes those instructions and produces the corresponding result.&lt;/p&gt;

&lt;p&gt;That basic idea is important: &lt;strong&gt;we write instructions in JavaScript, and a JavaScript environment executes them.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  HTML, CSS and JavaScript
&lt;/h2&gt;

&lt;p&gt;A web application usually involves three technologies with different responsibilities.&lt;/p&gt;

&lt;h3&gt;
  
  
  HTML - Structure
&lt;/h3&gt;

&lt;p&gt;HTML defines the structure and content of a webpage.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;button&amp;gt;&lt;/span&gt;Buy Now&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;HTML tells the browser that there is a button on the page.&lt;/p&gt;

&lt;h3&gt;
  
  
  CSS - Presentation
&lt;/h3&gt;

&lt;p&gt;CSS controls how that HTML is presented.&lt;/p&gt;

&lt;p&gt;It can control things such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Colors&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fonts&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Spacing&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Size&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Layout&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Positioning&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Responsive behavior&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  JavaScript - Behavior
&lt;/h3&gt;

&lt;p&gt;JavaScript adds behavior and application logic.&lt;/p&gt;

&lt;p&gt;For example, when a user clicks &lt;strong&gt;Buy Now&lt;/strong&gt;, JavaScript can respond to that action and perform some operation.&lt;/p&gt;

&lt;p&gt;A simple way to remember the difference is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HTML        → What exists?
CSS         → How does it look?
JavaScript  → What does it do?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  A simple real-world analogy
&lt;/h3&gt;

&lt;p&gt;One analogy I find useful when learning this is to think of a webpage as a human body.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HTML        → Skeleton / structure
CSS         → Appearance
JavaScript  → Brain / behavior
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;p&gt;The analogy isn't technically perfect, but it gives us a simple mental model.&lt;/p&gt;

&lt;p&gt;The skeleton gives the body its structure, appearance makes it look the way it does, and the brain controls behavior.&lt;/p&gt;

&lt;p&gt;Similarly, HTML defines the structure, CSS controls presentation, and JavaScript handles behavior and logic.&lt;/p&gt;




&lt;h1&gt;
  
  
  Where Does JavaScript Run?
&lt;/h1&gt;

&lt;p&gt;JavaScript needs an environment capable of understanding and executing JavaScript code.&lt;/p&gt;

&lt;p&gt;Two common environments are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Web browsers&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Node.js&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  JavaScript in the Browser
&lt;/h2&gt;

&lt;p&gt;When JavaScript runs inside a browser such as Chrome, Firefox, or Safari, the browser provides an environment in which JavaScript can execute.&lt;/p&gt;

&lt;p&gt;Different browsers use different JavaScript engines.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Browser&lt;/th&gt;
&lt;th&gt;JavaScript Engine&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Chrome&lt;/td&gt;
&lt;td&gt;V8&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Firefox&lt;/td&gt;
&lt;td&gt;SpiderMonkey&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Safari&lt;/td&gt;
&lt;td&gt;JavaScriptCore&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The browser does much more than just execute JavaScript. It also provides APIs that allow JavaScript to interact with the webpage and the browser environment.&lt;/p&gt;

&lt;p&gt;This is what makes browser-based JavaScript useful for building interactive web applications.&lt;/p&gt;

&lt;p&gt;For example, JavaScript running in a browser can respond to a button click, update the page, read user input, or request data from a server.&lt;/p&gt;




&lt;h1&gt;
  
  
  JavaScript with Node.js
&lt;/h1&gt;

&lt;p&gt;JavaScript can also run outside the browser.&lt;/p&gt;

&lt;p&gt;This is where &lt;strong&gt;Node.js&lt;/strong&gt; comes in.&lt;/p&gt;

&lt;p&gt;Node.js is a JavaScript runtime that allows JavaScript to run outside a browser. It uses Google's V8 JavaScript engine and provides additional capabilities needed for server-side and general-purpose development.&lt;/p&gt;

&lt;p&gt;For example, JavaScript running in Node.js can be used to build:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Web servers&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;APIs&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Backend applications&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Command-line tools&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Development tooling&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One distinction is especially important here:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JavaScript
    ↓
Programming language

V8
    ↓
JavaScript engine

Node.js
    ↓
JavaScript runtime built around V8
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So Node.js is &lt;strong&gt;not a JavaScript engine&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It uses the V8 engine to execute JavaScript and provides additional runtime capabilities around it.&lt;/p&gt;

&lt;p&gt;This distinction becomes increasingly important as we start learning how JavaScript works outside the browser.&lt;/p&gt;




&lt;h1&gt;
  
  
  What Is a JavaScript Engine?
&lt;/h1&gt;

&lt;p&gt;A JavaScript engine is software designed to process and execute JavaScript code.&lt;/p&gt;

&lt;p&gt;Different environments can use different engines.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Chrome     → V8
Firefox    → SpiderMonkey
Safari     → JavaScriptCore
Node.js    → V8
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When we write JavaScript, the engine takes that source code and processes it so that the instructions can actually be executed by the computer.&lt;/p&gt;

&lt;p&gt;A simplified mental model looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JavaScript Source Code
          ↓
    JavaScript Engine
          ↓
       Execution
          ↓
        Result
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The actual internals are more complicated than this. A JavaScript engine doesn't simply read our code and execute each line exactly as written.&lt;/p&gt;

&lt;p&gt;It parses and processes the code and performs various execution and optimization steps.&lt;/p&gt;

&lt;p&gt;For now, we don't need to go deep into those details.&lt;/p&gt;

&lt;p&gt;The important idea is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;A JavaScript engine is the software responsible for processing and executing JavaScript code.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We'll come back to what happens inside the engine later when we explore JavaScript's execution model and engine performance in more detail.&lt;/p&gt;




&lt;h1&gt;
  
  
  What Happens When JavaScript Code Runs?
&lt;/h1&gt;

&lt;p&gt;Consider this code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Abhishek&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;At a high level, we can think about what happens like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;JavaScript source code
        ↓
JavaScript engine
        ↓
Code is processed
        ↓
Instructions are executed
        ↓
"Abhishek" is printed
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first statement creates a variable called &lt;code&gt;name&lt;/code&gt; and gives it the value &lt;code&gt;"Abhishek"&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;The second statement asks JavaScript to print the value stored in &lt;code&gt;name&lt;/code&gt; to the console.&lt;/p&gt;

&lt;p&gt;The important part is that the JavaScript source code we write is not directly understood by the computer as-is. A JavaScript engine is responsible for processing that code and executing it.&lt;/p&gt;

&lt;p&gt;There is a lot more happening behind the scenes, but understanding this basic flow gives us the right starting point.&lt;/p&gt;

&lt;p&gt;Later, when we learn about execution contexts, the call stack, memory, parsing, compilation, and optimization, this simple model will become much more detailed.&lt;/p&gt;




&lt;h1&gt;
  
  
  Statements and Expressions
&lt;/h1&gt;

&lt;p&gt;JavaScript code contains different kinds of constructs. Two important concepts are &lt;strong&gt;statements&lt;/strong&gt; and &lt;strong&gt;expressions&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;An expression is something that produces a value.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;produces:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;30
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A variable reference can also be part of an expression:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;name&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A statement, on the other hand, represents an instruction or action that JavaScript can execute.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;age&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is a variable declaration statement.&lt;/p&gt;

&lt;p&gt;Statements can contain expressions.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;total&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;10&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;is an expression that produces &lt;code&gt;30&lt;/code&gt;, while the complete line is a variable declaration statement.&lt;/p&gt;

&lt;p&gt;We don't need to go too deep into statements and expressions yet. The important thing to remember is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Expressions produce values. Statements perform actions or represent instructions.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This distinction becomes much more useful as JavaScript code becomes more complex.&lt;/p&gt;




&lt;h1&gt;
  
  
  Putting Everything Together
&lt;/h1&gt;

&lt;p&gt;We can now build a simple mental model of JavaScript.&lt;/p&gt;

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

&lt;p&gt;And when thinking about a web application:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HTML
  ↓
Structure

CSS
  ↓
Presentation

JavaScript
  ↓
Behavior + Logic
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;JavaScript is therefore much more than just a way to make buttons clickable.&lt;/p&gt;

&lt;p&gt;It is a programming language capable of handling application logic and running in different environments.&lt;/p&gt;

&lt;p&gt;The browser provides an environment where JavaScript can interact with webpages and browser features. Node.js provides a runtime for executing JavaScript outside the browser. Underneath these environments, JavaScript engines process and execute the JavaScript code we write.&lt;/p&gt;

&lt;p&gt;If there is one mental model I would keep from this article, it is this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;HTML        → What exists?
CSS         → How does it look?
JavaScript  → What does it do?
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Once this foundation is clear, the next question naturally becomes:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How does JavaScript actually store and manage the values we create in our programs?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's where variables come in.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>javascript</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
