Key remapping with as clause in Typescript - Step-by-Step Execution

Concept Flow - Key remapping with as clause

Start with object

↓

Destructure keys

↓

Use 'as' to rename keys

↓

Assign new variable names

↓

Use new variables in code

↓

End

This flow shows how to take keys from an object and rename them using 'as' during destructuring.

Execution Sample

Typescript

const user = { name: 'Alice', age: 30 };
const { name: userName, age: userAge } = user;
console.log(userName, userAge);

This code takes keys 'name' and 'age' from 'user' and renames them to 'userName' and 'userAge'.

Execution Table

Step	Action	Expression	Result
1	Define object	const user = { name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }
2	Destructure with renaming	const { name: userName, age: userAge } = user	userName = 'Alice', userAge = 30
3	Log variables	console.log(userName, userAge)	Output: Alice 30
4	End	No more code	Execution stops

💡 All keys destructured and renamed, program ends after logging.

Variable Tracker

Variable	Start	After Step 2	Final
user	undefined	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }
userName	undefined	'Alice'	'Alice'
userAge	undefined	30	30

Key Moments - 2 Insights

Why do we write 'name: userName' instead of just 'userName'?

Because 'name' is the original key in the object, and 'userName' is the new variable name we want to use. The 'as' clause syntax 'name: userName' means 'take the value of key name and store it in variable userName' (see execution_table step 2).

What happens if we write 'const { userName } = user;' without renaming?

It looks for a key named 'userName' in the object, which does not exist, so 'userName' will be undefined. The renaming with 'as' is necessary to map existing keys to new variable names.

Visual Quiz - 3 Questions

Look at the execution table at step 2, what is the value of 'userAge'?

A undefined

B 30

C 'age'

D 'Alice'

💡 Hint

Check the 'Result' column in step 2 where 'userAge' is assigned.

At which step does the program output 'Alice 30'?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the step where console.log is called in the execution_table.

If we change the code to 'const { age: userName } = user;', what will be the value of 'userName' after step 2?

A 30

B 'Alice'

C undefined

D Error

💡 Hint

Check how renaming works in the variable_tracker and execution_table step 2.

Concept Snapshot

Key remapping with 'as' clause:
const { originalKey: newVarName } = object;
- Extracts 'originalKey' from object
- Assigns its value to 'newVarName'
- Useful to rename variables during destructuring
- Keeps code clear and avoids naming conflicts

Full Transcript

This visual execution shows how to rename keys from an object during destructuring in TypeScript. We start with an object 'user' with keys 'name' and 'age'. Using the syntax 'const { name: userName, age: userAge } = user;', we extract the values of 'name' and 'age' and assign them to new variables 'userName' and 'userAge'. The execution table traces each step: defining the object, destructuring with renaming, logging the new variables, and ending the program. The variable tracker shows how 'userName' and 'userAge' get their values after destructuring. Key moments clarify why renaming is needed and what happens if we skip it. The quiz tests understanding of variable values at each step and effects of changing the renaming. This helps beginners see exactly how key remapping works in practice.