10 Important Javascript Questions

Javascript is a programming language with vast area. Today we are going to talk about 10 important questions on JS.

1. What are 'Truthy' and 'Falsy' values?

This is a very common question and often confusing. If we put an expression, something that turns into a value, in Boolean() like operators, we get either 'true' or 'false'. This is the base of 'truthy' and 'falsy' value.
The exact number of truthy values is impossible to define. Rather we would only mention the falsy values and the rest of the world is truthy.
Falsy values: null, undefined, "", '',, 0, NaN, false.

Be careful about these tricky truthy values: {}, [], 'false', '0'.

2. What are the situations we can get 'undefined'?

We mainly get undefined when any variable is not assigned a value unintentionally.

• If we don't return any value from function or return nothing;

• An unassigned variable.
  
  let name; console.log(name)
  

• Trying to access any property that is not in the object.
  

const obj = {
  name: 'John',
  age: 21
}
console.log(obj.address) ---> undefined

• Trying to access any array index that is not available.

const arr = [1, 2, 3, 4];
console.log(arr[101]);

• A parameter whose value is not provided

function func(num1, num2){
  console.log(num1, num2)
}
func(22); --> // 22, undefined

3. (==) vs (===)

To remember is simply, double equal doesn't falsify type mismatch. But triple equal does.

Boolean(1=="1")   // true
Boolean(1==="1")   // false
But remember,
Boolean(NaN==NaN)   // false
Boolean(NaN===NaN)   // false

4. What does 'this' refer to?

• It it's any method of an object, this refers to the object.
• In simple function, this refers to the global object.
• Used alone, this refers to the global object.

const man = {
  name: 'Mosh',
  age: 30
  detail: function() { He is + this.name + and + this.age + years old.}
}   //this == man

var name = 'Ismail';
function printName() {
  console.log(this.name);   // the global object
}

console.log(this.name)   // the global object

5. What is arrow function?

Arrow function is a new form of defining function in ES6.

function func() {
  return 2*2;
}    //general function
const func = ()=> 2*2;   // arrow syntax
  // for single expression we don't need curly braces

  // note the case of only one parameter
const func = x => x*x; // the parenthesis can be omitted. 

  // but for multi or no parameter case we need to provide it
const func = (x, y) => x+y;

  // when we have multiple statements
const func = x => {
  // ....rest of your codes.
  return 'The square is: '+ x*x;
} 

6. What is event bubbling?

When an event occurs on any DOM element, it actually follow a process. Only the targeted element is not considered rather all the parents are also triggered. This is called event bubbling. Because it's spreading like bubbles. For example,

<div>
  <p>This is a paragraph with <span>span</span></p>
</div>

If we add event-listener to all the tags and trigger an event on the span, the event is executed this way-- span-->p-->div
If we trigger on p, p-->div

7. What is event capturing?

If we wish, we can turn the process of event upside-down. Simply,
when say, a button gets clicked, the event first goes to the element from top to down (html->body->form>....->button). This is the phase of event capturing and then the event reaches the exact element. After that event bubbling starts.

8. How does event delegation works?

In event delegation, we don't add the event-listener to the exact elements (usually more than one siblings stay here) rather we put it in the common parent element and pass that bottomwards.

<table onclick="..event">
  <tr>
     <td></td>
     ...
  </tr>
  <tr>
     <td></td>
     ...
  </tr>
</table>

In the above code, we don't put event listener on all single tds. But put the listener in table and delegate to its children.

9. What is DOM?

When an HTML page loads on the browser, all its tags collectively create a *D*ocument *O*bject *M*odel. It forms a tree of the elements, which is highly useful to work with HTML from Javascript.

10. What is event loop?

Under the hood of JS, asynchronous tasks are referred to Web API-> event queue. From the queue, the tasks come in call-stack. But they cannot enter the stack when other functions are there. Event loop ensures that nothing is in the call-stack and 'you can now visit the stack from queue' .