Why greeter is undefined for first console.log?

Question

const greeter = 'CodeQuotient';

const sayHi = function greetings() 
{
 console.log(`${greeter} says, 'Hi!'`);
 
 var greeter = 'CQ';

 console.log(`${greeter} says, 'Hi!'`);
}


sayHi();

If I run this code then output is

undefined says, 'Hi!'
CQ says, 'Hi!'

I want to ask why the first greeter for first console.log is undefined

and also if I remove the inner greeter variable then outer variable is assigned to both the console.logs . Why?

const greeter = 'CodeQuotient';

const sayHi = function greetings() {
  console.log(`${greeter} says, 'Hi!'`);


  console.log(`${greeter} says, 'Hi!'`);
}

sayHi();

And the output of above code after removing inner greeter variable is

CodeQuotient says, 'Hi!'

CodeQuotient says, 'Hi!'

Why?