javascript interview question

8.Document.ready & document.load

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


$(window).load(function() {
  // executes when complete page is fully loaded, including all frames, objects and images
  console.log("window is loaded");

• difference between anonymous function and named function?(scenarios?
• Function declarations (like your first) and function expressions (like your second) are processed at different times.
• They have different effects on the scope in which they occur.
• Your first function has a true name, your second does not in ES5 and earlier, your second does not; in ES6/ES2015, it does, because the specification says that the JavaScript engine must assign the name of the variable to the function in that case.

If you look around for "function declaration" vs. "function expression" you'll find a lot of talk (some of it even correct) on the topic.

But briefly:

Function Declaratio

A function declaration like your first example happens when the execution cursor enters its containing scope (containing function or the global scope), before any step-by-step code is done. Therefore they cannot appear within non-function blocks (if, try, etc.), since no step-by-step code has been run when they're processed. The name of the function is added to the scope in which it appears, and the function object has a true name (although there's no standard way to query that name, it's still useful in stack traces and such). (Note: Some JavaScript engines allow function declarations within blocks, but it's invalid and what they do is not necessarily consistent. Don't do it.)

Anonymous Function ExpressionA function expression like your second example happens, like all expressions, when it's encountered in the step-by-step flow of the code. Your expression is called an anonymous function expression since it doesn't explicitly specify a name for the function. In ES5 and earlier, that meant that the resulting function had no name. In ES6/ES2015 and later, many functions created with anonymous function expressions do have names because the name can be inferred from the expression, and that's the case with your example, in which the function ends up with the name the variable has: foo. Since anonymous function expressions are expressions, they can occur anywhere expressions can occur, although sometimes you have to warn the parser that that's what you're doing.

Named Function Expression

There's a third way of doing this: A named function expression, rather than an anonymous one. They look like this:

var foo = function bar() {
};

or

var obj = {
    foo: function bar() {
    }
};

or

doSomething(function bar() { });

etc.

They used to be really problematic cross-browser (IE8 and earlier mess them up, for instance; early versions of Safari had issues, etc.; Kangax has a good page of the problems that used to abound). It's an expression, so it's valid anywhere there's an expression. The function name (bar in my example) is not added to the containing scope by a compliant JavaScript engine.

Deep Copying Objects

A deep copy will duplicate every object it encounters. The copy and the original object will not share anything, so it will be a copy of the original. Here's the fix to the problem we encountered using Object.assign(). Let's explore.

Using JSON.parse(JSON.stringify(object));

This fixes the issue we had earlier. Now newObj.b has a copy and not a reference! This is a way to deep copy objects. Here's an example:

let obj = { 
  a: 1,
  b: { 
    c: 2,
  },
}

let newObj = JSON.parse(JSON.stringify(obj));

obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } } (New Object Intact!)