I have that function:
function(stringsVar) {
var stringRes = stringsVar || localize_en;
if('window.'+stringsVar === undefined) {
stringRes = localize_en;
}
...
}
and doesn't work. That was like that actually:
function(stringsVar) {
var stringRes = stringsVar || localize_en;
}
that function can take a parameter or not and the code above is checking it correctly. Parameter of that function will be a variable. I want to add that ability to my function. It will check whether that variable is defined or not. If not there is a defined variable at system, localize_en, it will be assigned as default.
How can I correct my code. The second part of my code will be that functionality:
i.e stringsVar is localize_ar and it is not a defined variable (I define that kind of variables with var keyword)
if(window.localize_ar === undefined){
alert('yes');}
else {
alert('no');
}
I will add that functionality as parametric.
Any ideas?
PS: localize_en and something like that variables are object.
EDIT: I am working on JQuery localizer plugin => source code.
I call it as
$('html').localize('localize_' + tr);
However it can not understand it as an object, it works as if I do:
$('html').localize(localize_tr);
It changes it into a string maybe the problem lays on there?
You can use the square bracket notation to refer to object members whose name is stored in a variable, so you're probably looking for this:
if (window[stringsVar] === undefined) {
}
Furthermore, the || operator will return the first truthy; what happens if an object is passed as the first parameter? That's truthy, but you specifically want a string, so whilst the || operator looks cool, you might find the following more appropiate:
if (typeof stringVar !== "string") {
stringVar = "localize_en";
}
It also looks like you're getting confused when to use a string to refer to the object your targeting, and when not to.
When you going to be doing something like:
window[someVar]
someVar needs to be a string.
It is possible to pass an object by reference in JavaScript, and after writing all the above to help you fix the problem you've currently got, a better approach will be to pass the object by reference in the first place and avoid the problem completely, rather than passing the name of the variable storing the object:
function(obj) {
if (typeof obj !== "object") {
obj = localize_en; // here we're wanting the object itself, rather than the name of the object, so we're not using a string.
};
// Now use `obj`. It'll be either the object the user passed, or the default (localize_en).
// You can even store this in a global variable if you want to:
window.selected_obj = obj;
}
Edit:
From your comment, try this:
function (stringsVar) {
if (typeof stringsVar !== "string" || typeof window[stringsVar] !== "object") {
stringsVar = "localize_en"; // Set the default of the argument, if either none is provided, or it isn't a string, or it doesn't point to a valid object
}
var stringRes = window[stringsVar];
// Now do *whatever* you want with stringRes. It will either be the *valid* localization type the parameter specified, or the default ("localize_en").
}
You should pass this function a string.
Related
I have the below piece of code in my project. As you can see, I had to check the undefined for all the object and properties this.view && this.view.formView && this.view.formView._dapSections && this.view.formView._dapSections.scrollTop.
I'm looking for a way to check undefined for all at once.Is there any way to do that in JavaScript or dojo?
if(this.view && this.view.formView && this.view.formView._dapSections && this.view.formView._dapSections.scrollTop) {
globals.lastScrollPosition = this.view.formView._dapSections.scrollTop;
}
You might also want to try lang.exists()
https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#dojo-base-lang-exists
if (lang.exists('view.view.formView._dapSections.scrollTop', this) {
globals.lastScrollPosition = this.view.formView._dapSections.scrollTop;
}
This is precisely the sort of thing that dojo/_base/lang.getObject is designed for.
var scrollTop = lang.getObject('view.formView._dapSections.scrollTop', false, this);
if (scrollTop) {
globals.lastScrollPosition = scrollTop;
}
The first argument is a string representing the properties on the object to look up
The second argument is whether to create each property if it doesn't exist (you usually don't want to do that)
The third argument is the object to use as the context for the lookup
I know if I do
angular.element(document.querySelector('<selector-name>')).scope()
I can get the scope. But that gives me everything ($$childTail, $$childHead, etc).
Is there a method that gives me just the $scope elements (variables and functions) that I created on my controller?
One option that, as far as I can tell, provides almost exactly these properties would be to take the difference of the scope that you retrieved (via angular.element(/*...*/).scope()), and that scope's prototype.
Here's a sample function that does that:
function getAssignedScopeProperties(targetScope){
var targetProto = Object.getPrototypeOf(targetScope);
var assignedProperties = {};
for (var prop in targetScope) {
if (targetScope.hasOwnProperty(prop) && typeof targetProto[prop] === "undefined") {
assignedProperties[prop] = targetScope[prop];
}
}
return assignedProperties;
}
And then using the function:
var targetElement = angular.element(document.querySelector('<selector-name>'));
var targetProps = getAssignedScopeProperties(targetElement.scope());
Unfortunately, in Angular 1.3.15 this seems to leave the $$watchersCount property. This does not happen in versions 1.3.14, nor 1.3.16, so it was likely a bug in AngularJS for version 1.3.15.
That said, keeping a guard against $$watchersCount (or a blacklist with it) to defend against versions of Angular with such bugs doesn't feel proper to me. Another option to ensure that this doesn't happen is to include a check for prop.charAt(0) !== "$" in the inner-if, but assuming the objective is to keep all values that are assigned in the controller, removing any that the controller defined starting with a $ would certainly be wrong (of course, the person who built the controller assigning to properties starting with $ is wrong, too, but that's neither here nor there).
Older question with unaccepted answer here.
The short answer is no, angular does not provide a method for getting only user created properties. Additionally it is a bit difficult to copy or even convert a $scope object to JSON.
The slightly longer answer is you can create a custom JSON.stringify function to parse the $scope object.
var cleanScope = function(scope, includeFunctions) {
// custom JSON.stringify function
// borrowed from: https://stackoverflow.com/questions/24806495/how-to-get-plain-object-from-scope-in-angularjs
function scopeStringify(key, value) {
// ignore any key start with '$',
// and also ignore 'this' key to avoid a circular reference issue.
if (typeof key === 'string' && (key.charAt(0) === '$' || key === 'this')) {
return undefined;
}
// by default, JSON.stringify will ignore keys with a function as a value
// pass true as the second param to get back 'function' instead of ignoring
return includeFunctions && typeof value === 'function' ? 'function' : value;
}
return angular.fromJson(JSON.stringify(scope, scopeStringify));
};
// call like so:
console.log('clean $scope: ', cleanScope($scope));
// or pass true as the second param to include functions
console.log('clean $scope: ', cleanScope($scope, true));
What is the least amount of code needed to do the following:
If an object exists and it has a required property and the property is not an empty string then set a variable to the value of the property else set the variable to a default string.
Assuming that the object variable can only be undefined or a valid object, it can never be a function, null, string or anything else. Also if the object has the required property it is a string and never anything else.
A solution to this maybe:
// obj is the object we are testing, prop is the name of the property, def is the default string
var result = def;
if (obj && obj[prop] && obj[prop].length) {
result = obj[prop];
}
Whether this is completely correct I am unsure.
But is there a shorter way?
Thanks,
AJ
If you want to shorten it, you can write:
result = (obj && obj[prop]) || def;
An empty string is falsy, so you don't need to check the length explicitly.
result = <val> || <default>;
is a common idiom for setting a variable to a value, with a default if the value is null.
I was looking up how to check if a variable in JavaScript is an array, but then as the SO page was loading, I thought of a solution to the problem. Looking through the answers, I found that none of them had thought of this simple answer: Just check for the methods we need to use on the array, so that it still works for any user defined types that implement the same methods. Being the helpful person I am, I thought I'd submit my answer for future people trying to solve the same problem..But after testing it, I found it does not work.
function print(object) {
if ('map' in object) { // If the object implements map, treat it like an array
object.map(function(current) {
console.log(current);
});
} else { // Otherwise, treat it as a string
console.log(object);
}
}
Now, this works fine when I call it with an array, but if I use a string it fails. Since strings are objects in javascript, why shouldn't the 'in' keyword work for them? Is there any way to implement this that is as simple as what it currently is?
You can access the property and test its type:
if (object != null && typeof object.map === 'function')
object.map(...);
// ...
Since strings are objects in javascript, why shouldn't the 'in' keyword work for them?
Not quite. There is a difference between a primitive string value and a String instance object.
typeof "foo"; // "string"
typeof new String(); // "object"
Primitive values don't have properties themselves, which is why the in operator throws an Error when used on them. They will, however, be temporarily boxed into Objects by property accessors:
var a = "foo";
a.bar = 'bar'; // no error, but...
console.log(a.bar); // undefined
String.prototype.baz = function () {
return this + this;
};
console.log(a.baz()); // "foofoo"
I suppose you could do something like this:
var y = function (o) {
if (typeof o != "string" && "map" in o)
console.log("not a string"); //your code here
else
console.log("It's a string!"); //your code here
}
I tested this with var x = "hello" and it worked. Because && short circuits in JavaScript, it will stop at typeof o != "string", which is good, since "map" in o fails for strings. Note the intentional use of lowercase, which is for primitives; Strings are objects. I'm not exactly sure if this is what you were aiming for.
Because jQuery is a widely used and mature collaborative effort, I can't help but to look at its source for guidance in writing better Javascript. I use the jQuery library all the time along with my PHP applications, but when I look under the hood of this rather sophisticated library I realize just how much I still don't understand about Javascript. Lo, I have a few questions for the SO community. First of all, consider the following code...
$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');
vs
$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});
Now, is this to say that the attr() method was designed to accept EITHER an attribute name, an attribute name and a value, or a pair-value map? Can someone give me a short explanation of what a map actually is and the important ways that it differs from an array in Javascript?
Moving on, the whole library is wrapped in this business...
(function(window, undefined) { /* jQuery */ })(window);
I get that the wrapped parentheses cause a behavior similar to body onLoad="function();", but what is this practice called and is it any different than using the onLoad event handler? Also, I can't make heads or tails of the (window) bit there at the end. What exactly is happening with the window object here?
Am I wrong in the assessment that objects are no different than functions in Javascript? Please correct me if I'm wrong on this but $() is the all encompassing jQuery object, but it looks just like a method. Here's another quick question with a code example...
$('#element').attr('alt', 'Adopt a Phantom Cougar from Your Local ASPCA');
... Should look something like this on the inside (maybe I'm wrong about this)...
function $(var element = null) {
if (element != null) {
function attr(var attribute = null, var value = null) {
/* stuff that does things */
}
}
}
Is this the standing procedure for defining objects and their child methods and properties in Javascript? Comparing Javascript to PHP, do you use a period . the same way you would use -> to retrieve a method from an object?
I apologize for this being a bit lengthy, but answers to these questions will reveal a great deal to me about jQuery and Javascript in general. Thanks!
1. Method overloading
$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');
vs
$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});
var attr = function (key, value) {
// is first argument an object / map ?
if (typeof key === "object") {
// for each key value pair
for (var k in key) {
// recursively call it.
attr(k, key[k]);
}
} else {
// do magic with key and value
}
}
2. Closures
(function(window, undefined) { /* jQuery */ })(window);
Is not used as an onload handler. It's simply creating new scope inside a function.
This means that var foo is a local variable rather then a global one. It's also creating a real undefined variable to use since Parameters that are not specified passes in undefined
This gaurds againts window.undefined = true which is valid / allowed.
the (window) bit there at the end. What exactly is happening with the window object here?
It's micro optimising window access by making it local. Local variable access is about 0.01% faster then global variable access
Am I wrong in the assessment that objects are no different than functions in Javascript?
Yes and no. All functions are objects. $() just returns a new jQuery object because internally it calls return new jQuery.fn.init();
3. Your snippet
function $(var element = null) {
Javascript does not support default parameter values or optional parameters. Standard practice to emulate this is as follows
function f(o) {
o != null || (o = "default");
}
Comparing Javascript to PHP, do you use a period . the same way you would use -> to retrieve a method from an object?
You can access properties on an object using foo.property or foo["property"] a property can be any type including functions / methods.
4. Miscellanous Questions hidden in your question
Can someone give me a short explanation of what a map actually is and the important ways that it differs from an array in Javascript?
An array is created using var a = [] it simply contains a list of key value pairs where all the keys are positive numbers. It also has all the Array methods. Arrays are also objects.
A map is just an object. An object is simply a bag of key value pairs. You assign some data under a key on the object. This data can be of any type.
For attr, if you give an object instead of a key value pair it will loop on each property.
Look for attr: in jQuery's code, then you'll see it use access. Then look for access: and you will see there is a check on the type of key if it is an object, start a loop.
The wrapping in a function, is to prevent all the code inside to be accessed from outside, and cause unwanted problems. The only parameters that are passed are window that allow to set globals and access the DOM. The undefined I guess it is to make the check on this special value quicker.
I read sometimes jQuery but I didn't start with it, may be you should get some good books to make you an idea first of what some advanced features Javascript has, and then apply your knowledge to the specifics of jQuery.
1 - Yes attr can accept a attribute name for getting a value, a name and a value for setting one value or a map of attribute names and values for settings more than one attribute
2 - A map is basically a JavaScript object e.g:
var map = {
'key1' : 'value1',
'key2' : 'value2'
};
3 - (function(window, undefined) { /* jQuery */ })(window); is something called an anonymous function as it doesn't have a name. In this case it also executes straight away.
A simple example would be:
function test(){
...
}
test();
//As an anonymous function it would be:
(function(){
...
}();
//And it you wanted to pass variables:
function test(abc){
...
}
test(abc);
//As an anonymous function it would be:
(function(abc){
...
}(abc);
this would make it different to the load event, as it is a function not an event.
4 - window is passed as a variable, as it is used internally within jQuery
5 - Objects and functions the same, as everything in JavaScript is an object. jQuery does something like this:
var obj = {
"init" : function(){
}
}
6 - Yes you can use . to retrieve a value on an object but you can also use [] e.g:
var map = {
"test" : 1
}
map.test //1
map["test"] //1
I hope this answers your many questions, let me know if I've missed anything out.
jQuery 1.6.1
The test is typeof key === "object"
if that is true, then you passed a { .... }
jQuery.fn.extend({
attr: function( name, value ) {
return jQuery.access( this, name, value, true, jQuery.attr );
},
// Mutifunctional method to get and set values to a collection
// The value/s can be optionally by executed if its a function
access: function( elems, key, value, exec, fn, pass ) {
var length = elems.length;
// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
jQuery.access( elems, k, key[k], exec, fn, value );
}
return elems;
}
// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);
for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
}
return elems;
}
// Getting an attribute
return length ? fn( elems[0], key ) : undefined;
},