function add(item ,array){
    return array.push(item)
}

const result1 = add('a',['b','c'])
console.log(result1);

// Answer : 3

async function getValue(){
    return 'i love javascript'
}

const result2 = getValue();
console.log(result2);

// Answer : Promise {' i love javascript'}

async function getValue(){
    return 'i love javascript'
}

async function getResult(){
    const result = await getValue();
    console.log(result);
}
getResult();

// Answer : i love javascript

var x = 6;
var y = 3;

 ( x < 10 && y > 1)

 // Answer : true

var x = 2 + 2 - '2';
console.log(x)

// Answer : 2

var x = "2" + "2" - "2;
console.log(x)

// Answer : 20

What is the output of the following code ? 

console .log(typeof NaN)

A."NaN"          B."string"
C."number"       D."undefined"

// Answer : C.number

What does the NaN value represent in JavaScript ? 

A."NaN"          B."Not a Number"
C."number"       D."undefined"

// Answer : B.Not a Number

What is the output ? 

setTimeout(() =>{
console.log(1);
},0)

queueMicrotask(() =>{
    console.log(2);
})

Promise.resolve().then(()=>{
    console.log(3);
})

console.log(4);

// Answer : 4,2,3,1

What is the output ?  

const obj ={
    x : 10,
    y : 20
};

Object.freeze(obj);
const newObj = obj;
newObj.x = 50;
newObj.y = 60;

console.log(newObj.x);
console.log(newObj.y);

// Answer : 10 , 20

What is the output ? 

const obj1 ={
    name : 'Chumki',
    address:{
        country : 'Bangladesh',
        city : 'Rajshahi',
        ['post office'] : {
            one : 'mou'
        }
    }
};

// const obj2 = structuredClone (obj1)

const obj2 = {...obj1}
obj2.address['post office'].one = 'Sholua'
console.log(obj1.address['post office'].one)


// Answer : Sholua

What is the output ?  

const obj1 = { a : 1 , b : 2};
const obj2 = { b : 4 , c: 5}

const newObj = Object.assign(obj1 , obj2);

console.log(newObj);    // Answer : {a : 1 , b:4 , c: 5}
console.log( obj1 === newObj);    // Answer :  true

What is the output ?  

function test(a,b){
    console.log(a);
}
test(10);

// Answer : 10

What is the difference between `==` and `===` ?  

console.log(1 == '1')   // Answer : true
console.log(1 === '1')   // Answer : false
console.log(1 === 1)   // Answer : true

What is the difference between `map()` and `forEach()` methods ?  

`Answer :` The 'map()' method creates a new array with the results of calling provided function on every element in the calling array . 

Whereas, the forEach() method executes a provided function once for each array element.

What is the difference between `var`, `let`, and `const` in JavaScript ?  

`Answer :` In JavaScript , `var` is function-scoped and was traditionally used to declare variables .

`let` and `const` are block-scoped .

The key difference between `let` and `const` is that `let` allows for reassignment while `const` creates a read only reference . 
 

What are the different ways to declare a variable in JavaScript ?  

`Answer :` There are three ways to declare a variable in javaScript 

1. `var`
2. `let`
3. `const` 
 

What is the difference between `null` and `undefined`? ?  

`Answer :` 

null : The `null` is an assignment value . It can be assigned to a variable as a representation of no value . 

undefined : The `undefined` is a primitive value that represents the absence of a value , or a variable that has not been assigned value . 

What is JavaScript ?  

`Answer :` 

JavaScript : JavaScript is a high-level , versatile , and widely-used programming language primarily known for its role in web development . It enables interactive and dynamic behavior on websites . 

Does `map()` method mutate the original array ?  

`Answer :` No, the `map()` method does not mutate the original array . It returns a new array with the results of calling the provided function on every element in the calling element .  

 const roadMaps = ['JavaScript' , 'React' , 'Node.js']

const reNamedRoadMaps  = roadMaps.map((roadmap) => {
    return `${roadmap} Roadmap`;
})

console.log(roadMaps); // ['JavaScript', 'React', 'Node.js']
console.log(reNamedRoadMaps); // ['JavaScript Roadmap', 'React Roadmap', 'Node.js Roadmap']

Can you merge multiple arrays in JavaScript ?  

`Answer :` Yes , you can marge multiple arrays into one array using `concat()` method , or the spreed operator `...`

concat() : 

The `concat()` method is used to marge two or more arrays . This method does not change the existing arrays , but instead returns a new array . 

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const arr3 = arr1.concat(arr2);
console.log(arr3);   // Answer :  [1, 2, 3, 4, 5, 6]



Spread operator : 

The spread operator `...` is used to expand an iterable object into the list of arguments . 
 
const arr1 = [1,2,3];
const arr2 = [4,5,6];

const arr3 = [...arr1 , ...arr2];
console.log(arr3); // Answer :  [1, 2, 3, 4, 5, 6]

`Answer :` You can use `break` and `continue` in loops to alter the flow of the loop . 

`break` will stop the loop from continuing .
`continue` will skip the current iteration and continue the loop .


break : 

for (let i = 0; i < 5; i++){
   if(i === 1){
    break;   //stop the loop
   }
   console.log(` i : ${i}`)        //Answer----> i:0
}


continue : 

for (let i = 0; i< 5; i++){
    if(i === 1){
        continue;    // skips the rest of the code in the loop
    }
  console.log(`i:${i}`)
}

// Output:
// i: 0
// i: 2
// i: 3
// i: 4

`Answer :` 

In order to define multiline strings in JavaScript, you need to use template literals. Template literals are enclosed by the backtick (` `) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (`${expression}`).

`Answer :` The Event loop has two main components: the Call stack and the Callback queue.

Call Stack : 

The Call stack is a data structure that stores the tasks that need to be executed. It is a LIFO (Last In, First Out) data structure, which means that the last task that was added to the Call stack will be the first one to be executed.

Callback Queue : 

The Callback queue is a data structure that stores the tasks that have been completed and are ready to be executed. It is a FIFO (First In, First Out) data structure, which means that the first task that was added to the Callback queue will be the first one to be executed.

Event Loop's Workflow :

1.Executes tasks from the Call Stack.
2.For an asynchronous task, such as a timer, it runs in the background. JavaScript proceeds to the next task without waiting.
3.When the asynchronous task concludes, its callback function is added to the Callback Queue.
4.If the Call Stack is empty and there are tasks in the Callback Queue, the Event Loop transfers the first task from the Queue to the Call Stack for execution.

setTimeout(() => console.log('Hello from the timer'), 0);
console.log('Hello from the main code');

1.setTimeout is processed, and because it's asynchronous, its callback is placed in the Callback Queue.
2.The next line, console.log("Hello from the main code"), is logged immediately.
3.Although the timer duration is 0 milliseconds, its callback has to wait until the Call Stack is empty. After the main code logs, the callback is moved from the Callback Queue to the Call Stack and executed.
4.The result is "Hello from the main code" being logged before "Hello from the timer".

`Answer :` In JavaScript you can accept a variable number of arguments in a function using the `arguments` or object or the rest parameter `(...)`.

Using the `arguments` object : 

The `arguments` is an array-like object that holds of the passed arguments . They are only available inside the function body .

function displayArgs (){
    for (let i = 0; i <arguments.length; i++){
        console.log(arguments[i]);
    }
}

displayArgs(1,2,3,4);     // Answer : 1,2,3,4

Using the rest parameter :

Tje rest parameter allows you to represent an indefinite number of arguments as an array . 

function displayArgs(...args){
     args.forEach(arg => console.log(arg))
}

displayArgs(1,2,3,4);    // Answer : 1,2,3,4


The rest parameter `(...args in the example)` is generally more modern and flexible , it provides an actual array , unlike the array-like `arguments` object . 

`Answer :` You can see `window.innerWidth` and `window.innerHeight` to get the viewport dimensions .

let i = 0;

do{
    console.log(i);
    i++;
} while (i < 3)

//output 
// 0
// 1
// 2

console.log(condition ? true : false);

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Clicked on link!');
});

console.log(2**3);

A.5        B.6
C.8        D.9

//Answer : C.8

console.log(2*3);

A.5        B.6
C.8        D.9

//Answer : B.6

console.log('before');

setTimeOut(() =>{
    console.log('hello');
},1000);

console.log('after')

console.log('before');

for (let i = 0; i < 1000000000; i++) {}

console.log('After');

const roadmapWrapper = document.querySelector('.roadmap-wrapper');
const roadmapTitle = document.querySelector('#roadmap-title');

const roadmapItems = document.querySelectorAll('.roadmap-item'); 

console.log('hello'|| 0);        // hello
console.log(false || 'hello');    // hello
console.log('hello'|| 'world');    // hello

console.log('hello' && 0); // 0
console.log(false && 'hello'); // false
console.log('hello' && 'world'); // world

console.log(!true); // false
console.log(!false); // true
console.log(!'hello'); // false
console.log(!0); // true

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(number =>{
  return number % 2 === 0
})

console.log(numbers);         //[1, 2, 3, 44, 5, 6]
console.log(eventNumbers);    //[2, 4, 6]