Declaring functions and classes in Typescript - Step-by-Step Execution

Concept Flow - Declaring functions and classes

Start

↓

Declare Function

↓

Call Function?

No→End

Yes↓

Execute Function Body

↓

Return Value

↓

Declare Class

↓

Create Object

↓

Use Object Methods/Properties

↓

End

This flow shows declaring a function, optionally calling it, then declaring a class, creating an object, and using its methods or properties.

Execution Sample

Typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

class Person {
  constructor(public name: string) {}
  greet() { return `Hi, I am ${this.name}`; }
}

Declares a function greet that returns a greeting string, and a class Person with a name property and a greet method.

Execution Table

Step	Action	Evaluation	Result
1	Declare function greet	Function greet(name) created	Function stored in memory
2	Declare class Person	Class Person created with constructor and greet method	Class stored in memory
3	Call greet('Alice')	Execute greet with name='Alice'	Returns 'Hello, Alice!'
4	Create new Person('Bob')	Call constructor with name='Bob'	Object with name='Bob' created
5	Call person.greet()	Execute greet method on Person object	Returns 'Hi, I am Bob'
6	End	No more actions	Program ends

💡 All declarations done and function/class usage demonstrated, program ends.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
greet	undefined	function greet	function greet	function greet	function greet
Person	undefined	class Person	class Person	class Person	class Person
person	undefined	undefined	Person object {name:'Bob'}	Person object {name:'Bob'}	Person object {name:'Bob'}
greet('Alice') result	undefined	'Hello, Alice!'	'Hello, Alice!'	'Hello, Alice!'	'Hello, Alice!'
person.greet() result	undefined	undefined	undefined	'Hi, I am Bob'	'Hi, I am Bob'

Key Moments - 3 Insights

Why do we declare the function before calling it?

Because in the execution_table at step 1, the function greet is created and stored in memory, so it can be called later at step 3. If we call it before declaration, it would cause an error.

What happens when we create a new Person object?

At step 4, the constructor runs with the given name, creating an object with that name property. This is shown in the variable_tracker where person changes from undefined to an object.

How does the greet method access the name property?

In step 5, person.greet() uses 'this.name' to access the object's name property, returning a string with the name. This shows how methods use 'this' to refer to the current object.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of calling greet('Alice') at step 3?

A 'Hi, I am Alice'

B undefined

C 'Hello, Alice!'

D Error

💡 Hint

Check the 'Result' column at step 3 in the execution_table.

At which step is the Person object created?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Action' column for object creation in the execution_table.

If we change the name in new Person('Bob') to 'Eve', what changes in variable_tracker after step 4?

A person becomes undefined

B person becomes {name: 'Eve'}

C greet function changes

D No change

💡 Hint

Check the 'person' variable values in variable_tracker after step 4.

Concept Snapshot

Declaring functions:
function name(params): returnType { body }

Declaring classes:
class Name { constructor(...) {...} methods... }

Functions run when called.
Classes create objects with properties and methods.
Use 'this' inside class methods to access object data.

Full Transcript

This visual execution shows how to declare functions and classes in TypeScript. First, the function greet is declared and stored in memory. Then the class Person is declared with a constructor and a greet method. When greet('Alice') is called, it returns a greeting string. Creating a new Person object runs the constructor to set the name property. Calling person.greet() returns a greeting using the object's name. Variables change as functions and objects are created and used. This step-by-step trace helps understand how declarations and calls work in TypeScript.