We Keep Coding

How to use Javascript array.find() with two conditions?

I need to check if any object in an array of objects has a type: a AND if another has a type: b
I initially did this:
const myObjects = objs.filter(attr => attr.type === 'a' || attr.type === 'b');
But the code review complained that filter will keep going through the entire array, when we just need to know if any single object meets either criteria.
I wanted to use array.find() but this only works for a single condition.
Is there anyway to do this without using a for loop?

you can pass two condition as given below
[7,5,11,6,3,19].find(attr => {
return (attr > 100 || attr %2===0);
});
6
[7,5,102,6,3,19].find(attr => {
return (attr > 100 || attr %2===0);
});
102

Updated answer:
It's not possible to shortcircuit js's builtin functions that does what you want, so you will have to use some kind of loop:
let a;
let b;
for (const elm of objs) {
if (!a && elm === 'a') {
a = elm;
}
if (!b && elm === 'b') {
b = elm;
}
const done = a && b;
if (done) break;
}
Also you should consider if you can record a and b when producing the array if that's possible.
Oiginal answer:
`find` works just like `filter` where it takes a predicate, returns the first element that the predicate returns `true`.
If I understood your question correctly, you can just replace the `filter` with `find` and it will return at the first occurance:
const myObject = objs.find(attr => attr.type === 'a' || attr.type === 'b');
Also notice your provided snippet is wrong for what you described: `filter` returns an array but you only wanted one element. so you should add `[0]` to the filter expression if you want to use it.

How to implement the equivalent for jQuery .map() in plain JS?

I'm working to convert my code into plain JS, it's really hard. I need a function to get the real scroll container and the one I have goes like this, using .map().
//get true container for scroll events
function getScrollContainer(c) {
return $(c).map(function() {
var cnt = this,
isWin = !cnt.nodeName || $.inArray( cnt.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if (!isWin) return cnt;
var doc = (cnt.contentWindow || cnt).document || cnt.ownerDocument || cnt;
return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
});
}
console.log(getScrollContainer(window));
is there a way to accomplish this?

Map is just a fancy way to say "apply this function to every element in the list" so it could be easily implemented in a for loop.
Something like this: (Not perfect or tested, but should give you an idea)
function getScrollContainer(c) {
c = Object.prototype.toString.call( c ) === '[object Array] ? c : [c];
for (var i = 0; i < c.length; i++) {
var cnt = c[i],
isWin = !cnt.nodeName || indexOf(cnt.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
if (!isWin) return cnt;
var doc = (cnt.contentWindow || cnt).document || cnt.ownerDocument || cnt;
return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
doc.body :
doc.documentElement;
}
}

Based on the code that you have posted you don't need to use the map method. Your function accepts just one parameter so you can just remove the var cnt = this, line and use the c parameter. Now your function instead of returning a jQuery-wrapped array with length of 1, returns a HTMLElement object.
If you want to pass an array to the function you can use Array.prototype.map method:
function getScrollContainer(c) {
return c.map(function(value, index, arr) {
// ...
});
}
console.log(getScrollConainer([window, 'foo']));
And for replacing the jQuery $.inArray utility function you can use the Array.prototype.indexOf method:
['iframe','#document','html','body'].indexOf(cnt.nodeName.toLowerCase()) != -1
Note that IE8 and below do no support the Array map and indexOf methods. If you want to support those browsers you can use a polyfill. MDN suggests this polyfill for Array.prototype.indexOf.

While the answers above will work in your case, they will not in every case. jQuery's map creates a new array and returns that array after applying the function to every item in the array.
the prototype map function does not create a new array and instead simply applies the function to each item.
this sometime will produce the same result and others will produce different results.
You will get the same result for this example:
$.map([1,2,3], function(i){ return i+1; });
=> [2,3,4]
[1,2,3].map(function(i){ return i+1; });
=> [2,3,4]
However the below example will provide a different result:
$.map([1,2,3], function(i){ if(i > 1){ return i; } });
=> [2,3]
[1,2,3].map(function(i){ if(i > 1){ return i; } });
=> [undefined,2,3]

In case anyone is interested, you can use if statements inside .map() if you create a new function for the Array prototype:
Array.prototype.custom_Map = function(x) {
arr = [];
for (var i = 0; i < this.length; i++)
var _this = (x(this[i], i, this));
if(_this !== null) {
arr.push(_this);
return arr;
};
You can use it the following way:
x.custom_Map(function(a){ if(a>0) {return true;}});

Sort Array B after Array A, such that references and equal Primitives, maintain the exact Position

Update 2
I added a weight lookup to the sort function, which increased the performance by about 100% as well as the stability, as the previous sort function didn't consider all types, and as 1 == "1" the result depends on the initial order of the Array, as #Esailija points out.
The intent of the question is to improve this Answer of mine, I liked the question and since it got accepted and I felt like there is some performance to squeeze out of the sort function. I asked this question here since I hadn't many clues left where to start.
Maybe this makes things clearer as well
Update
I rephrased the complete question, as many people stated I was not specific enough, I did my best to specify what I mean. Also, I rewrote the sort function to better express the intent of the question.
Let arrayPrev be an Array (A) ,where A consists of 0 to n Elements' (E)
Let an Element either be
of a Primitive type
boolean, string, number, undefined, null
a Reference to an Object O, where O.type = [object Object] and O can consist of
0 to n Properties P, where P is defined like Element plus
an circular Reference to any P in O
Where any O can be contained 1 to n times. In the sense of GetReferencedName(E1) === GetReferencedName(E2)...
a Reference to an O, where O.type = [object Array] and O is defined like A
a circular Reference to any E in A
Let arrayCurr be an Array of the same length as arrayPrev
Illustrated in the following example
var x = {
a:"A Property",
x:"24th Property",
obj: {
a: "A Property"
},
prim : 1,
}
x.obj.circ = x;
var y = {
a:"A Property",
x:"24th Property",
obj: {
a: "A Property"
},
prim : 1,
}
y.obj.circ = y;
var z = {};
var a = [x,x,x,null,undefined,1,y,"2",x,z]
var b = [z,x,x,y,undefined,1,null,"2",x,x]
console.log (sort(a),sort(b,a))
The Question is, how can I efficiently sort an Array B, such that any Reference to an Object or value of a Primitive, shares the exact same Position as in a Previously, by the same compareFunction, sorted, Array A.
Like the above example
Where the resulting array shall fall under the rules.
Let arrayPrev contain the Elements' of a and arrayCurr contain the Elements' of b
Let arrayPrev be sorted by a CompareFunction C.
Let arrayCurr be sorted by the same C.
Let the result of sorting arrayCur be such, that when accessing an E in arrayCur at Position n, let n e.g be 5
if type of E is Object GetReferencedName(arrayCurr[n]) === GetReferencedName(arrayPrev[n])
if type of E is Primitive GetValue(arrayCurr[n]) === GetValue(arrayPrev[n])
i.e b[n] === a[n] e.g b[5] === a[5]
Meaning all Elements should be grouped by type, and in this sorted by value.
Where any call to a Function F in C shall be at least implemented before ES5, such that compatibility is given without the need of any shim.
My current approach is to Mark the Objects in arrayPrev to sort them accordingly in arrayCurr and later delete the Marker again. But that seems rather not that efficient.
Heres the current sort function used.
function sort3 (curr,prev) {
var weight = {
"[object Undefined]":6,
"[object Object]":5,
"[object Null]":4,
"[object String]":3,
"[object Number]":2,
"[object Boolean]":1
}
if (prev) { //mark the objects
for (var i = prev.length,j,t;i>0;i--) {
t = typeof (j = prev[i]);
if (j != null && t === "object") {
j._pos = i;
} else if (t !== "object" && t != "undefined" ) break;
}
}
curr.sort (sorter);
if (prev) {
for (var k = prev.length,l,t;k>0;k--) {
t = typeof (l = prev[k]);
if (t === "object" && l != null) {
delete l._pos;
} else if (t !== "object" && t != "undefined" ) break;
}
}
return curr;
function sorter (a,b) {
var tStr = Object.prototype.toString
var types = [tStr.call(a),tStr.call(b)]
var ret = [0,0];
if (types[0] === types[1] && types[0] === "[object Object]") {
if (prev) return a._pos - b._pos
else {
return a === b ? 0 : 1;
}
} else if (types [0] !== types [1]){
return weight[types[0]] - weight[types[1]]
}
return a>b?1:a<b?-1:0;
}
}
Heres a Fiddle as well as a JSPerf (feel free to add your snippet)
And the old Fiddle

If you know the arrays contain the same elements (with the same number of repetitions, possibly in a different order), then you can just copy the old array into the new one, like so:
function strangeSort(curr, prev) {
curr.length = 0; // delete the contents of curr
curr.push.apply(curr, prev); // append the contents of prev to curr
}
If you don't know the arrays contain the same elements, it doesn't make sense to do what you're asking.
Judging by the thing you linked, it's likely that you're trying to determine whether the arrays contain the same elements. In that case, the question you're asking isn't the question you mean to ask, and a sort-based approach may not be what you want at all. Instead, I recommend a count-based algorithm.
Compare the lengths of the arrays. If they're different, the arrays do not contain the same elements; return false. If the lengths are equal, continue.
Iterate through the first array and associate each element with a count of how many times you've seen it. Now that ES6 Maps exist, a Map is probably the best way to track the counts. If you don't use a Map, it may be necessary or convenient to maintain counts for items of different data types differently. (If you maintain counts for objects by giving them a new property, delete the new properties before you return.)
Iterate through the second array. For each element,
If no count is recorded for the element, return false.
If the count for the element is positive, decrease it by 1.
If the count for the element is 0, the element appears more times in the second array than in the first. Return false.
Return true.
If step 4 is reached, every item appears at least as many times in the first array as it does in the second. Otherwise, it would have been detected in step 3.1 or 3.3. If any item appeared more times in the first array than in the second, the first array would be bigger, and the algorithm would have returned in step 1. Thus, the arrays must contain the same elements with the same number of repetitions.

from the description, it appears you can simply use a sort function:
function sortOb(a,b){a=JSON.stringify(a);b=JSON.stringify(b); return a===b?0:(a>b?1:-1);}
var x = {a:1};
var y = {a:2};
var a = [1,x,2,3,y,4,x]
var b = [1,y,3,4,x,x,2]
a.sort(sortOb);
b.sort(sortOb);
console.log (a,b);

Your function always returns a copy of sort.el, but you can have that easier:
var sort = (function () {
var tmp;
function sorter(a, b) {
var types = [typeof a, typeof b];
if (types[0] === "object" && types[1] === "object") {
return tmp.indexOf(a) - tmp.indexOf(b); // sort by position in original
}
if (types[0] == "object") {
return 1;
}
if (types[1] == "object") {
return -1;
}
return a > b ? 1 : a < b ? -1 : 0;
}
return function (el) {
if (tmp) {
for (var i = 0; i < el.length; i++) {
el[i] = tmp[i]; // edit el in-place, same order as tmp
}
return el;
}
tmp = [].slice.call(el); // copy original
return tmp = el.sort(sorter); // cache result
};
})();
Note that I replaced sort.el by tmp and a closure. Fiddle: http://jsfiddle.net/VLSKK/
Edit: This (as well as your original solution)
only works when the arrays contain the same elements.
maintains the order of different objects in a
but
does not mess up when called more than twice

Try this
function ComplexSort (a, b)
{
if(typeof a == "object") {
a = a.a;
}
if(typeof b == "object") {
b = b.a;
}
return a-b;
}
var x = {a:1};
var y = {a:2};
var a = [1,x,2,3,y,4,x]
var b = [1,y,3,4,x,x,2]
a.sort(ComplexSort);
b.sort(ComplexSort);
console.log ("Consistent", a,b);

Javascript function accepts both arrays and strings as parameter

I have this code:
var showRegion = function(key) {
if (key in regionOptions) {
var entry = regionOptions[key];
var builder = entry.builder;
var layoutObj = entry.layoutObj;
var viewStarter = entry.viewStarter;
var view = new builder();
logger.info('Controller.' + key + ' => CreateAccountLayoutController');
Controller.layout[layoutObj].show(view);
view[viewStarter]();
}
};
What I need is that the parameter should be able to accept an array or a string, and should work either way.
Sample function calls:
showRegion('phoneNumberRegion');
showRegion(['phoneNumberRegion', 'keyboardRegion', 'nextRegion']);

This post is old, but here is a pretty good tip:
function showRegions(keys) {
keys = [].concat(keys)
return keys
}
// short way
const showRegions = key => [].concat(keys)
showRegions(1) // [1]
showRegions([1, 2, 3]) // [1, 2, 3]

var showRegion = function(key) {
if (typeof key === 'string')
key = [key];
if (key in regionOptions) {
...
No need to make a code for each case, just convert key string into an array of one element and the code for arrays will do for both.

you could use typeof to check for the type of your argument and proceed accordingly, like
var showRegion = function(key) {
if( typeof key === 'object') {
//its an object
}
else {
//not object
}
}

You can use the fact that string.toString() always returns the same string and Array.toString() returns a comma-delimited string in combination with string.split(',') to accept three possible inputs: a string, an array, a comma-delimited string -- and reliably convert to an array (provided that you're not expecting commas to be part of the values themselves, and you don't mind numbers becoming strings).
In the simplest sense:
x.toString().split(',');
So that
'a' -> ['a']
['a','b'] -> ['a','b']
'a,b,c' -> ['a','b','c']
1 -> ['1']
Ideally, you may want to tolerate null, undefined, empty-string, empty-array (and still keep a convenient one-liner):
( (x || x === 0 ) && ( x.length || x === parseFloat(x) ) ? x.toString().split(',') : []);
So that also
null|undefined -> []
0 -> ['0']
[] -> []
'' -> []
You may want to interpret null/empty/undefined differently, but for consistency, this method converts those to an empty array, so that downstream code does not have to check beyond array-having-elements (or if iterating, no check necessary.)
This may not be terribly performant, if that's a constraint for you.
In your usage:
var showRegion = function(key) {
key = ( (key || key === 0 ) && ( key.length || key === parseFloat(key) ) ? key.toString().split(',') : []);
/* do work assuming key is an array of strings, or an empty array */
}

js object problem

I use an object to check that a group of radio buttons have a precise value like set on "rule" object. Here is an example:
arr = {a:"1", b:"1", c:"1", c:"2"}; //that's my object rule
var arr2={}; //here I create my second array with charged value
$("#form_cont input:checked").each(function()
{
arr2[$(this).attr("name")]=$(this).val();
});
//here I make the check
for (k in arr2)
{
if (typeof arr[k] !== 'undefined' && arr[k] === arr2[k])
{
$("#form_cont li[name$='"+k+"']").css('background-color', '');
}
else
{
$("#form_cont li[name$='"+k+"']").css('background-color', 'pink');
}
}
The problem is when I have to check the "c" key I get last the one (2) and not the right value how that may e 1 or 2
thanks in advance
ciao, h.

In order to have more than one value, arr's property c will need to be an array:
arr = {a:["1"], b:["1"], c:["1","2"]}; //that's my object rule
Of course, your validity check must also change to search the new array:
typeof arr[k] !== 'undefined' && contains(arr[k], arr2[k])
...
function contains(a, obj){
for(var i = 0; i < a.length; i++) {
if(a[i] === obj){
return true;
}
}
return false;
}

You cannot have two properties on an object that are named the same. Thus when the javascript compiler sees the line arr = {a:"1", b:"1", c:"1", c:"2"}; it automatically changes it to arr = {a:"1", b:"1", c:"2"}; letting the last definition of c overwrite the first one