DEV Community

loading...

10 Important Javascript Questions

abdullah-alamin
・Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode
  • Trying to access any array index that is not available.
const arr = [1, 2, 3, 4];
console.log(arr[101]);
Enter fullscreen mode Exit fullscreen mode
  • A parameter whose value is not provided
function func(num1, num2){
  console.log(num1, num2)
}
func(22); --> // 22, undefined
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
} 
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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' .

Discussion (0)

Forem Open with the Forem app