What is array besides string/arrays? - javascript

Trying to learn javascript by reading underscore sourcecode and came across the below code:
var shallowProperty = function(key) {
return function(obj) {
return obj == null ? void 0 : obj[key];
};
};
var getLength = shallowProperty('length');
console.log(getLength('123'))//3
console.log('123'['length'])//3
console.log(getLength(['1','2']))//2
console.log(['1','2']['length'])//2
My question is, what is [length] besides ['1','2']? Any technical terms to call it? Where can we get the full list of keys/attributes available other than length?

An array is a JavaScript object. An object can have properties. You can access them in a few, equivalent ways:
myObject.property
myObject['property']
See this MDN documentation.
To show all the properties of an object:
Object.getOwnPropertyNames(myObject);
You might like to refer to this question about listing the properties of an object.

Suppose you have the following object:
let person = {
name: 'foo',
age: 23
}
// Then, there are two possible ways to get the properties of "person" object
console.log(person.name); // logs 'foo'
console.log(person['name']); // logs 'foo'

Related

Getting an object by its name contained in a string

I am trying to get a const object indirectly by its name, which is contained in a string. I have no idea if this is possible but if it is, it would make my life a hell of a lot easier. As an example in pseudocode: var obj = findObject("myConstObject");
I know this is a strange thing to need, but I am dealing with quite a large amount of data, and being able to grab objects in this way would work a lot better with my existing code. Thanks in advance!
You can use Object.getOwnPropertyNames() to get all property names of an object. Here is an example that demonstrates how to search a myObj1 that is in the global window scope, and a myObj2 that is in the myStuff object scope:
// object attached to window object:
myObj1 = { a: 1 };
function getKeyNames(aThis) {
return Object.getOwnPropertyNames(aThis || globalThis).sort();
}
console.log('search myObj1 in global scope:', getKeyNames().filter(name => name === 'myObj1'));
// object attached to my on stuff:
const myStuff = {
myObj2: { b: 2 },
deeperLevel: {
myObj3: { b: 3 },
}
}
console.log('search myObj2 in myStuff scope:', getKeyNames(myStuff).filter(name => name === 'myObj2'));
Output:
search myObj1 in global scope: [
"myObj1"
]
search myObj2 in myStuff scope: [
"myObj2"
]
Notes:
if needed, expand this code to search recursively the object hierarchy, so that myStuff.deeperLevel.myObj3 can be found searching myStuff
if needed, expand this code to search a list of objects of interest

Add or avoid adding a property in an object depending on a boolean within the object itself [duplicate]

This question already has answers here:
Update only non-empty fields | Object spread
(2 answers)
In JavaScript, how to conditionally add a member to an object?
(29 answers)
Closed 4 years ago.
Basically I wonder if I could avoid adding a property into an object if a variable is false but from inside the object. So let's say I have this object:
var obj = { foo: 'bar', bar: 'foo' };
Now I want to rewrite the same object but I only want to add the second property if a new variable, which is a boolean, is true.
The problem is how could I do this for example with a ternary operator like this:
var add = false;
var obj = {
foo: 'bar',
(add ? bar: 'foo': null)
};
What I want to avoid is to have this:
...
bar: ( add ? 'foo' : undefined )
Because I don't want to have the bar index in case add == false. Also the assignament must be inside to object ( that's the question about, if it's posible ) because something like this is not what I'm looking for:
...
if (!add) delete obj.bar; // This would be after the creation of the whole object
Work arounds
Obviously this can be achieved in many ways, but I haven't found any that is done inside the object itself. I could use a ternary operator and having two objects like this:
var obj = add ? {
foo: 'bar',
bar: 'foo'
} : { foo: 'bar' };
But this would lead to having duplicated code ( when the object has more properties ).
Edit I'd say that my question is slightly different from the duplicates since my question refers to do it inside the object not after its declaration nor anything that isn't between var obj = { ... }
There is an accepted answer but I would love if someone knows any other way of doing it without the use of spread operator. Thank you all
A quick way of doing it using the spread operator:
const condition = false;
const foo = {
bar: 'baz',
...(condition ? {
boz: 'bat'
} : {})
};
console.log(foo);
This works because the spread operator for object literals does nothing on objects without enumerable own properties.
To achieve expected result , use below option of adding propeter based on condition in separate line
https://codepen.io/nagasai/pen/ebQmrb?editors=1010
var add = false;
var obj = { foo: 'bar'};
if(add){
obj.bar = 'foo'
}
console.log(obj)
Option 2: Use undefined value for bar, if condition is false and use JSON.stringify and JSON.parse to remove undefined 'bar' property on condition -false
var add = false;
var obj = JSON.parse(JSON.stringify({ "foo": 'bar', "bar" : add? 'foo': undefined}));
console.log(obj);
codepen - https://codepen.io/nagasai/pen/zyMgxj?editors=1010

Using Javascript object as object key

I am trying to devise a way to use a simple Javascript object (one level deep key value pairs) as a key to another object. I am aware that merely using the object without stringification will result in [Object object] being used as the key; see the following: Using an object as a property key in JavaScript (so this question is not a duplicate).
There is a blog post about it that takes this into account and also accounts for the need to sort by object key since their order is not guaranteed, but the included Javascript code runs over a 100 lines. We are using the underscore.js library since that goes hand in hand with backbone but pure Javascript alternatives will also be of interest.
In ECMAScript 6 you'll be able to use Maps.
var map = new Map();
var keyObj = { a: "b" },
keyFunc = function(){},
keyString = "foobar";
// setting the values
map.set(keyObj, "value associated with keyObj");
map.set(keyFunc, "value associated with keyFunc");
map.set(keyString, "value associated with 'foobar'");
console.log(map.size); // 3
// getting the values
console.log(map.get(keyObj)); // "value associated with keyObj"
console.log(map.get(keyFunc)); // "value associated with keyFunc"
console.log(map.get(keyString)); // "value associated with 'a string'"
console.log(map.get({ a: "b" })); // undefined, because keyObj !== { a: "b" }
console.log(map.get(function(){})); // undefined, because keyFunc !== function(){}
console.log(map.get("foobar")); // "value associated with 'foobar'"
// because keyString === 'foobar'
I wrote a hash table implementation that accepts arbitrary keys but I suspect you'll reject it on the grounds of the relatively large file size.
https://code.google.com/p/jshashtable/
Here is an underscore based solution that relies on first converting the object to key-value pairs.
var myObj = { name: 'john', state: 'ny', age: 12};
var objPairs = _.pairs(myObj);
var sortedPairs = _.reduce(_.keys(myObj).sort(), function(sortedPairs, key) {
var pair = _.find(objPairs, function(kvPair) {return kvPair[0] == key});
sortedPairs.push(pair);
return sortedPairs;
}, []);
console.log(JSON.stringify(sortedPairs)); //stringifying makes suitable as object key
// [["age",12],["name","john"],["state","ny"]]
You could use a pattern like this. This way, your key for an object is this random id that you generate for every object.
var MyObject = function(name) {
this.name = name;
this.id = Math.random().toString(36).slice(2);
}
MyObject.prototype.toString = function() {
return this.id;
}

How to display all methods of an object?

I want to know how to list all methods available for an object like for example:
alert(show_all_methods(Math));
This should print:
abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random,round, sin, sqrt, tan, …
You can use Object.getOwnPropertyNames() to get all properties that belong to an object, whether enumerable or not. For example:
console.log(Object.getOwnPropertyNames(Math));
//-> ["E", "LN10", "LN2", "LOG2E", "LOG10E", "PI", ...etc ]
You can then use filter() to obtain only the methods:
console.log(Object.getOwnPropertyNames(Math).filter(function (p) {
return typeof Math[p] === 'function';
}));
//-> ["random", "abs", "acos", "asin", "atan", "ceil", "cos", "exp", ...etc ]
In ES3 browsers (IE 8 and lower), the properties of built-in objects aren't enumerable. Objects like window and document aren't built-in, they're defined by the browser and most likely enumerable by design.
From ECMA-262 Edition 3:
Global Object
There is a unique global
object (15.1), which is created before
control enters any execution context.
Initially the global object has the
following properties:
• Built-in
objects such as Math, String, Date,
parseInt, etc. These have attributes {
DontEnum }.
• Additional host defined
properties. This may include a
property whose value is the global
object itself; for example, in the
HTML document object model the window
property of the global object is the
global object itself.
As control
enters execution contexts, and as
ECMAScript code is executed,
additional properties may be added to
the global object and the initial
properties may be changed.
I should point out that this means those objects aren't enumerable properties of the Global object. If you look through the rest of the specification document, you will see most of the built-in properties and methods of these objects have the { DontEnum } attribute set on them.
Update: a fellow SO user, CMS, brought an IE bug regarding { DontEnum } to my attention.
Instead of checking the DontEnum attribute, [Microsoft] JScript will skip over any property in any object where there is a same-named property in the object's prototype chain that has the attribute DontEnum.
In short, beware when naming your object properties. If there is a built-in prototype property or method with the same name then IE will skip over it when using a for...in loop.
It's not possible with ES3 as the properties have an internal DontEnum attribute which prevents us from enumerating these properties. ES5, on the other hand, provides property descriptors for controlling the enumeration capabilities of properties so user-defined and native properties can use the same interface and enjoy the same capabilities, which includes being able to see non-enumerable properties programmatically.
The getOwnPropertyNames function can be used to enumerate over all properties of the passed in object, including those that are non-enumerable. Then a simple typeof check can be employed to filter out non-functions. Unfortunately, Chrome is the only browser that it works on currently.
​function getAllMethods(object) {
return Object.getOwnPropertyNames(object).filter(function(property) {
return typeof object[property] == 'function';
});
}
console.log(getAllMethods(Math));
logs ["cos", "pow", "log", "tan", "sqrt", "ceil", "asin", "abs", "max", "exp", "atan2", "random", "round", "floor", "acos", "atan", "min", "sin"] in no particular order.
var methods = [];
for (var m in obj) {
if (typeof obj[m] == "function") {
methods.push(m);
}
}
alert(methods.join(","));
This way, you will get all methods that you can call on obj. This includes the methods that it "inherits" from its prototype (like getMethods() in java). If you only want to see those methods defined directly by obj you can check with hasOwnProperty:
var methods = [];
for (var m in obj) {
if (typeof obj[m] == "function" && obj.hasOwnProperty(m)) {
methods.push(m);
}
}
alert(methods.join(","));
Most modern browser support console.dir(obj), which will return all the properties of an object that it inherited through its constructor. See Mozilla's documentation for more info and current browser support.
console.dir(Math)
=> MathConstructor
E: 2.718281828459045
LN2: 0.6931471805599453
...
tan: function tan() { [native code] }
__proto__: Object
The other answers here work for something like Math, which is a static object. But they don't work for an instance of an object, such as a date. I found the following to work:
function getMethods(o) {
return Object.getOwnPropertyNames(Object.getPrototypeOf(o))
.filter(m => 'function' === typeof o[m])
}
//example: getMethods(new Date()): [ 'getFullYear', 'setMonth', ... ]
https://jsfiddle.net/3xrsead0/
This won't work for something like the original question (Math), so pick your solution based on your needs. I'm posting this here because Google sent me to this question but I was wanting to know how to do this for instances of objects.
Approach that works nicely with ES6 classes and inheritance
This is likely what most newbie ES6 users like me mean when they are looking for "how to list object methods".
This has been adapted from: https://stackoverflow.com/a/47714550/895245
// Define getMethods.
const isGetter = (x, name) => (Object.getOwnPropertyDescriptor(x, name) || {}).get
const isFunction = (x, name) => typeof x[name] === "function";
const deepFunctions = x =>
x && x !== Object.prototype &&
Object.getOwnPropertyNames(x)
.filter(name => isGetter(x, name) || isFunction(x, name))
.concat(deepFunctions(Object.getPrototypeOf(x)) || []);
const distinctDeepFunctions = x => Array.from(new Set(deepFunctions(x)));
const getMethods = (obj) => distinctDeepFunctions(obj).filter(
name => name !== "constructor" && !~name.indexOf("__"));
// Example usage.
class BaseClass {
override() { }
baseMethod() { }
}
class DerivedClass extends BaseClass {
override() { }
get myGetter() { }
static myStatic() { }
}
const obj = new DerivedClass();
const methods = getMethods(obj)
methods.sort()
const assert = require('assert')
assert(methods[0] === 'baseMethod')
assert(methods[1] === 'myGetter')
assert(methods[2] === 'override')
console.log(getMethods(Math))
Note how it also includes methods of base classes as most users will want to see which methods they can call on the object.
It also appears to work with Math, it output:
[
'abs', 'acos', 'acosh', 'asin',
'asinh', 'atan', 'atanh', 'atan2',
'ceil', 'cbrt', 'expm1', 'clz32',
'cos', 'cosh', 'exp', 'floor',
'fround', 'hypot', 'imul', 'log',
'log1p', 'log2', 'log10', 'max',
'min', 'pow', 'random', 'round',
'sign', 'sin', 'sinh', 'sqrt',
'tan', 'tanh', 'trunc'
]
Tested on Node.js 14.17.0.
Math has static method where you can call directly like Math.abs() while Date has static method like Date.now() and also instance method where you need to create new instance first var time = new Date() to call time.getHours().
// The instance method of Date can be found on `Date.prototype` so you can just call:
var keys = Object.getOwnPropertyNames(Date.prototype);
// And for the static method
var keys = Object.getOwnPropertyNames(Date);
// But if the instance already created you need to
// pass its constructor
var time = new Date();
var staticKeys = Object.getOwnPropertyNames(time.constructor);
var instanceKeys = Object.getOwnPropertyNames(time.constructor.prototype);
Of course you will need to filter the obtained keys for the static method to get actual method names, because you can also get length, name that aren't a function on the list.
But how if we want to obtain all available method from class that extend another class?
Of course you will need to scan through the root of prototype like using __proto__. For saving your time you can use script below to get static method and deep method instance.
// var keys = new Set();
function getStaticMethods(keys, clas){
var keys2 = Object.getOwnPropertyNames(clas);
for(var i = 0; i < keys2.length; i++){
if(clas[keys2[i]].constructor === Function)
keys.add(keys2[i]);
}
}
function getPrototypeMethods(keys, clas){
if(clas.prototype === void 0)
return;
var keys2 = Object.getOwnPropertyNames(clas.prototype);
for (var i = keys2.length - 1; i >= 0; i--) {
if(keys2[i] !== 'constructor')
keys.add(keys2[i]);
}
var deep = Object.getPrototypeOf(clas);
if(deep.prototype !== void 0)
getPrototypeMethods(keys, deep);
}
// ====== Usage example ======
// To avoid duplicate on deeper prototype we use `Set`
var keys = new Set();
getStaticMethods(keys, Date);
getPrototypeMethods(keys, Date);
console.log(Array.from(keys));
If you want to obtain methods from created instance, don't forget to pass the constructor of it.
The short answer is you can't because Math and Date (off the top of my head, I'm sure there are others) are't normal objects. To see this, create a simple test script:
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
alert("Math: " + Math);
alert("Math: " + Math.sqrt);
alert("Date: " + Date);
alert("Array: " + Array);
alert("jQuery: " + jQuery);
alert("Document: " + document);
alert("Document: " + document.ready);
});
</script>
</body>
</html>
You see it presents as an object the same ways document does overall, but when you actually try and see in that object, you see that it's native code and something not exposed the same way for enumeration.
I believe there's a simple historical reason why you can't enumerate
over methods of built-in objects like Array for instance. Here's why:
Methods are properties of the prototype-object, say Object.prototype.
That means that all Object-instances will inherit those methods. That's
why you can use those methods on any object. Say .toString() for instance.
So IF methods were enumerable, and I would iterate over say {a:123}
with: "for (key in {a:123}) {...}" what would happen? How many times
would that loop be executed?
It would be iterated once for the single key 'a' in our example. BUT ALSO
once for every enumerable property of Object.prototype. So if
methods were enumerable (by default), then any loop over any object would loop
over all its inherited methods as well.
Inspired by the other answers, here's a recursive way of finding all methods:
// Find all methods of an object, up to the root prototype
function findAllMethods(obj, methods = []) {
if (!obj) {
return [...new Set(methods)];
}
const props = Object.getOwnPropertyNames(obj);
return findAllMethods(Object.getPrototypeOf(obj), [
...methods,
...props.filter(prop => typeof obj[prop] === 'function'),
]);
}
If you want all methods including inherited ones:
function getMethods(obj) {
const methods = [];
do {
for (const prop of Object.getOwnPropertyNames(obj)) {
if (obj[prop] instanceof Function) methods.push(prop);
}
obj = Object.getPrototypeOf(obj);
} while (obj !== null)
return methods;
}
console.log(getMethods(Math));

How to access the properties of a JavaScript object?

while review a javascript coding, i saw that
var detailInf = {
"hTitle":"Results",
"hMark":"98"
};
What's the concept behind this js coding. While give alert for the variable its shows as "[object Object]". So this is an object, then how can we access the variable and reveal the data from this object.
Try doing this:
alert(detailInf['hTitle']);
alert(detailInf.hTitle);
Both will alert "Results" - this is a Javascript object that can be used as a dictionary of sorts.
Required reading: Objects as associative arrays
As a footnote, you should really get Firebug when messing around with Javascript. You could then just console.log(detailInf); and you would get a nicely mapped out display of the object in the console.
That form of a JavaScript object is called an object literal, just like there are array literals. For example, the following two array declarations are identical:
var a = [1, 2, 3]; // array literal
var b = new Array(1, 2, 3); // using the Array constructor
Just as above, an object may be declared in multiple ways. One of them is object literal in which you declare the properties along with the object:
var o = {property: "value"}; // object literal
Is equivalent to:
var o = new Object; // using the Object constructor
o.property = "value";
Objects may also be created from constructor functions. Like so:
var Foo = function() {
this.property = "value";
};
var o = new Foo;
Adding methods
As I said in a comment a few moments ago, this form of declaring a JavaScript object is not a JSON format. JSON is a data format and does not allow functions as values. That means the following is a valid JavaScript object literal, but not a valid JSON format:
var user = {
age : 16,
// this is a method
isAdult : function() {
// the object is referenced by the special variable: this
return this.age >= 18;
}
};
Also, the name of the properties need not be enclosed inside quotes. This is however required in JSON. In JavaScript we enclose them in brackets where the property name is a reserved word, like class, while and others. So the following are also equivalent:
var o = {
property : "value",
};
var o = {
"property" : "value",
};
Further more, the keys may also be numbers:
var a = {
0 : "foo",
1 : "bar",
2 : "abz"
};
alert(a[1]); // bar
Array-like objects
Now, if the above object would have also a length property, it will be an array like object:
var arrayLike = {
0 : "foo",
1 : "bar",
2 : "baz",
length : 3
};
Array-like means it can be easily iterated with normal iteration constructs (for, while). However, you cannot apply array methods on it. Like array.slice(). But this is another topic.
Square Bracket Notation
As Paolo Bergantino already said, you may access an object's properties using both the dot notation, as well as the square bracket notation. For example:
var o = {
property : "value"
};
o.property;
o["property"];
When would you want to use one over the other? People use square bracket notation when the property names is dynamically determined, like so:
var getProperty = function(object, property) {
return object[property];
};
Or when the property name is a JavaScript reserved word, for example while.
object["while"];
object.while; // error
That's an object in JSON format. That's a javascript object literal. Basically, the bits to the left of the :'s are the property names, and the bits to the right are the property values. So, what you have there is a variable called detailInf, that has two properties, hTitle and hMark. hTitle's value is Results, hMark's value is 98.
var detailInf = { "hTitle":"Results", "hMark":"98"};
alert(detailInf.hTitle); //should alert "Results"
alert(detailInf.hMark); //should alert "98
Edit Paolo's answer is better :-)
As Dan F says, that is an object in JSON format. To loop through all the properties of an object you can do:
for (var i in foo) {
alert('foo[' + i + ']: ' + foo[i]);
}

Categories

Resources