JavaScript Basics: A Beginner’s Guide

by

JavaScript is a versatile and powerful programming language that is widely used for both client-side and server-side development (Node.js). Whether you are just starting out or looking for a refresher, this guide covers the fundamental concepts of JavaScript with clear explanations and concise code examples.

1. Variables and Constants

In JavaScript, you can declare variables using var, let, or const.

JavaScript
let name = "John"; // Can be reassigned
const age = 30;    // Cannot be reassigned
var city = "New York"; // Older syntax, avoid using

let and const are block-scoped, while var is function-scoped. const is used for values that should not change.

2. Data Types

JavaScript has several data types:

JavaScript
let number = 10;       // Number
let text = "Hello";    // String
let isTrue = true;     // Boolean
let empty = null;      // Null
let notDefined;        // Undefined
let person = { name: "Alice", age: 25 }; // Object
let bigNumber = 12345678901234567890n; // BigInt
let uniqueID = Symbol("id"); // Symbol

3. Operators

JavaScript supports arithmetic, comparison, logical, bitwise, and ternary operators:

JavaScript
let sum = 5 + 3;        // Addition
let isEqual = (5 === 3); // Strict equality
let andOperator = (true && false); // Logical AND
let bitwiseAnd = 5 & 1; // Bitwise AND
let result = (5 > 3) ? "Yes" : "No"; // Ternary operator

4. Functions and Closures

Functions are reusable blocks of code.

JavaScript
function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice"));

Modern JavaScript also supports arrow functions:

JavaScript
const greet = name => `Hello, ${name}!`;
console.log(greet("Bob"));

Closures

A closure is a function that remembers the variables from its outer scope even after the outer function has finished executing.

JavaScript
function outerFunction(outerValue) {
    return function innerFunction(innerValue) {
        console.log(`Outer: ${outerValue}, Inner: ${innerValue}`);
    };
}

const closureExample = outerFunction("Hello");
closureExample("World");

5. Callback Functions

A callback function is a function passed as an argument to another function.

JavaScript
function processUserInput(callback) {
    let name = "Alice";
    callback(name);
}

function greetUser(name) {
    console.log("Hello, " + name);
}

processUserInput(greetUser);

6. Events

JavaScript can interact with HTML elements using events.

JavaScript
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

7. Hoisting

JavaScript moves function and variable declarations to the top of their scope during execution.

JavaScript
console.log(hoistedVar); // Undefined
var hoistedVar = "I am hoisted";

Function declarations are also hoisted:

JavaScript
hoistedFunction();
function hoistedFunction() {
    console.log("This works!");
}

8. Prototype & Prototypal Inheritance

JavaScript uses prototypal inheritance, meaning objects inherit properties from other objects.

JavaScript
function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");
alice.greet();

9. Strict Mode

Enabling strict mode helps catch common coding mistakes.

JavaScript
"use strict";
x = 10; // Throws an error because `x` is not declared

10. Modules (import/export)

JavaScript ES6 introduced modules for better code organization.

JavaScript
// module.js
export const pi = 3.14;
JavaScript
// main.js
import { pi } from "./module.js";
console.log(pi);

11. Event Loop & Asynchronous JavaScript

JavaScript is single-threaded but handles asynchronous tasks using the event loop.

JavaScript
console.log("Start");
setTimeout(() => console.log("Async Task"), 1000);
console.log("End");

12. Map & Set

Maps store key-value pairs, and Sets store unique values.

JavaScript
let myMap = new Map();
myMap.set("name", "Alice");
console.log(myMap.get("name")); // Alice
JavaScript
let mySet = new Set([1, 2, 3, 3]);
console.log(mySet); // Set {1, 2, 3}

13. ES6+ Features

Modern JavaScript includes many useful features:

  • Template Literals:
JavaScript
let name = "Alice";
console.log(`Hello, ${name}!`);
  • Destructuring:
JavaScript
const [firstFruit, secondFruit] = fruits;
console.log(firstFruit); // Apple
  • Spread and Rest Operators:
JavaScript
const newArray = [...fruits, "Mango"];
console.log(newArray);
  • Promises and Async/Await:
JavaScript
function fetchData() {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data received"), 2000);
    });
}

async function getData() {
    let data = await fetchData();
    console.log(data);
}

getData();

This guide provides a solid foundation for JavaScript programming. Keep practicing and exploring new concepts to enhance your skills!

Leave a Comment