JavaScript Fundamentals
Welcome to this comprehensive JavaScript tutorial! Whether you're a complete beginner or looking to strengthen your fundamentals, this guide will take you through the essential concepts of JavaScript programming.
Introduction to JavaScript
JavaScript is a versatile, high-level programming language primarily known for adding interactivity to web pages. Today, it powers not just the web but also server applications, mobile apps, desktop software, and even IoT devices.
Why Learn JavaScript?
- Ubiquity: JavaScript runs in every web browser, making it the most accessible programming language.
- Versatility: Used for frontend, backend, mobile, and desktop development.
- Job Market: Consistently one of the most in-demand programming skills.
- Community: Large community with extensive resources and libraries.
Setting Up JavaScript
One of JavaScript's biggest advantages is its low barrier to entry. Here's how to get started:
- Web Browser: Every modern browser has a JavaScript engine. You can write and run code directly in the browser's developer console.
- Text Editor: Use VSCode, Sublime Text, or any code editor of your choice.
- Node.js: Install Node.js to run JavaScript outside of a browser environment.
JavaScript Basics
Let's start with the basics of JavaScript programming:
Variables and Data Types
// Variable declaration
let age = 25; // Number
const name = "John"; // String
var isStudent = true; // Boolean
let skills = ["HTML", "CSS", "JS"]; // Array
let person = { // Object
firstName: "John",
lastName: "Doe"
};
console.log(`${name} is ${age} years old`);JavaScript has several data types including:
- Numbers
- Strings
- Booleans
- Arrays
- Objects
- Null and Undefined
Control Structures
// Conditional statements
let age = 20;
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are a minor");
}
// Switch statement
let day = "Monday";
switch(day) {
case "Monday":
console.log("Start of the work week");
break;
case "Friday":
console.log("End of the work week");
break;
default:
console.log("Another day");
}
// Loops
for (let i = 0; i < 5; i++) {
console.log(`Iteration ${i}`);
}
let fruits = ["Apple", "Banana", "Orange"];
for (let fruit of fruits) {
console.log(fruit);
}Functions
// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}
// Function expression
const add = function(a, b) {
return a + b;
};
// Arrow function
const multiply = (a, b) => a * b;
console.log(greet("Alice")); // Output: Hello, Alice!
console.log(add(5, 3)); // Output: 8
console.log(multiply(4, 2)); // Output: 8Intermediate JavaScript
Once you've mastered the basics, it's time to explore more advanced concepts:
DOM Manipulation
// Selecting elements
const heading = document.getElementById('main-heading');
const paragraphs = document.querySelectorAll('p');
// Modifying elements
heading.textContent = 'Updated Heading';
heading.style.color = 'blue';
// Creating new elements
const newElement = document.createElement('div');
newElement.textContent = 'Newly created element';
document.body.appendChild(newElement);
// Event handling
document.getElementById('my-button').addEventListener('click', function() {
alert('Button clicked!');
});Asynchronous JavaScript
// Callbacks
function fetchData(callback) {
setTimeout(() => {
const data = { name: "John", age: 30 };
callback(data);
}, 2000);
}
fetchData(function(data) {
console.log(data);
});
// Promises
const fetchUserData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const user = { id: 1, name: "Alice" };
resolve(user);
// reject("Error fetching user");
}, 2000);
});
};
fetchUserData()
.then(user => console.log(user))
.catch(error => console.error(error));
// Async/Await
async function getUser() {
try {
const user = await fetchUserData();
console.log(user);
} catch (error) {
console.error(error);
}
}
getUser();ES6+ Features
// Destructuring
const person = { name: "John", age: 30, job: "Developer" };
const { name, age } = person;
const colors = ["red", "green", "blue"];
const [primary, secondary] = colors;
// Spread operator
const newArray = [...colors, "yellow"];
const updatedPerson = { ...person, age: 31 };
// Template literals
const message = `${name} is ${age} years old`;
// Default parameters
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
// Classes
class User {
constructor(name, email) {
this.name = name;
this.email = email;
}
sayHello() {
return `Hello, I'm ${this.name}`;
}
}
const user = new User("John", "john@example.com");Advanced JavaScript
Let's explore some advanced JavaScript concepts:
Closures
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2Prototypes and Inheritance
function Animal(name) {
this.name = name;
}
Animal.prototype.makeSound = function() {
return "Some generic sound";
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.makeSound = function() {
return "Woof!";
};
const dog = new Dog("Rex", "German Shepherd");
console.log(dog.name); // Rex
console.log(dog.makeSound()); // Woof!Modules
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// main.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6Conclusion
Congratulations on completing this JavaScript fundamentals tutorial! You've learned everything from basic syntax to advanced concepts like closures and modules. JavaScript's ecosystem is vast and constantly evolving, so keep exploring and practicing.
Remember, the best way to learn programming is by building projects. Start with small projects and gradually take on more complex challenges as you become more comfortable with the language.
Happy coding!
Short on Time?? Want to read Offline??
We have got you covered, Download the PDF version of this Blog!
