Function execution context in Javascript - Mini Project: Build & Apply

Understanding Function Execution Context in JavaScript

📖 Scenario: Imagine you are a chef in a kitchen. Each time you start cooking a new dish, you prepare your workspace with all the ingredients and tools you need. This workspace is like a function's execution context in JavaScript, where everything needed to run the function is set up.

🎯 Goal: You will create a simple JavaScript function and explore how its execution context works by defining variables inside it and printing their values.

📋 What You'll Learn

Create a function named cookDish.

Inside the function, declare a variable ingredient with the value 'Tomato'.

Declare another variable quantity with the value 3 inside the function.

Return a string combining quantity and ingredient in the format: '3 Tomatoes'.

Call the function and print the returned string.

💡 Why This Matters

🌍 Real World

Functions are like mini-workspaces in programming where you keep all the tools and ingredients needed to complete a task. Understanding their execution context helps you write clear and bug-free code.

💼 Career

Knowing how function execution context works is essential for debugging, writing clean code, and understanding how JavaScript runs your programs in web development and software engineering.

1

Create the function cookDish with no content

Write a function named cookDish using the function keyword with empty curly braces {}.

Javascript

function cookDish() {
  // Your code here
}

Need a hint?

Use the syntax: function cookDish() { } to create an empty function.

2

Add variables ingredient and quantity inside cookDish

Inside the cookDish function, declare a variable ingredient and set it to 'Tomato'. Also declare a variable quantity and set it to 3.

Javascript

function cookDish() {
  // Declare ingredient and quantity variables here
}

Need a hint?

Use let ingredient = 'Tomato'; and let quantity = 3; inside the function.

3

Return a string combining quantity and ingredient

Inside the cookDish function, add a return statement that returns a string combining quantity and ingredient in the format '3 Tomatoes'. Use a template literal with backticks and ${}.

Javascript

function cookDish() {
  let ingredient = 'Tomato';
  let quantity = 3;
  // Return the combined string here
}

Need a hint?

Use return `${quantity} ${ingredient}s`; to create the string.

4

Call cookDish and print the result

Call the function cookDish() and print its returned value using console.log.

Javascript

function cookDish() {
  let ingredient = 'Tomato';
  let quantity = 3;
  return `${quantity} ${ingredient}s`;
}

// Call cookDish and print the result

Need a hint?

Use console.log(cookDish()); to print the returned string.