Dynamic typing in JavaScript - Step-by-Step Execution

Concept Flow - Dynamic typing in JavaScript

Declare variable

↓

Assign value of any type

↓

Use variable

↓

Change variable type by reassigning

↩Back to Use variable

JavaScript variables can hold any type and can change type anytime by assigning new values.

Execution Sample

Javascript

let x = 10;
x = "hello";
x = true;
console.log(x);

Shows a variable 'x' changing from number to string to boolean, then printing the final value.

Execution Table

Step	Code Line	Variable	Value	Type	Explanation
1	let x = 10;	x	10	number	Variable x declared and assigned number 10
2	x = "hello";	x	"hello"	string	x now holds a string value
3	x = true;	x	true	boolean	x now holds a boolean value
4	console.log(x);				Prints current value of x, which is true

💡 End of code, variable x changed types dynamically without error

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
x	undefined	10 (number)	"hello" (string)	true (boolean)	true (boolean)

Key Moments - 2 Insights

Why can the variable 'x' hold different types without error?

Because JavaScript is dynamically typed, variables can change type anytime as shown in steps 1 to 3 in the execution_table.

What type does 'x' have when printed?

At step 4, 'x' is a boolean with value true, so console.log prints 'true' as shown in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the type of 'x' after step 2?

A string

B number

C boolean

D undefined

💡 Hint

Check the 'Type' column for step 2 in the execution_table.

At which step does 'x' change from a number to a string?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Code Line' and 'Type' columns in the execution_table.

If we assign x = 42.5 after step 3, what would be the type of 'x'?

A string

B boolean

C number

D undefined

💡 Hint

JavaScript variables can hold any type; assigning a number changes the type accordingly.

Concept Snapshot

Dynamic typing means variables can hold any type and change types anytime.
Declare with let or var, assign any value.
No errors when changing types.
Use console.log to see current value and type.
JavaScript figures out types at runtime.

Full Transcript

This example shows how JavaScript variables are dynamically typed. We start by declaring variable x and assigning it the number 10. Then we change x to hold a string "hello". Next, we assign a boolean true to x. Finally, we print x, which outputs true. The variable x changes its type without any errors because JavaScript is dynamically typed. This means variables can hold any type and change types anytime during the program. The execution table tracks each step, showing the variable's value and type. This helps beginners see how dynamic typing works in practice.

Practice

1. What does dynamic typing in JavaScript mean?

easy

A. Variables must be declared with a fixed type

B. Variables can hold any type and change types anytime

C. JavaScript does not allow variables

D. Types are checked only at compile time

Solution

1. Step 1: Understand variable typing in JavaScript

   JavaScript variables do not have fixed types and can hold any value type.

2. Step 2: Define dynamic typing

   Dynamic typing means variables can change their type during program execution.

3. Final Answer:

   Variables can hold any type and change types anytime -> Option B

4. Quick Check:

   Dynamic typing = variables change types [OK]

Hint: Remember: JavaScript variables are flexible with types [OK]

Common Mistakes:

• Thinking variables have fixed types like in Java
• Confusing dynamic typing with static typing
• Believing JavaScript checks types before running

2. Which of the following is the correct way to declare a variable that can hold any type in JavaScript?

easy

A. let x = 5;

B. int x = 5;

C. var x: number = 5;

D. const x = 'hello';

Solution

1. Step 1: Identify JavaScript variable declaration syntax

   JavaScript uses let, var, or const without type annotations.

2. Step 2: Check each option

   let x = 5; uses let correctly. int x = 5; uses int which is not valid in JavaScript. var x: number = 5; uses TypeScript syntax. const x = 'hello'; is valid but declares a constant, not a variable that can change.

3. Final Answer:

   let x = 5; -> Option A

4. Quick Check:

   Use let/var/const without types [OK]

Hint: Use let or var without type annotations [OK]

Common Mistakes:

• Using type keywords like int or number in plain JavaScript
• Confusing const with let for variable declaration
• Trying to declare types explicitly in JavaScript

3. What will be the output of this code?

let value = 10;
value = 'hello';
console.log(typeof value);

medium

A. "number"

B. "undefined"

C. "string"

D. TypeError

Solution

1. Step 1: Track variable type changes

   Initially, value is a number 10, then reassigned to string 'hello'.

2. Step 2: Evaluate typeof operator

   typeof value returns the current type, which is "string" after reassignment.

3. Final Answer:

   "string" -> Option C

4. Quick Check:

   typeof after reassignment = "string" [OK]

Hint: typeof shows current type after reassignment [OK]

Common Mistakes:

• Assuming type stays as number after reassignment
• Confusing typeof output with variable value
• Expecting an error when changing types

4. Find the error in this code snippet:

let data = 5;
data = true;
console.log(data.toFixed(2));

medium

A. TypeError because boolean has no toFixed method

B. No error, outputs "5.00"

C. SyntaxError due to reassignment

D. ReferenceError for data variable

Solution

1. Step 1: Understand variable type changes

   Variable data starts as number 5, then changes to boolean true.

2. Step 2: Check method call on boolean

   toFixed is a method for numbers, not booleans, so calling it on a boolean causes a TypeError.

3. Final Answer:

   TypeError because boolean has no toFixed method -> Option A

4. Quick Check:

   Calling number method on boolean causes TypeError [OK]

Hint: Check method compatibility with current variable type [OK]

Common Mistakes:

• Assuming toFixed works on booleans
• Thinking reassignment causes syntax error
• Ignoring runtime errors from wrong method calls

5. You want to write a function that accepts any type of input and returns its type as a string. Which code correctly uses dynamic typing to achieve this?

function getType(input) {
  // Your code here
}

hard

A. return typeof input.toString();

B. return input.type;

C. return input.constructor;

D. return typeof input;

Solution

1. Step 1: Understand typeof operator

   typeof returns the type of any JavaScript value as a string.

2. Step 2: Evaluate each option

   return typeof input; correctly returns the type string. return input.type; tries to access a property that may not exist. return input.constructor; returns a function, not a string. return typeof input.toString(); returns "string" always because toString() returns a string.

3. Final Answer:

   return typeof input; -> Option D

4. Quick Check:

   typeof returns type string for any input [OK]

Hint: Use typeof to get type as string for any value [OK]

Common Mistakes:

• Using .type property which may be undefined
• Returning constructor function instead of string
• Calling toString() then typeof, always returns "string"