Basics of JavaScript

Variables: Storing Information Like a Box

Imagine having boxes to hold different things. In JavaScript, variables act like these boxes, allowing you to store and manage information. A variable is a named container that holds a value, which can be text, numbers, or even collections of data. Declare variables using let, const, or var (though const and let are generally preferred for modern JavaScript):

Syntax:

let name = "Bob";
const age = 25; // Unchangeable value

let is the keyword that tells JavaScript you’re declaring a variable. where the message is the name of that variable. = is the assign operator that tells JavaScript to assign the value “Bob” string or 25 to the variable.

Data Types

Just like boxes can hold different items, variables in JavaScript can store various data types. Understanding these types is crucial. Data types categorize the information a variable can hold.

Common types in JavaScript:

• Numbers: Integer (whole numbers) and floating-point (decimals) values (e.g., 10, 3.14).
• Strings: Text enclosed in single or double quotes (e.g., “w3wiki”, ‘Hello World’).
• Booleans: Represent logical values, true and false.
• Undefined: Represents a variable that has been declared but not assigned a value.
• Null: Represents the intentional absence of a value.
• Objects: Complex data structures that store key-value pairs (e.g., const person = { name: “Alice”, age: 30 }).
• Arrays: Ordered lists of values, accessed using zero-based indexes (e.g., const colors = [“red”, “green”, “blue”]).

Operators: Performing Actions on Your Data

Think of operators as tools you use to manipulate the data inside your variables. JavaScript offers various operators for performing calculations, comparisons, and more. Operators allow you to perform operations on data.

Some basic operators in JavaScript:

• Arithmetic: +, -, *, /, % (modulo)
• Assignment: =, +=, -=, *=, /=, etc.
• Comparison: ==, !=, ===, !==, <, >, <=, >=
• Logical: && (AND), || (OR), ! (NOT)
• Increment/Decrement: ++, —
• Conditional (Ternary): condition ? expressionIfTrue : expressionIfFalse

Control Flow Statements and Loops

Control flow statements determine the execution flow of your code:

• if…else: Executes code blocks conditionally based on a Boolean expression.
• switch: Executes different code blocks based on a matching case value.

Loops are used to execute a block of code repeatedly until a certain condition is met. JavaScript offers several looping constructs:

• for loop: Executes code a specified number of times, often used with counters.
• while loop: Executes code as long as a condition is true.
• do while loop : Similar to while, but the code block always executes at least once.

Functions

Functions are reusable blocks of code that perform specific tasks. They can take input (arguments) and return output (values).

Arrow Functions: A concise syntax for defining functions, introduced in ES6 (ECMAScript 2015).

Arrays

Ordered collections of values, accessed using zero-based indexes. Useful for storing lists of items.

Objects

Complex data structures that store key-value pairs, allowing you to organize related data efficiently.

Comments

Comments are lines of text ignored by the interpreter and used to explain or document code.

Syntax:

// Single-line comment
/* Multi-line comment */

Hoisting

A JavaScript behaviour where function declarations are moved to the top of their scope (typically the script) before code execution. This means you can call a function before it’s declared in the code. However, this is generally considered bad practice as it can lead to unexpected behaviour in modern JavaScript.

DOM Manipulation

JavaScript can interact with the Document Object Model (DOM), allowing you to dynamically modify the content and structure of your web pages. This opens doors for creating interactive elements, updating content based on user input, and building dynamic web applications.

Event Handling

JavaScript can listen for events like button clicks, mouse movements, and keyboard presses, enabling user interaction and responsiveness. By handling these events, you can trigger specific actions like updating content, displaying messages, or performing calculations based on user input.

JavaScript is a lightweight, single-threaded, dynamically typed, interpreted programming language with object-oriented capabilities. Primarily JavaScript is used to add interactivity and dynamism to web pages. It breathes life into static HTML and CSS, enabling features like dynamic content updates, user interactions, and animations.

However, JavaScript’s reach extends beyond web development. It’s also employed in server-side development with frameworks like Node.js and for creating mobile applications through frameworks like React Native. In this article, we will go through the fundamentals of JavaScript.