DEV Community

Cover image for Tricky javascript code

Q.1 What will be the out put of this Javascript code?

var a = 10;
function example() {
  console.log(a);
  var a = 20;
}
example();
Enter fullscreen mode Exit fullscreen mode

Output

Q.1 output

Explanation
This code snippet demonstrates a common JavaScript behavior called variable hoisting. In JavaScript, variable declarations are hoisted to the top of their scope, but their assignments remain in place.

When the example() function is called, it first tries to log the value of a. Inside the function, there's a var a = 20; statement, which creates a new local variable a within the function scope. However, due to hoisting, the declaration of var a; is hoisted to the top of the function, effectively making the function equivalent to:

Description Q1


Q.2 What will be the output?

function trickyExample() {
  console.log(a);
  if (true) {
    var a = 10;
  }
  console.log(a);
}
trickyExample();
Enter fullscreen mode Exit fullscreen mode

Output

Image description

Explanation
In the trickyExample() function, there's a console.log(a) statement before and after the if block. Inside the block, there's a var a = 10; declaration. Due to variable hoisting, the declaration var a; is hoisted to the top of the function scope, making it accessible throughout the function.

However, in JavaScript, variables declared with var inside blocks are not block-scoped; they are function-scoped. This means that the variable a declared inside the if block is accessible throughout the trickyExample() function, even before the if block.

When trickyExample() is called, the first console.log(a) statement will output undefined because a is hoisted but not yet assigned a value. The second console.log(a) statement will output 10 because a has been assigned the value 10 inside the if block.


Q.3 What will be the output?

function trickyFunction() {
  if (true) {
    var a = 5;
    let b = 10;
  }
  console.log(a);
  console.log(b);
}
trickyFunction();
Enter fullscreen mode Exit fullscreen mode

Output

Image description

Explanation
This question explores the differences between variables declared with var and let inside blocks in JavaScript.

In the trickyFunction(), there's an if block containing both var a = 5; and let b = 10; declarations. Variables declared with var are function-scoped and are hoisted to the top of the function, whereas variables declared with let are block-scoped and are not hoisted.

When trickyFunction() is called, var a is hoisted to the top of the function and is accessible throughout the function. However, let b is block-scoped and only accessible within the if block.

The first console.log(a) statement will output 5 because var a is accessible within the entire trickyFunction() function due to hoisting.

The second console.log(b) statement will result in a **ReferenceError **because let b is block-scoped to the if block and is not accessible outside of it.


Q.4 What will be the output?

var variable = 10;
(() => {
console.log(variable); 
var variable = 20;
console.log(variable);
})();
Enter fullscreen mode Exit fullscreen mode

Output

Image description

Explanation
In the given code, a variable variable is declared and assigned 10. Inside an immediately invoked function expression (IIFE), the same variable is re-declared with var and assigned 20. Due to hoisting, the first console.log(variable) prints undefined (the variable is declared but not yet assigned), and the second console.log(variable) prints 20. This demonstrates the impact of hoisting and variable re-declaration in JavaScript.


Q.5 What will be the output?

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
console.log(a);
Enter fullscreen mode Exit fullscreen mode

Output

Image description

Explanation
The code starts with a global variable a set to 1. Inside function b(), a local function a is declared, which temporarily shadows the global a. b() assigns 10 to the local a, but it doesn't affect the global one. The console.log(a) statement prints the unchanged global a, resulting in the output 1.


Q.6 Given below data set, group student based on age.

const students = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 22 },
  { name: "Charlie", age: 19 },
  { name: "David", age: 22 },
  { name: "Eve", age: 20 },
];

Enter fullscreen mode Exit fullscreen mode

Solution

*solution 1:*
const result = Object.groupBy(students, ({age}) => age)
console.log(result)

*solution 2:*
const result = Object.groupBy(students, student => student.age)
console.log(result)

Enter fullscreen mode Exit fullscreen mode

Output

19: (1) [{...}]
20: (2) [{...}, {...}]
22: (2) [{...}, {...}]

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
glenndev_ profile image

Also this one:

var a = 339491.55;
var b = 678983.1;

alert(a + b);`

Be careful.. Haha...