What is JavaScript?
JavaScript, aka JS, is a programming language for
creating interactive and dynamic web pages. Using JavaScript, developers can
update and change both HTML and CSS. JS code can run in the browser or on the
server via Node.js. Its file extension is “.js”.

JavaScript is a lightweight,
high-level, interpreted/scripting,
and single-threaded programming
language. That means, it has simple syntax and features, is easy to implement,
and has a small memory footprint, so that programmers can learn it easily and
quickly. It improves human understanding and usage. JavaScript is interpreted at
runtime by an interpreter. This interpreter embedded into the browser reads
over the JS code, translates the code, and runs it line-by-line. Modern browsers
use a Just-In-Time (JIT) compilation process, which compiles JavaScript code to
executable bytecode just as it is about to run. Finally, only one line of code
is performed at a time.
JavaScript is case-sensitive. The uppercase and lowercase letters are treated as two separate values in JavaScript. For example, a function named “myFunc” and a function named “myfunc” are two different functions.
JavaScript is also open source (software with source code that is free to the user for
use, and the user can modify from its original source code) and cross-platform (a software or program
that is designed to work in various operating systems such as Linux, Windows,
iOS, MacOS, or Android).
How JavaScript works:
The JavaScript
engine converts JavaScript code (code is the text that makes up programs)
into machine code that can be executed by the computer, while the JavaScript runtime is the environment
in which the code is executed, such as web browser or Node.js.
When JavaScript executes within a web browser it is
operating within the browser’s runtime environment and is called Client-side JavaScript. On the other
hand, when JavaScript executes outside the browser it is operating within a
server-side runtime environment provided by Node.js and is called Server-side JavaScript.
All web browsers include the JavaScript engine by
default. Major browser engines are as follows:
V8 – used in Google Chrome
SpiderMonkey – used in Mozilla Firefox
JavaScriptCore – used in Safari
Chakra – used in Microsoft Edge
The JavaScript
engine is a program that is responsible for interpreting and executing
JavaScript code. Here are some steps to complete the entire process:
Step1. The engine uses the parser to check JS code (before
starting to execute it).
Step2. The parser reads the code line by line and
determines whether the syntax is correct.
Step3. a. If
there is an error, the parser will stop operations and send a syntax error.
b.
If there is no error, the parser creates/generates an Abstract Syntax Tree
(AST).
Step4. The generated AST then goes to the
Interpreter (such as Ignition in Google) which creates machine codes.
Step5. This machine code is executed using Call
Stack.
How to display JavaScript Output:
JavaScript allows users to display data in various ways. Users can also modify the HTML elements and/or CSS even after the webpage is loaded completely or after an event occurs.
console.log() method will display the output in the console section of the browser. On the other hand, alert() method, document.write() method, and innerHTML property display the output on a web page.
There are some ways to display JavaScript output:
1. Output to Browser
Console
The console.log() method gives information about
various errors and warnings related to the webpage. It is commonly used for
debugging JavaScript code.
2. Output in Dialog
Boxes
The alert() method is used to display any message
or data to the user with the OK button below the message.
3. Output to the Browser
Window
The document.write() method
shows the output within the document’s body. It is used for testing purposes.
4. Output Inside an
HTML Element
The innerHTML property is used to write or insert
output inside an HTML element. Before writing the output we need to select the
element using a method such as getElemnetById() or querySelector(). This
property helps to change elements and/or their style even after the webpage
gets loaded completely.
In the following example, you see all the ways of JS output:
How to Optimize JavaScript Code for Performance:
Nowadays
JavaScript is the most popular programming language for web development. Over
90% of all websites use JavaScript. Therefore, developers must be aware of
optimized JavaScript code to improve JS performance and execution time when
creating their webpage or app.
Here are 8 ways to effectively improve the code to achieve better performance:
1. Avoid Global Variables – global variables reduce the
modularity, flexibility, and scalability of the code.
2. Minify
and Compress code –
using both techniques, developers can save space, reduce page loading times,
and reduce bandwidth consumption of the website.
3. Reduce
activity in loops –
each statement in a loop is executed during each iteration of the loop. The
loop runs faster if statements or assignments used in the loop can be placed
outside the loop.
4. Reduce DOM access – access to the HTML DOM is
very slow. If developers are going to access a DOM element several times, save
it as a local variable.
5. Delay
JavaScript loading –
add JS scripts at the bottom of the page body and let the browser load the page
first. After loading the page fully, the browser starts loading JS scripts
immediately. So the page will be accessible when the interpreter starts
executing the JS code at the bottom.
6. Use
object and array literals instead of constructors – literals are shorter and
easy to read and write, whereas constructors can lead to unexpected results,
which can create confusion.
7. Avoid
unnecessary variables and function calls – more variables and function calls in the code mean
more lines of code and more names and values that need to be kept in mind while
running through the code, which may lead to performance problems.
8. Use
caching and memoization –
cache stores the results for later use, and memoization is a way to cache a
return value of a function based on input. Using both techniques,
developers can reduce execution time and increase CPU performance.
How JavaScript is used within a webpage:
JavaScript can be used in HTML in different ways:
Inline JavaScript: JavaScript code is placed within certain HTML.
Internal JavaScript: The JS code is inserted between <script> and </script> tags within HTML. <script> sections can be placed in the <head> and/or in the <body> section of an HTML document.
In <head>
tag:
JavaScript Libraries and Frameworks:
JavaScript Libraries provide reusable functionality for the code and allow developers to have control over their application design and development.
Examples: React, jQuery, D3.js.
JavaScript Frameworks
provide ready-to-use tools, templates, and policies for fast application
development. However, they don’t provide complete control over the
application.
Examples:
Next, Vue, Angular.
For instance, you want to build a house and go to a company that builds houses. The company has two options:
a. The company allows you to choose different things such as building architecture, interior design, color, and parking places.
b. The company has its own design houses and you have to pick one of them.
It’s
up to you which option is best for your dream house.
The first option (a) is for the JS library and another (b) is for the JS framework.
0 Comments