Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

FunctionsBeginner

Functions

Functions package reusable behavior and are one of the most important building blocks in JavaScript.

A function can take input parameters, perform logic, and return a result. JavaScript treats functions as first-class values, which means they can be stored in variables, passed into other functions, and returned from functions. This flexibility powers callbacks, closures, and many APIs across the language.

Explanation

A function can take input parameters, perform logic, and return a result. JavaScript treats functions as first-class values, which means they can be stored in variables, passed into other functions, and returned from functions. This flexibility powers callbacks, closures, and many APIs across the language.

Key Points

  • Functions can receive parameters and return values.
  • Functions are values and can be passed around like other data.
  • A function without `return` produces `undefined`.

Common Mistakes

  • Forgetting to return a value when later code expects one.
  • Calling a function immediately when you intended to pass it as a callback.
  • Mixing function declarations and function expressions without understanding the difference.

Practice Workspace

functions.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

5 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

functions.js
5 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

12

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Arrow Functions

Arrow functions provide a shorter function syntax and handle `this` differently from regular functions.

Closure

Closures let inner functions keep access to variables from the scope where they were created.

Callbacks

A callback is a function passed into another function so it can run later or customize behavior.

Practice Challenges

Return the missing result

6 min

Finish a function so the computed value is returned instead of disappearing as `undefined`.