Search This Blog

Q11-Q15

Q11. How to make a deep copy of object in JavaScript?
Q12. What is shadowing in JavaScript?
Q13. What are event delegations in JavaScript?
Q14. What are prototypes in java script?
Q15. What is prototype chaining in java script.
-----------------------------------------------------------------------------------------------------------------------
Q11. How to make a deep copy of object in JavaScript?

Answer.

As we all know by default JavaScript copies object "by reference".
JSON.parse(JSON.stringify(objA)) is also know as making a deep copy.
To copy objects by value we can do something like below:

var objectIsNew = JSON.parse(JSON.stringify(objectIsOld));
-----------------------------------------------------------------------------------------------------------------------
Q12. What is shadowing in JavaScript?

Answer:

A variable only exists within its containing function/method/class,and those will override any variables which belong to a wider scope.
When a variable value of limited scope override the variable value of wider scope it is called shadowing.

Eg
var currencySymbol = "$";

function showMoney(amount) {
  var currencySymbol = "€"; // example of shadowing
  document.write(currencySymbol + amount);
}

showMoney("100");
https://stackoverflow.com/questions/11901427/an-example-of-variable-shadowing-in-javascript​
-----------------------------------------------------------------------------------------------------------------------
Q13. What are event delegations in JavaScript?

Answer:

The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor. Capturing and bubbling (event propagation) allow to implement one of most powerful event handling patterns called event delegation
"event.target" is used to distinguish all the elements.
https://javascript.info/event-delegation

Event listener allows you to avoid adding event listeners (addEventListener) to specific node instead the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.
https://www.youtube.com/watch?v=JOsHDJ9BS_0

--------------- HTML---------------
<body>
  <div id = "parentId">
    <a id="child1" href="#"> child1</a>
    <a id="child2" href="#"> child2</a>
    <a id="child3" href="#"> child3</a>
    <a id="child4" href="#"> child4</a>
  </div>
</body>
---------------JavaScript---------------
(function(){
  console.clear();
  parentId.addEventListener('click', function(e){
    console.log(e.target.id)
  }, false)
})();
-----------------------------------------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------------------------------------






-----------------------------------------------------------------------------------------------------------------------

No comments:

Post a Comment