Finally block in Javascript - Mini Project: Build & Apply

Using the Finally Block in JavaScript

📖 Scenario: Imagine you are writing a program that tries to read a file and process its content. Sometimes the file might not exist, causing an error. You want to make sure that no matter what happens, a message is always shown to say the process is finished.

🎯 Goal: You will create a simple program that uses a try, catch, and finally block. The finally block will always run, whether an error happens or not.

📋 What You'll Learn

Create a variable called fileContent with the value "Hello, world!".

Create a variable called fileExists and set it to false.

Write a try block that throws an error if fileExists is false.

Write a catch block that catches the error and sets fileContent to "Default content".

Write a finally block that prints "Process finished.".

Print the value of fileContent after the try-catch-finally.

💡 Why This Matters

🌍 Real World

In real programs, you often need to handle errors like missing files or network problems. The <code>finally</code> block helps you make sure some code always runs, like closing files or showing messages.

💼 Career

Understanding error handling with <code>try-catch-finally</code> is important for writing reliable JavaScript code in jobs like web development, backend programming, and software testing.

1

Create initial variables

Create a variable called fileContent and set it to the string "Hello, world!".

Javascript

// Create a variable called fileContent and set it to "Hello, world!"
// Your code here

Hint

Use let fileContent = "Hello, world!"; to create the variable.

2

Add a file existence flag

Create a variable called fileExists and set it to false.

Javascript

let fileContent = "Hello, world!";
// Create a variable called fileExists and set it to false
// Your code here

Hint

Use let fileExists = false; to create the flag.

3

Write try-catch-finally blocks

Write a try block that throws an error with the message "File not found" if fileExists is false. Then write a catch block that sets fileContent to "Default content". Finally, write a finally block that prints "Process finished.".

Javascript

let fileContent = "Hello, world!";
let fileExists = false;

// Write try-catch-finally blocks as described
// Your code here

Hint

Use try, catch, and finally blocks exactly as described.

4

Print the file content

Write a line to print the value of fileContent after the try-catch-finally block.

Javascript

let fileContent = "Hello, world!";
let fileExists = false;

try {
    if (!fileExists) {
        throw new Error("File not found");
    }
} catch (error) {
    fileContent = "Default content";
} finally {
    console.log("Process finished.");
}

// Print the value of fileContent
// Your code here

Hint

Use console.log(fileContent); to print the content.

Practice

1.

What is the main purpose of the finally block in JavaScript?

easy

A. To define variables used in try block

B. To run code that always executes after try and catch blocks

C. To catch errors thrown in the try block

D. To skip the catch block if no error occurs

Solution

1. Step 1: Understand try-catch-finally structure

   The try block runs code that might throw errors, catch handles those errors.

2. Step 2: Role of finally block

   The finally block runs code after try and catch, no matter if an error occurred or not.

3. Final Answer:

   To run code that always executes after try and catch blocks -> Option B

4. Quick Check:

   finally always runs = C [OK]

Hint: finally always runs after try/catch, no matter what [OK]

Common Mistakes:

• Thinking finally only runs if there is an error
• Confusing catch and finally blocks
• Believing finally can catch errors

2.

Which of the following is the correct syntax to add a finally block after a try and catch block?

try {
  // code
} catch (e) {
  // handle error
} ??? {
  // cleanup code
}

easy

A. cleanup

B. final

C. finally

D. end

Solution

1. Step 1: Recall JavaScript error handling syntax

   The correct keyword after catch is 'finally' to run code always.

2. Step 2: Check options for correct keyword

   Only 'finally' is valid JavaScript syntax here.

3. Final Answer:

   finally -> Option C

4. Quick Check:

   finally keyword syntax = D [OK]

Hint: finally is the exact keyword after catch for cleanup [OK]

Common Mistakes:

• Using 'final' or 'end' instead of 'finally'
• Omitting the finally block keyword
• Placing finally before catch

3.

What will be the output of this code?

function test() {
  try {
    console.log('Try block');
    return 'Return from try';
  } catch (e) {
    console.log('Catch block');
  } finally {
    console.log('Finally block');
  }
}
console.log(test());

medium

A. Finally block\nReturn from try

B. Try block\nCatch block\nFinally block\nReturn from try

C. Try block\nReturn from try

D. Try block\nFinally block\nReturn from try

Solution

1. Step 1: Trace the try block execution

   It logs 'Try block' and then hits return 'Return from try'.

2. Step 2: Understand finally runs after return

   Even after return, finally runs and logs 'Finally block'. Then function returns.

3. Final Answer:

   Try block\nFinally block\nReturn from try -> Option D

4. Quick Check:

   finally runs after return = A [OK]

Hint: finally runs even after return in try [OK]

Common Mistakes:

• Thinking finally does not run after return
• Expecting catch block to run without error
• Missing the order of console logs

4.

Find the error in this code snippet:

try {
  throw new Error('Oops');
} catch {
  console.log('Caught error');
} finally {
  console.log('Cleanup');
}

medium

A. No error, code runs fine

B. finally block cannot be used without catch parameter

C. throw statement is incorrect

D. Missing error parameter in catch block

Solution

1. Step 1: Check catch block syntax

   Optional catch binding (ES2019+) allows catch {} without parameter. Valid in modern JavaScript.

2. Step 2: Verify execution

   Throws error, catch logs 'Caught error', finally logs 'Cleanup'. No errors.

3. Final Answer:

   No error, code runs fine -> Option A

4. Quick Check:

   catch {} valid = D [OK]

Hint: catch {} valid in modern JS with optional binding [OK]

Common Mistakes:

• Thinking catch always requires parameter
• Believing syntax error without catch param
• Confusing with pre-ES2019 JS

5.

Consider this code:

let result = '';
function test() {
  try {
    result += 'Try';
    throw new Error('Error!');
  } catch (e) {
    result += 'Catch';
    return result;
  } finally {
    result += 'Finally';
  }
}
test();
console.log(result);

What will be printed to the console?

hard

A. TryCatchFinally

B. TryCatch

C. TryFinally

D. Try

Solution

1. Step 1: Trace try block execution

   result becomes 'Try', then error is thrown.

2. Step 2: Catch block runs and appends 'Catch', then returns result ('TryCatch')

   Before returning, finally runs and appends 'Finally' to result.

3. Step 3: Check console.log output

   console.log prints result after finally appended, so 'TryCatchFinally'.

4. Final Answer:

   TryCatchFinally -> Option A

5. Quick Check:

   finally runs before return completes = B [OK]

Hint: finally runs before return completes, modifies variables [OK]

Common Mistakes:

• Assuming return stops finally from running
• Expecting console.log to print before finally modifies result
• Ignoring that finally runs even after return