What is JavaScript (JS) ?
JavaScript (JS) is like the magic wand of the web. It's a programming language that makes websites come to life. Imagine you visit a website, and things start moving, reacting, or changing right in front of you—that’s JavaScript at work. It's what allows you to click a button and see something happen, like a pop-up message or a hidden section of the page revealing itself.
JS is often used alongside HTML and CSS. If HTML is the structure of a house and CSS is the paint and decoration, then JavaScript is the electricity that powers everything, making it interactive. It's used everywhere, from simple tasks like showing a live clock on a webpage to complex things like building entire web apps.
In short, JavaScript turns static web pages into dynamic, interactive experiences! In this article, we are going to start with the basics of this language.
Setting Up JavaScript for Beginners
Before diving into JavaScript, let's get everything set up so you can start coding. We'll look at two common environments where you'll run JavaScript: your web browser and Node.js.
1. Running JavaScript in the Browser
The browser is the most straightforward place to start with JavaScript. Every modern web browser—like Chrome, Firefox, or Safari—comes with a built-in JavaScript engine. Here's how to get started:
Option 1: Using the Browser Console
Open Developer Tools: Press
F12or right-click on any webpage and select "Inspect" (Chrome) or "Inspect Element" (Firefox). Then, go to the "Console" tab.Write Your Code: You can start typing JavaScript code directly into the console. For example, type console.log('JavasScript is fantastic!'); and press Enter. You'll see "JavasScript is fantastic!" printed in the console.
Why It’s Useful: This is great for quick testing or experimenting with small snippets of code.
Option 2: Using a HTML File
Create a Simple HTML File:
Image by author Run in the Browser: Save the file with a .html extension (e.g., index.html), double-click it, and it will open in your default browser. The code inside the <script> tags will run automatically.
To run JavaScript separately from an HTML file, you can follow these steps:
Create a Separate JavaScript File: Create a new file with a
.jsextension (e.g.,script.js) and write your JavaScript code in it. For example:
// script.js
console.log('JavaScript is running from a separate file!');Link the JavaScript File to Your HTML File: Modify your HTML file to include a
<script>tag within the <head> section with thesrcattribute pointing to your JavaScript file. Your updated HTML file should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Basics</title>
</head>
<body>
<h1>Welcome to JavaScript!</h1>
<script src="script.js"></script>
</body>
</html>Run the HTML File in a Browser: Save both the HTML file and the JavaScript file in the same directory. Double-click the HTML file (e.g.,
index.html) to open it in your default browser. The browser will automatically load and execute the JavaScript file.
By keeping your JavaScript in a separate file, you can better organize your code and make it easier to maintain.
2. Running JavaScript in Node.js
Node.js is a runtime environment that lets you run JavaScript outside of the browser, typically on a server. It’s perfect for backend development or running JavaScript locally.
Step 1: Install Node.js
Download and Install: Go to the Node.js website and download the latest version for your operating system. Follow the installation instructions.
Verify Installation: Open a terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type node -v. You should see the installed version of Node.js.
Step 2: Running JavaScript in Node.js
Create a JS File: Open any text editor (like VS Code or Notepad++) and write your JavaScript code. For example:
Image by author Save and Run: Save the file with a .js extension (e.g., app.js). In your terminal, navigate to the folder where your file is located and run the command node app.js. You should see "Hello from Node.js!" printed in the terminal.
Understanding Values and Variables: The Building Blocks of JavaScript
In JavaScript, variables are like containers that hold values. You can think of a variable as a name that represents some data, like a person’s name or age. Once you store a value in a variable, you can use it over and over again without having to retype it.
For example, consider the following code snippet: (don’t worry about the word let too much now - just use it to declare the variable!)
In this example, the variable firstname is used to store the value 'Soham Sinha'. Once the value is stored, you can use the variable firstname anywhere in your code, and it will always represent 'Soham Sinha'.
This way, if you need to change the name later, you only need to update it in one place—when you assign the value to firstname. Variables make your code more manageable and less error-prone, especially when you’re working with the same data in multiple places.
Understanding Data Types in JavaScript: Primitive Types
In JavaScript, data types define the kind of data a variable can hold. Primitive data types are the most basic forms of data in JavaScript, and they include Number, String, Boolean, Undefined, and Null. Let’s break them down:
1. Number
The Number type is used for both integers and floating-point numbers. Whether it's a whole number or a decimal, JavaScript treats it the same way.
Here, both number1 and number2 are considered numbers, even though one is an integer and the other is a floating-point number.
2. String
A String is a sequence of characters, like a word or a sentence, enclosed in quotes.
In this example, fullname is a string because it contains text inside quotation marks.
3. Boolean
A Boolean represents one of two values: true or false. It’s often used in conditional statements to control the flow of the program.
Here, isSafe is a boolean that holds the value true.
4. Undefined
Undefined is a type that automatically gets assigned to a variable when it is declared but not yet assigned a value.
Since year hasn’t been assigned any value, it’s undefined.
5. Null
Null is a special value that represents the intentional absence of any object value. However, there's a quirk in JavaScript: the typeof operator returns "object" for null, which is actually a bug that’s been around since the early days of JavaScript.
Why is null an object type? In JavaScript, null is considered an object type due to a bug in the language's initial implementation that has been preserved for compatibility reasons. The typeof operator was supposed to return "object" for all non-primitive types. Since null was treated as a special object, this bug remained in place.
Undefined vs. Null
Let us compare undefined and null (understanding the difference is important!)
Undefined: Automatically assigned to variables that haven’t been given a value. It also represents function parameters that are not passed and is the default return value for functions that don’t explicitly return anything. (don’t worry if you are not aware of functions! - we will cover this later)
Null: Represents an intentional absence of any object value. It’s manually assigned to variables to indicate that they’re empty or not yet pointing to any object.
Though undefined and null both represent "no value," they are used differently and are not the same.
Loose Equality (==): When using the loose equality operator
==,undefinedandnullare considered equal because they both signify the absence of a value.Strict Equality (===): The strict equality operator
===does not consider them equal becauseundefinedis a distinct type fromnull.
Wrapping It Up: The Essentials of Values, Variables, and Data Types in JavaScript
By now, you’ve got a solid understanding of the basics that form the foundation of JavaScript. We’ve explored how variables act as containers to store values, making your code more dynamic and flexible. You’ve also delved into the primitive data types—Number, String, Boolean, Undefined, and Null—that are the building blocks of any JavaScript program.
Understanding these core concepts is essential as you begin your journey into JavaScript. They might seem simple, but they are powerful tools that will allow you to create everything from interactive websites to complex applications. Whether you’re storing a user’s name, checking conditions, or dealing with absent data, mastering these basics will set you up for success as you dive deeper into JavaScript.
In the upcoming articles, we’ll build on this foundation, exploring more advanced topics and showing you how to put these principles into practice. Stay tuned, and keep coding!