JavaScript, considered by many as the programming language of the web, is one of the most popular programming languages on the planet and the most popular and widely used programming language for web development. In this article, you will learn about JavaScript, its history, use cases, why you should learn it, and basic JavaScript concepts for beginners.
What is JavaScript
JavaScript, often abbreviated as JS, created by Brendan Eich in 1995, is a programming language and core technology of the web, alongside HTML, and CSS. It started out as a purely client side language but has since grown into a language that can be used in the server side.
Note: Client side is the part of a website users see and interact with. It is also referred to as the frontend of a website.
Server side, also referred to as the backend of a website, is the part of the website a user do not see and it is responsible for powering the frontend.
Why learn JavaScript?
As a beginner, learning JavaScript as a first programming language can be a very rewarding experience as it has grown into a power house over the years since it’s creation. Below are a few compelling reasons why learning JavaScript might be a good decision.
High demand: JavaScript is a highly sought after skill in the job market with a wide range of opportunities.
Job flexibility: Learning JavaScript can open up other opportunities, such as frontend development, backend development, mobile applications development and a few others.
Easy to learn: JavaScript is relatively easy to learn as compared to other programming languages like Java, and C.
Large and Supportive Community: JavaScript has a large and supportive community, ensuring there are plenty of resources and tutorials available.
JavaScript Use Cases
In today’s world, it can be used and deployed in almost every part of the development environment. Below are some popular use cases of JavaScript:
Frontend development - JavaScript
Backend development - Node.js, Express.js
Mobile app development - React native
Desktop application - Electron.js
Data visualization - D3.js and a few others.
Beginner JavaScript Concepts
JavaScript is a programming language that makes websites interactive. Without JavaScript, websites will just sit there and do nothing. For example, when you click a button on a website and something happens, that’s JavaScript working behind the scene. Understanding basic JavaScript concepts such as variables, loops, and the DOM, will give you an understanding and a solid foundation into how these things work and how to apply them.
Variables
Variables are like labeled boxes where you can store data. You can think of them as placeholders for values that you want to use later in your code.
Declaring Variables:
- Use
letfor variables that can change. - Use
constfor variables that should never change. - Avoid
var(it’s outdated and can cause confusion).
Data types
Data types define the kind of data you can store in a variable. JavaScript has several built-in data types.
Primitive Data Types:
-
String: Represents text. Must be enclosed in quotes (
" "or' ').
let greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!
- Number: Represents both integers and decimals.
let age = 25;
let price = 9.99;
console.log(age, price); // Output: 25 9.99
-
Boolean: Represents
trueorfalse.
let isStudent = true;
console.log(isStudent); // Output: true
- Null: Represents an intentional absence of value.
let job = null;
console.log(job); // Output: null
- Undefined: Represents a variable that has been declared but not assigned a value.
let address;
console.log(address); // Output: undefined
Non-Primitive Data Types:
- Object: A collection of key-value pairs.
let person = { name: "Alice", age: 25 };
console.log(person.name); // Output: Alice
- Array: A list of items.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
Operators
Operators are symbols that perform operations on variables and values. Let’s break them down in detail.
Arithmetic Operators:
+ (addition),
- (subtraction),
* (multiplication),
/ (division),
% (remainder),
** (exponentiation).
let a = 10;
let b = 3;
console.log(a + b); // Output: 13
console.log(a - b); // Output: 7
console.log(a * b); // Output: 30
console.log(a / b); // Output: 3.333...
console.log(a % b); // Output: 1 (remainder of 10 divided by 3)
console.log(a ** b); // Output: 1000 (10 to the power of 3)
Comparison Operators:
== (equal to),
=== (strictly equal to),
!= (not equal to),
!== (strictly not equal to),
> (greater than),
< (less than),
>= (greater than or equal to),
<= (less than or equal to).
console.log(10 == "10"); // Output: true (loose equality, only checks value)
console.log(10 === "10"); // Output: false (strict equality, checks type and value)
console.log(10 != "10"); // Output: false (loose inequality)
console.log(10 !== "10"); // Output: true (strict inequality)
console.log(10 > 5); // Output: true
console.log(10 < 5); // Output: false
Logical Operators:
&& (AND),
|| (OR),
! (NOT).
let isStudent = true;
let age = 20;
console.log(isStudent && age > 18); // Output: true (both conditions are true)
console.log(isStudent || age < 18); // Output: true (at least one condition is true)
console.log(!isStudent); // Output: false (negates the value)
Assignment Operators:
= (assign),
+= (add and assign),
-= (subtract and assign),
*= (multiply and assign),
/= (divide and assign).
let x = 10;
x += 5; // Equivalent to x = x + 5
console.log(x); // Output: 15
Conditionals
Conditionals let you make decisions in your code. They allow you to execute different blocks of code based on certain conditions.
let age = 18;
if (age >= 18) {
console.log("You are an adult."); // This will run if age is 18 or older
} else if (age >= 13) {
console.log("You are a teenager."); // This will run if age is between 13 and 17
} else {
console.log("You are a child."); // This will run if age is less than 13
}
Loops
Loops let you repeat a block of code multiple times. They are useful for tasks like counting or processing lists.
For Loop:
for (let i = 0; i < 5; i++) {
console.log(i); // Output: 0, 1, 2, 3, 4
}
-
let i = 0: Initialize the loop counter. -
i < 5: Condition to check before each iteration. -
i++: Increment the counter after each iteration.
While Loop:
let count = 0;
while (count < 3) {
console.log(count); // Output: 0, 1, 2
count++;
}
- The loop runs as long as the condition (
count < 3) is true.
Functions
Functions are reusable blocks of code that perform a specific task. They help you avoid repeating code and make your programs more organized.
// Function declaration
function greet() {
console.log(“Hello there”); // Output: Hello there
}
function add() {
return 2 + 3; // Output: returns the value
}
Arrays
Arrays are lists of items. They are great for storing multiple values in one variable.
Example:
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple (arrays start at 0)
console.log(fruits.length); // Output: 3 (number of items in the array)
// Adding an item
fruits.push("Orange");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Orange"]
Objects
Objects are collections of key-value pairs. They are like real-world objects with properties (e.g., a person has a name, age, etc.).
Example:
let person = {
name: "Alice",
age: 25,
isStudent: true,
greet: function() {
console.log(`Hello, my name is ${this.name}.`);
}
};
console.log(person.name); // Output: Alice
person.greet(); // Output: Hello, my name is Alice.
DOM Manipulation
The Document Object Model (DOM) is a representation of the HTML structure of a webpage. JavaScript can interact with the DOM to dynamically change the content, style, and structure of a webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
// Access the element with id="heading"
let heading = document.getElementById("heading");
// Change its text content
heading.textContent = "Text Changed!";
}
</script>
</body>
</html>
Conclusion
Understanding JavaScript as a beginner is crucial as it gives an insight into what the language is all about and how to make the most of it. And learning JavaScript is capable of opening a world full of opportunities.
I’d love to hear what you think about the most popular language of the web?
Top comments (2)
This is great, Victor!
Thank you, Dumebi!