Develop Reference

Working of static variables in JavaScript

A bit of confusion on how static works in javascript.
function StaticExample() {}
StaticExample.staticProp = "Hello"
console.log(StaticExample.staticProp) // "Hello"
Here I have created a function and then created a static variable staticProp (not if we can call it static though). This adds the field staticProp to the constructor field on StaticExample's prototype
Question 1: Is there a specific reason to this behaviour(field getting added to the constructor property)?
Now the constructor is rewritten as below.
StaticExample.prototype.constructor = {}
console.log(StaticExample.staticProp) // "Hello"
Even after that, when I tried to access StaticExample.staticProp, it provides the correct value of Hello
Question 2: From where the staticProp fetched, even when the constructor where it was initially added is overwritten.

StaticExample is an object. A function object, but an object nonetheless.
You assign a new property to it: StaticExample.staticProp = "Hello".
StaticExample also happens to have a property prototype.
The property StaticExample.prototype.constructor points to StaticExample.
Now, you can obviously access StaticExample.staticProp, because it's simply a property of an object that you assigned.
You can also replace the value of StaticExample.prototype.constructor with something else; now StaticExample.prototype.constructor doesn't point to StaticExample anymore. But StaticExample is still StaticExample and it still has the property staticProp that you created on it. You didn't replace the StaticExample object in any way. What you did replace was StaticExample.prototype.constructor, which is a different property of a different object.

What is _proto_ and why is it always present faded away in any JS Object?

Whenever I open an object details in console.log, after the attached properties or functions I always see "_ proto _". What is this and why is it always present even though I never declared anything like this in my object? I know it is related to some prototype feature but not exactly sure. Also, whereever it exists, whether plain js, jquery, or Angular.js it has the exact same 13 functions below it, viz. defineGetter, defineSetter, ...., set_proto.
Can someone explain it?

So whenever you make any object in JavaScript it inherited from Object. so a object in java script have this structure
private members
proto-Reference of the prototype of current object parent.
prototype- Reference of the current objects prototype
So if you make any object let say named as object1
var object1=new Object();
it will be inherited from Object. and have proto set to Object(you can think Object as root class).

Strange behaviour with angularJS $scope.$parent

I'm have having some trouble accessing a value from the parent scope, and what appears to be some strange behaviour also.
If I log $scope.$parent to the console and inspect the DOM object there is a property topicDiscovery.name. However, when I try to log this ($scope.$parent.topicDiscovery.name) it returns undefined.
Also, when I try to log the topicDiscovery object it returns an empty array, even though when its not empty in the DOM for $scope.$parent.
Why is this?

This means $scope.$parent.topicDiscovery is getting changed after console.log. Google chrome doesnot print all json object when you do console.log. It just refer to current Object. Try using JSON.stringify($scope.$parent), Here you will not get this property as stringify converts that JS object to string and there will not be any memory linking between orignal object and string.
Here is best example.
var d={z:{b:{}}};
console.log(d); //When you check here, d.a_1 is available
console.log("d.a_1",d.a); //Here d.a_1 is not available.
//Here I am adding d.a_1 property
for(var i=0;i<10;i++){
d['a_'+i]=i;
}

Javascript object property logs normally but is undefined?

I have a Javascript object that gets initialised in an asynchronous manner, later edited and then stored in an array until it can be saved. The problem is that one of the checks it goes through is _.has(obj, 'Id'). This test always fails. I've used JSON.stringify() to log the object's internals and everything has its value and looks correct. When I run a simple test of this line with hard-coded values in plunker, everything works as expected. I've tried accessing the Id values through obj.Id and obj['Id'] but these both return undefined and I don't know why. Why can stringify read the property but a regular accessor can't? The Id is a value that is not touched between initialisation and saving of the object.

underscore/lowdash passing reference to objectwhich I can't overwrite

I'm using the _.find() methid of Lodash to find an object and I am then trying to overwrite that object, like this...
taskToUpdate = _.find($scope.tasks, {ID: myID});
taskToUpdate = {};
This finds the reference to the task perfectly, but does not set it to an empty object, it has no effect.
However, if i pick a particular property and overwrite it, it works...
taskToUpdate = _.find($scope.tasks, {ID: myID});
taskToUpdate.title = "New title";
That works fine. I have a feeling the problem here is not lodash, but my bad understanding of how objects and references are passed between functions in javascript.

That's because you're setting the local variable taskToUpdate to an empty object, meanwhile $scope.tasks still retains the original reference to the unaltered object.
Once you have the reference to the object you can then get the indexOf.
var index = _.indexOf($scope.tasks, taskToUpdate);
And then can blank out the object reference in the $scope.tasks
$scope.tasks[index] = {};
At this point the reference in $scope.tasks will be a blank plain object, but tasksToUpdate will continue to hold the object reference. You can choose to continue to use it at this point, or not. But once you've ended all closures that have a reference to that taskToUpdate object, it will cease to exist.
My guess is that you actually want to remove the reference from $scope.tasks rather than just blanking out the object reference. You can do this many ways, but here is one:
$scope.tasks = _.without($scope.tasks, taskToUpdate);