Learn JavaScript: Variables, Functions & Objects
A practical and straightforward guide to mastering JavaScript fundamentals, perfect for beginners and those looking for a quick review. Explore key concepts with clear explanations and interactive examples you can run and modify.
Variables — Storing Data 💾
In JavaScript, a **variable** is like a labeled box that can hold a value. It allows you to store and manage data in your code, such as text, numbers, lists, and more complex structures.
Types of Variable Declarations
There are three keywords for declaring variables, each with a different purpose. In modern code (ES6+), the recommendation is to use **let** and **const**.
- **
let**: Use for values that **can be changed**. It is a block-scoped variable, which means its existence is limited to the code block where it was declared (e.g., inside aniforforstatement). - **
const**: Use for values that **will not be changed**. It is a block-scoped constant. Once you assign a value, you cannot reassign it. It is important to note that for objects and arrays, the variable's value (the reference) cannot be changed, but the internal content of the object/array can. - **
var**: Is the oldest way to declare variables. It has function scope, which can lead to unexpected behavior. It is widely discouraged in new code.
const by default. If you need to reassign the value (e.g., a counter), switch to let. Avoiding var is a good practice.
Functions — Reusable Logic ⚙️
A **function** is a block of code that you can name and reuse. It accepts inputs (parameters), performs a task, and can return a result. Functions are essential for keeping your code organized, clean, and modular.
Common Function Declarations
- Function Declaration: The most traditional form. The function is "hoisted," which means you can call it in the code even before it is declared. Ex:
function greeting() { ... } - Function Expression: A function assigned to a variable. It is not hoisted, so you must declare it before using it. Ex:
const addition = function() { ... } - Arrow Functions: Introduced in ES6, they are a shorter, more concise syntax, especially useful for anonymous functions (without a name) and "callbacks" (functions passed as arguments). Ex:
const multiplication = (a, b) => a * b;
this (an advanced concept that refers to the "owner" of the function), inheriting it from the context where they were created. This makes them ideal for object methods.
Objects — Structured Data 📦
An **object** in JavaScript is a collection of properties, where each property has a **key** (a name, usually a string) and a **value**. Think of them as dictionaries or lists of `key: value` pairs that allow you to organize complex data.
Working with Objects
You can create an object using the literal syntax {} and access it using dot notation (object.property) or bracket notation (object['property']). An object can contain all types of data, including other functions (called **methods**).
- Properties: Store the data. Ex:
name: 'John'. - Methods: Are functions stored as properties. Ex:
sayHello() { ... }. - The `this` in Methods: Inside a method, the `this` keyword refers to the object itself that contains the method. This allows you to access other properties of the object (e.g.,
this.name).
let newObj = oldObj;), you copy only the reference, not the object itself. To create an independent copy, use the "spread operator" {...oldObj} or Object.assign().
Interactive Examples 🧪
Next Steps & Exercises 🚀
- Create an object called
carwith `make` and `model` properties and a `start()` method that returns a message. - Write a function that takes an array of numbers and returns their sum.
- Modify one of the examples above to add a new property or method to an object.
When you're done, feel free to paste your code into one of the example boxes above and click **Run** to test it.