16th
Feb 2015
Evan Davis
@davisec52
Feb 16 2015 17:47

Good morning. I have a question about the difference in results given by the code below. The code below is supposed to take an array, and then convert it to an object in which the value is the number of times an element occurs.

In order to get just the value without the key, the code converts objOfArr into array temp. When the array elements are numbers, the returned result is the just value (the number of times a number occurs). When the array elements are alphabetic strings, the result returned is an array with both key and value.

I don't understand why in one case just the value is returned and with strings both key and value are returned.


function func(arr) {
var objOfArr = {};
var temp = [];
for(var i = 0; i < arr.length; i++) {
objOfArr[arr[i]] = ((objOfArr[arr[i]] || 0) + 1);
console.log((objOfArr[arr[i]] || 0 ) + 1);
}
for(var j in objOfArr) {
temp[j] = objOfArr[j]

}
//return counter;
return temp.sort();
}
func(["a", "a", "a", "a", "b", "b", "f", "f", "f", "f", "f"]);
//=> [ a: 4, b: 2, f: 5 ]

func([1, 1, 1, 1, 3, 3, 3, 3, 3, 3, 7, 7, 7]);
//=> [ 3, 4, 6 ]

func(["1", "1", "1", "1", "3", "3", "3", "3", "3", "3", "7", "7", "7"]);
//=> [ 3, 4, 6 ]
Cristián Berríos
@crisberrios
Feb 16 2015 17:50
objOfArr[arr[i]] = ((objOfArr[arr[i]] || 0) + 1);
Evan Davis
@davisec52
Feb 16 2015 17:50
@crisberrios 'morning
Cristián Berríos
@crisberrios
Feb 16 2015 17:51
morning
Evan Davis
@davisec52
Feb 16 2015 17:52
Cristián Berríos
@crisberrios
Feb 16 2015 17:53
sorry, that part was ok
:P
Evan Davis
@davisec52
Feb 16 2015 17:53
no problem
Any idea what is causing the difference in returned results?
Cristián Berríos
@crisberrios
Feb 16 2015 17:57
for(var j in objOfArr) { temp[j] = objOfArr[j]
you are reading properties of objOfArr and sending it to an array
Evan Davis
@davisec52
Feb 16 2015 17:58
Right. That seems to work when the array elements are numbers.
Cristián Berríos
@crisberrios
Feb 16 2015 17:58
if j is a numeral it will go to temp[number]
but if j is a string
it will go to the "j" property of temp
since Arrays are objects
they can also have properties
Evan Davis
@davisec52
Feb 16 2015 17:59
Thank you. What I was trying to do was strip away the key and leave only the value.
Cristián Berríos
@crisberrios
Feb 16 2015 17:59
Also, since you are using for-in... you are also adding Object prototype properties to temp
Evan Davis
@davisec52
Feb 16 2015 18:00
Ah . . .
Nathan
@terakilobyte
Feb 16 2015 18:00
For in sucks in general
Evan Davis
@davisec52
Feb 16 2015 18:00
It should be simpler to just loop over the object and pull the values, but don't see how to do that directly.
Cristián Berríos
@crisberrios
Feb 16 2015 18:01
so you should at least do a check with hasOwnProperty before pushing to the array
Evan Davis
@davisec52
Feb 16 2015 18:01
@terakilobyte Well . . .
Nathan
@terakilobyte
Feb 16 2015 18:01
I prefer iterating over the object keys
Evan Davis
@davisec52
Feb 16 2015 18:01
That would make more sense, but I can't seem to pull the values without also pulling the keys.
Cristián Berríos
@crisberrios
Feb 16 2015 18:02
because you are doing it backwards
you have key: value
Nathan
@terakilobyte
Feb 16 2015 18:02
Which you can filter with hasown and map to something useful
Cristián Berríos
@crisberrios
Feb 16 2015 18:02
and you are trying to push the value to temp[key]
Evan Davis
@davisec52
Feb 16 2015 18:03
right
as a solution to get the value.
granted, an unusual solution
Cristián Berríos
@crisberrios
Feb 16 2015 18:04
when doing for-in (optimal or not) you are getting all the keys
then with the keys you can get all the values
it's a matter of how to handle the available data
Evan Davis
@davisec52
Feb 16 2015 18:05
ok
how do I fix it?
Cristián Berríos
@crisberrios
Feb 16 2015 18:08
well, you already have the general idea
pack the data into an array and sort it
some hints: you can use custom functions when sorting
and also, you can pack the data either as objects {valA: a, valB:B} or multidimensional arrays [a,1],[b,2]
Evan Davis
@davisec52
Feb 16 2015 18:10
Are you saying I should not put the data into an object?
Ok, you just answered that qustion.
Cristián Berríos
@crisberrios
Feb 16 2015 18:11
yes you can, but in this case you can't take shortcuts in representing the quantity as the array position
so if you have 'a': 2
you can't use arr[2] as a shortuc
shortcut
because after sorting it won't be arr[2] anymore
Evan Davis
@davisec52
Feb 16 2015 18:14
I thought that have data in an object should simplify looping over the values, but I just don't get it.
Cristián Berríos
@crisberrios
Feb 16 2015 18:21
it does simplify looping over the values
but sorting object keys does require an extra step
and that means getting the data into an array, since sorting object keys themselves should be avoided like the plague :P
since there's no guarantees on the key order
Evan Davis
@davisec52
Feb 16 2015 18:27
all right, then pack each key:value pair into its own array; what you were saying above.
Cristián Berríos
@crisberrios
Feb 16 2015 18:28
or into an object { 'a' : 0 }
object should simplify the step of displaying the final array
Evan Davis
@davisec52
Feb 16 2015 18:28
But the object in the code sample is in that format: {"a": 3}
I did put it back into an array but I can ditch the array
It seems as if I should be able count the values or something
objOfArr[0][1]
Cristián Berríos
@crisberrios
Feb 16 2015 18:31
what challenge is that?
let me see the instructions
Evan Davis
@davisec52
Feb 16 2015 18:33
This is vaguely related to the meanmode challenge, I think. I'm not working on a challenge, I'm trying to clear up confusions having to do with for-loops and objects.
Cristián Berríos
@crisberrios
Feb 16 2015 18:34
oh, I see
Evan Davis
@davisec52
Feb 16 2015 18:34
This particular issue started with Eloquent Javascript. I realized I wasn't really understanding what was going on with for-loops and objects.
Cristián Berríos
@crisberrios
Feb 16 2015 18:35
well, iterating over object properties is tricky since you have the object's own properties
and it's prototype properties
most likely, Object constructor properties
Evan Davis
@davisec52
Feb 16 2015 18:35
ok
Cristián Berríos
@crisberrios
Feb 16 2015 18:36
that's why you must also ask if they are it's own properties (hasOwnProperty or getOwnProperties)
if you want to iterate only over some properties (which isn't recommended since you are complicating the solution), you can also define properties as enumerable or not enumerable
Evan Davis
@davisec52
Feb 16 2015 18:38
all right
Cristián Berríos
@crisberrios
Feb 16 2015 18:38
Evan Davis
@davisec52
Feb 16 2015 18:39
You know, i had a solution using for-of, but someone told me it was non-standard and shouldn't be used.
Cristián Berríos
@crisberrios
Feb 16 2015 18:40
it's ES6 standard, so not compatible yet without using extra flags/shim/etc...
Evan Davis
@davisec52
Feb 16 2015 18:40
function order(arr) {
var counter = [];
for(var i of arr) {
if(!counter[i]) {
counter[i] = 0;
}
counter[i]++;
}
return  Object.keys(counter).sort(function(a, b){return counter[a] < counter[b]});
}
mNm([4, 4, 4, 6, 2]);
I came up a solution using for each that lists the keys (not the values) by frequency.
These value only solutions seem quite elusive
Cristián Berríos
@crisberrios
Feb 16 2015 18:43
well, the "of" part of that function has nothing to do with objects (mostly)
but you are sorting object keys in a better way since Object.keys returns an array
Evan Davis
@davisec52
Feb 16 2015 18:45
In this case I've bypassed the {} form
Cristián Berríos
@crisberrios
Feb 16 2015 18:45
and also returns only enumerable and own properties
Evan Davis
@davisec52
Feb 16 2015 18:46
But this does not give the same result if I use for-each
Cristián Berríos
@crisberrios
Feb 16 2015 18:46
because you are sorting the keys but not returning the whole data
Evan Davis
@davisec52
Feb 16 2015 18:46
Which gets back to how to sort the values
Cristián Berríos
@crisberrios
Feb 16 2015 18:47
let's say that piece of code is ok
you counted the frequency
sorted the keys
and have to return the pair values
if you add a .map after .sort
you could write a small function that converts the input "key" to {"key: value"} since you know where the keys are coming from (the object).
and at the end you get an array with both keys and values
Evan Davis
@davisec52
Feb 16 2015 18:50
ok
Danny Fritz
@dannyfritz
Feb 16 2015 18:53
btw, there is a caveat with this object counting method
try mNm(['prototype', 'constructor'])
Evan Davis
@davisec52
Feb 16 2015 18:55
@dannyfritz hi--you are somewhat ahead of me . . .
Danny Fritz
@dannyfritz
Feb 16 2015 18:58
Don't watch this from the beginning @davisec52 , go to 32:03
Evan Davis
@davisec52
Feb 16 2015 18:58
Thank you. I'll have a look.
Oliver
Feb 16 2015 19:18
I just got to challenge 34 where you are supposed to download Screen Hero and pair program. However Screen Hero isn't accepting new users. Is there an alternative program I can use for this?
Evan Davis
@davisec52
Feb 16 2015 19:30
If screen hero runs on your system, it may be possible to have someone invite you, in which case you will be sent a download link for screen hero. I can't do it for you as screen hero does not work with xp.
Oliver
Feb 16 2015 19:31
I figured it out - I was just being thick - thanks though
Cristián Berríos
@crisberrios
Feb 16 2015 19:32
Vince
@Vince33
Feb 16 2015 19:35
@crisberrios I was wondering if we get credit for code byte stuff still
Branden Byers
@brandenbyers
Feb 16 2015 19:35
@Vince33 Yeah, you can finish out your coderbyte challenges if you prefer
Vince
@Vince33
Feb 16 2015 19:36
Oh I will do both I just have half of the coder bytes done so for the purpose of eligibility and I figured I would complete those before the bonfires
Branden Byers
@brandenbyers
Feb 16 2015 19:37
The more practice the better!
Vince
@Vince33
Feb 16 2015 19:37
I agree of course
Danny Fritz
@dannyfritz
Feb 16 2015 19:37
i found that i can still signup for screen hero if sign up through the installed application
Branden Byers
@brandenbyers
Feb 16 2015 19:38
But for eligibility for nonprofits, now the official path is to complete all bonfires (more will be added soon). Anyone that has already started coderbytes can choose to finish those instead of the bonfires though.
Dave Holtzhouser
@dholtz
Feb 16 2015 19:40
Working on the exercises, Shaping up with Angular.js.
it seems to be leaving out the leading tags that require a lot of style info to 'pass' the exercise
is this expected behavior??
it's kind of hard to know what the styles are w/o being able to see the stylesheets
Vince
@Vince33
Feb 16 2015 19:42
@brndnb perfect so for the sake of clarity since I had begun the coder bytes I can finish them tho gain eligibility
Branden Byers
@brandenbyers
Feb 16 2015 19:43
@Vince33 correct. If you finish your coderbytes, you will be ready for nonprofit work.
Vince
@Vince33
Feb 16 2015 19:44
@brndnb Thanks ! just wanted to be sure .
Dave Holtzhouser
@dholtz
Feb 16 2015 21:16
Something seems wrong with the evaluation of the submissions today.
Evan Davis
@davisec52
Feb 16 2015 21:17
@crisberrios Here is the solution I've finally come up with. This pulls the values from the object objOfArr. Not perfect, but working . . .

function func(arr) {
var counter = [];
var objOfArr = {};
var temp = [];
for(var i = 0; i < arr.length; i++) {
objOfArr[arr[i]] = ((objOfArr[arr[i]] || 0) + 1);
console.log((objOfArr[arr[i]] || 0 ) + 1);
}
for(var j in objOfArr) {
temp[j] = objOfArr[j];
counter.push([temp[j]])
counter = [].concat.apply([], counter); //<== code snippet from stackoverflow.

}
//return counter;
return counter;
}
func(["a", "a", "a", "a", "b", "b", "f", "f", "f", "f", "f"]);
//=> [ 4, 2, 5 ]

//func(["1", "1", "1", "1", "3", "3", "3", "3", "3", "3", "7", "7", "7"]);
//=> [ 3, 4, 6 ]
Dave Holtzhouser
@dholtz
Feb 16 2015 21:18
I guess it's not really checking for 'logical' correctness, but specific text being entered as code? I see that I had reviewFrom instead of reviewForm in the form name attribute..
Cristián Berríos
@crisberrios
Feb 16 2015 21:21
@dholtz it's weird...
but if you are positive that the answer is OK don't become obsessed
bugs do exist
@davisec52 I think that using temp[j] is useless, as you are using it as an object, not an array, and then pushing the same data into an array
Dave Holtzhouser
@dholtz
Feb 16 2015 21:24
@crisberrios thx for the response. i totally understand that bugs exists, that's why i'm reporting it here. i thought this would be the right place for that?
Cristián Berríos
@crisberrios
Feb 16 2015 21:24
you could do just counter.push(objOfArr[j])
@dholtz sure. And you are doing exactly as the instructions (and answer) say, so nothing to do there. Most likely it's an extra space or comment somewhere, or an attribute set in the "incorrect" order
Evan Davis
@davisec52
Feb 16 2015 21:30
@crisberrios So I could. Thank you.
Danny Fritz
@dannyfritz
Feb 16 2015 21:32
@davisec52 try func(['constructor']); ;)
Evan Davis
@davisec52
Feb 16 2015 21:41
@dannyfritz This is probably dead obvious to anyone but me, but I don't know what to do with that.
Danny Fritz
@dannyfritz
Feb 16 2015 21:41
it is absolutely not dead obvious. :) this is very much a more advanced thing to run against.
Evan Davis
@davisec52
Feb 16 2015 21:42
could you give me an example what this construction looks like?
Danny Fritz
@dannyfritz
Feb 16 2015 21:42
creating an object like [] or {} comes with a lot of predefined things. the only way to not get predefined things such as constructor is to use Object.create(null);
Evan Davis
@davisec52
Feb 16 2015 21:43
What am I creating that applies to the code sample above?
Danny Fritz
@dannyfritz
Feb 16 2015 21:43
var temp = []; comes prefilled with constructor and length
Evan Davis
@davisec52
Feb 16 2015 21:44
Ok, but I don't know how to put this information to use.
Cristián Berríos
@crisberrios
Feb 16 2015 21:47
it's just a warning for now
it would cause errors
that's why Object.keys is preferred
Danny Fritz
@dannyfritz
Feb 16 2015 21:48
i have an implementation if you'd like to see it.
Evan Davis
@davisec52
Feb 16 2015 21:49
Danny Fritz
@dannyfritz
Feb 16 2015 21:49
i'm not sure Object.keys would help for the 'constructor' instance
Cristián Berríos
@crisberrios
Feb 16 2015 21:49
I think it would because (if I remember well) 'constructor' isn't enumerable
neighter length.
hmmm
but of course, also avoiding for...in
Danny Fritz
@dannyfritz
Feb 16 2015 21:50
it doesn't have to do with accidentally grabbing constructor
it has to do with var a = []; a['constructor']++;
since a['constructor'] will return truthy it gets passed the truthy test
past
Cristián Berríos
@crisberrios
Feb 16 2015 21:52
oh! you're right
I was just thinking of for... in
Danny Fritz
@dannyfritz
Feb 16 2015 21:52
that is where Object.create(null); comes into play.
Cristián Berríos
@crisberrios
Feb 16 2015 21:52
forgot the original code
Evan Davis
@davisec52
Feb 16 2015 21:55
@dannyfritz Thank you.
I appreciate the example, though, to be honest, it is way ahead of me at this point.
Danny Fritz
@dannyfritz
Feb 16 2015 21:56
yeah, i'm using closures, reduce and anonymous functions
and Object.create
and typeof i guess
a lot of JS stuff!
Evan Davis
@davisec52
Feb 16 2015 22:01
Part of the trouble I'm having is that I've done the codecademy JS course, but most of the coderbyte challenges are much harder than codecademy.
As a result, I'm hunting and pecking for information in a somewhat haphazard manner.
It is very confusing.
I really wish there were a systematic way to study this without having to get a degree in computer science, which is not an option right now.
Cristián Berríos
@crisberrios
Feb 16 2015 22:04
Danny Fritz
@dannyfritz
Feb 16 2015 22:04
he is reading eloquent it seems like
Evan Davis
@davisec52
Feb 16 2015 22:04
Most books are pitched way to high for a true beginner.
Cristián Berríos
@crisberrios
Feb 16 2015 22:04
hmm
Danny Fritz
@dannyfritz
Feb 16 2015 22:04
but JavaScript: The Good Parts is a decent way to quickly just learn about many aspects of JS.
Evan Davis
@davisec52
Feb 16 2015 22:04
Eloquent JS is mindfu*k for a true beginner
Cristián Berríos
@crisberrios
Feb 16 2015 22:04
hmmm
Evan Davis
@davisec52
Feb 16 2015 22:05
It is a good book
Danny Fritz
@dannyfritz
Feb 16 2015 22:05
yeah, eloquent is not an easy book
Evan Davis
@davisec52
Feb 16 2015 22:05
but honestly, he does not provide enough information to connect thte dots unless you already know js.
Cristián Berríos
@crisberrios
Feb 16 2015 22:05
@davisec52 you could also get "Professional JavaScript for Web Developers"
it's not an easy or fun read
bit I think it could be a good companion for Eloquent
since it's more technical and verbose
and less eloquent
Victor
@pahlsson
Feb 16 2015 22:06
^^
Evan Davis
@davisec52
Feb 16 2015 22:06
@crisberrios I'll look at it. It does not have to be easy, but it does need to have an understanding of the beginner's mind.
Victor
@pahlsson
Feb 16 2015 22:07
I'm also reading eloquent and finding it a bit hard to digest, so you're not alone @davisec52
Danny Fritz
@dannyfritz
Feb 16 2015 22:07
maybe a more fun way to learn programming would be to pick up gamemaker and make a couple games then return to JS
Evan Davis
@davisec52
Feb 16 2015 22:07
@pahlsson well, I was thinking perhaps it was just me.
Cristián Berríos
@crisberrios
Feb 16 2015 22:08
Also, CS50x
Danny Fritz
@dannyfritz
Feb 16 2015 22:09
some people might appreciate a more hands dirty approach to learning programming than a head in the books approach. which is why i propose gamemaker. :P
Evan Davis
@davisec52
Feb 16 2015 22:09
@crisberrios I'll look at that, as well.
Cristián Berríos
@crisberrios
Feb 16 2015 22:10
I propose CS50x since it's very hands-on
Victor
@pahlsson
Feb 16 2015 22:10
completely unrelated question to the topic at hand, but what is spinal case?
Evan Davis
@davisec52
Feb 16 2015 22:10
@dannyfritz I think hands on is good. I'm not all that concernced about "fun," though. This is fascinating stuff.
Danny Fritz
@dannyfritz
Feb 16 2015 22:11
i guess it is hyphenated words
Evan Davis
@davisec52
Feb 16 2015 22:11
@pahlsson what is the context?
Cristián Berríos
@crisberrios
Feb 16 2015 22:11
I also prefer hands-on instead of reading, but since in JS you can do the same in 1000 wrong ways and 1 good way, I'm sticking to reading to get a better grip on good practices :D
Danny Fritz
@dannyfritz
Feb 16 2015 22:11
this-is-spinal-case i guess?
Evan Davis
@davisec52
Feb 16 2015 22:12
@crisberrios Right. I would like to have reading combined with lots of drill on main points before tackling full blown problems.
Victor
@pahlsson
Feb 16 2015 22:12
@davisec52 it's from a bonfire, the challenge is to convert a string to spinal case
oki @dannyfritz, thanks!
Danny Fritz
@dannyfritz
Feb 16 2015 22:13
I've never heard of spinal case before that bonfire either
Evan Davis
@davisec52
Feb 16 2015 22:13
@pahlsson Ok, haven't really started the bonfires. have been working on the coderbytes.
Danny Fritz
@dannyfritz
Feb 16 2015 22:13
i guess css properties use spinal case
Evan Davis
@davisec52
Feb 16 2015 22:14
spinal tap
Branden Byers
@brandenbyers
Feb 16 2015 22:16
spinal-case a.k.a. kebab-case. With caps, it’s Train-Case.
Danny Fritz
@dannyfritz
Feb 16 2015 22:16
Branden Byers
@brandenbyers
Feb 16 2015 22:16
I hadn’t ever heard of it either until I wrote that challenge!
Danny Fritz
@dannyfritz
Feb 16 2015 22:16
Train Case is funny. XD
Branden Byers
@brandenbyers
Feb 16 2015 22:17
StUdLyCaPs case is the craziest!
Victor
@pahlsson
Feb 16 2015 22:17
haha
Danny Fritz
@dannyfritz
Feb 16 2015 22:18
XMLHttpRequest
all of XML is capitalized but only the H in Http is
i like to imagine that was some committees decision to compromise on whether to capitalize acronyms or not
Suzanne Atkinson