These are chat archives for FreeCodeCamp/HelpJavaScript

23rd
Mar 2018
Quantomistro3178
@Quantomistro3178
Mar 23 2018 11:44
whats the difference b/w .map and .forEach?
Markus Kiili
@Masd925
Mar 23 2018 11:45
@Quantomistro3178 Map makes and returns a new array by transforming each array element into something new (map method obtains the new elements by passing old ones into the callback function you provide and forming the new array from the return values). ForEach just runs a function once for each array element. It returns nothing (always returns undefined).
Quantomistro3178
@Quantomistro3178
Mar 23 2018 11:59
@Masd925 Ohhh, thanks
CamperBot
@camperbot
Mar 23 2018 11:59
quantomistro3178 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4741 | @masd925 |http://www.freecodecamp.org/masd925
Nate Mallison
@NJM8
Mar 23 2018 14:05
@JLuboff you online yet?
I finished the intermediate algorithms. :smile:
Stephen James
@sjames1958gm
Mar 23 2018 14:10
@NJM8 :+1:
Nate Mallison
@NJM8
Mar 23 2018 14:23
@sjames1958gm In just over a day. :smile:
Now I'll probably struggle with advanced for two weeks. ha
Stephen James
@sjames1958gm
Mar 23 2018 14:28
@NJM8 There are a couple of tough ones there
Nate Mallison
@NJM8
Mar 23 2018 14:38
Is there a way to tell what part of a regex mismatches? like a log of what the regex sees until it fails
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:39
Hi Guys, I booted up this quick app just to merely test some Oauth2 authorization grants flows, obviously it needs work but I am currently stuck. Assuming everything I did in that file is fine, it requires that line's function to be run server side...anyone knows how to accomplish that? the project runs on vuejs/vuetify https://github.com/MelMacaluso/MelMacaluso-VueJs/blob/a8e82f79a6f92a664abd3e7996fe81cb06b61a8b/src/components/SpotifyMerger.vue#L123
Nate Mallison
@NJM8
Mar 23 2018 14:45
@MelMacaluso You are having trouble getting the access token is that correct?
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:47
Basically: Page -> Click to login through the spotify api auth redirect where you get the access code -> I store it fetching it through substring function in a cookie -> Supposedly I use that to get my token
but that's where thing fails as that function (the auth grant in that line) needs to be run server side, which I am not aware how to
tried some every extensive googling too...
Nate Mallison
@NJM8
Mar 23 2018 14:47
Well, the answer to your question is your question, put it in a nodeJS app. :smile:
but I don't think you have to do it that way
There also some client side JS solutions here. I tried the JMPerez solution and couldn't get it working, but maybe you can
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:50
Tried his solution too but didn't get it working either
Will have some further reading tonight
thanks thought :smile:
Nate Mallison
@NJM8
Mar 23 2018 14:51
I think that SO question should do it, make a POST request to the spotify api with your credentials and they will give you the access token
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:51
that's what the helper function does in here:
from that you get the access code to exchange as a token (as far as I understood the grant flow)
that's where I extract it and store it to exchange it later (not sure is the best way)
Nate Mallison
@NJM8
Mar 23 2018 14:54
I used a session variable to store it, I'm not 100% on which is best for security.
Are you getting errors when you run your code?
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:55
there's localstorage too
@NJM8 yep basically is complaining that spotifyApi.authorizationCodeGrant(code) is not a function
that's because the wrapper doesn't allow that function to run clientside
they force it to be server sided which I have no clue how to accomplish :joy:
Nate Mallison
@NJM8
Mar 23 2018 14:56
ohhh
yeah, that's going to require some rewriting
Mel Macaluso
@MelMacaluso
Mar 23 2018 14:58
exactly...was wondering if there was an out of box vue version to do that
since I am using that
all the tuff I found was about expressJs
Nate Mallison
@NJM8
Mar 23 2018 15:01
well
so the short version is to build a nodeJS app with a server that will serve your website, right. then you have routes that interact between the server and the client. I'm sure you know that much
It shouldn't be too hard to intergrate a node/express server into your app
those should get you going. but there isn't really a quick plug and play until you understand how it all works
rithm school actually has you use the spotify api to make a small app. I found it a PITA
There is mine if you want to dig into it
Mel Macaluso
@MelMacaluso
Mar 23 2018 15:11
Man thanks a lot!
That will surely give me some night reading / coding material
ahaha
Nate Mallison
@NJM8
Mar 23 2018 15:12
oh yeah. that all took me awhile to get through.
but feels good to get it done
Edwin Moses
@3dw1nM0535
Mar 23 2018 15:16
Hey folks, i'm trying to figure out a solution around the nighlife coordination app. I have a redux store containing all the bars in my local area but how can i add event listeners on the items after mapping through the bars array to add myself to a bar?
Jason Luboff
@JLuboff
Mar 23 2018 15:19
@NJM8 I am now, usually get on around 8ish PST weekdays
Markus Kiili
@Masd925
Mar 23 2018 15:22
@JLuboff Yo.
Jason Luboff
@JLuboff
Mar 23 2018 15:22
Yo
Nate Mallison
@NJM8
Mar 23 2018 15:43
@JLuboff Just boasting that I finished the intermediate algorithms last night. I started them Wednesday afternoon.
Just don't ask me how efficient they are. :smile:
Markus Kiili
@Masd925
Mar 23 2018 15:49
@NJM8 It is a good thing that you can do those challenges many times.
@NJM8 At some point when you think that your solution is the :diamond_shape_with_a_dot_inside: , post it on https://gitter.im/FreeCodeCamp/CodeReview .
Nate Mallison
@NJM8
Mar 23 2018 15:56
@Masd925 I did go on a bit of a roller coaster with the steamroller challenge (flatten arrays), struggled with some interesting ideas, thought I got a really clever solution after complete rebuild, compared online and realized how naive mine was, then was proud when I saw someone with a very efficient solution had done what I first thought of doing but couldn't get working. down and up and down and up we go
Markus Kiili
@Masd925
Mar 23 2018 16:16
@NJM8 By efficient, do you mean compact and elegant or real efficiency (less operations per input data).
Jason Luboff
@JLuboff
Mar 23 2018 16:34
@NJM8 Good job, it took me quite a while to do them... I think I can barrel through fairly quick now though lol
Markus Kiili
@Masd925
Mar 23 2018 16:36
@JLuboff Caesar's cipher was very hard for me. To find an elegant solution that is easy to understand and no magic numbers to explain.
Jason Luboff
@JLuboff
Mar 23 2018 16:37
@Masd925 I think I'd still struggle with steamroller..I'm awful with recursion
Markus Kiili
@Masd925
Mar 23 2018 16:38
@JLuboff Just do it without recursion.
Jason Luboff
@JLuboff
Mar 23 2018 16:38
....my original solution did...but... it was basically a hard coded answer
Markus Kiili
@Masd925
Mar 23 2018 16:39
@JLuboff It is tougher, but certainly possible to do without recursion. Quite elegantly too.
Jason Luboff
@JLuboff
Mar 23 2018 16:39

This is my original solution (I don't know that I have ever gone back to do a new version)

function steamrollArray(arr) {
  var newArr = [];

for (i = 0; i < arr.length; i++){
    if (Array.isArray(arr[i])) {
        for (j = 0; j < arr[i].length; j++){
            if(Array.isArray(arr[i][j])){
                for (k = 0; k < arr[i][j].length; k++){
                    if(Array.isArray(arr[i][j][k])){
                        for(l = 0; l < arr[i][j][k]; l++){
                            if (Array.isArray(arr[i][j][k][l])){
                                console.log(arr[i][j][k][l]);
                            } else {
                                newArr.push(arr[i][j][k][l]);
                            }
                        }
                    } else {
                        newArr.push(arr[i][j][k]);
                    }
                }

            } else {
                newArr.push(arr[i][j]);
            }
        }
    } else {
        newArr.push(arr[i]);
    }   
}
newArr = newArr.filter(Boolean);
  return newArr;
}

steamrollArray([1, [2], [3, [[4]]]]);

Given this was... at least a year and a half ago if not longer

Markus Kiili
@Masd925
Mar 23 2018 16:40
@JLuboff That is where we all start from.
Jason Luboff
@JLuboff
Mar 23 2018 16:42
True
Markus Kiili
@Masd925
Mar 23 2018 16:43
@JLuboff With bigger screens in the future, you can handle 30-40 levels of nesting before the pyramid grows out of the screen.
Jason Luboff
@JLuboff
Mar 23 2018 16:45
I wonder how long that many loops would take to run :joy:
Markus Kiili
@Masd925
Mar 23 2018 16:45
@JLuboff What is the filter taking out?
Jason Luboff
@JLuboff
Mar 23 2018 16:46
@Masd925 According to my comment... I was getting some undefined elements so I filtered falsy values lol
Markus Kiili
@Masd925
Mar 23 2018 16:46
Best to filter out all NaN's and undefined's. Zero's too because they never mean anything.
Jason Luboff
@JLuboff
Mar 23 2018 16:47
That filter would handle that
Nate Mallison
@NJM8
Mar 23 2018 18:03
@Masd925 I mean computationally effecient
@Masd925 @JLuboff here is mine:
function steamrollArray(arr) {
  return arr.every(element => !Array.isArray(element)) ? arr :
    steamrollArray(arr.reduce((result, element) => {
      Array.isArray(element) ? element.forEach(element => result.push(element)) : result.push(element);
      return result;
    }, []));
}
should be good for any level of nesting, just not great for huge arrays I think
https://stackoverflow.com/a/39000004/3853934 Here is a computationally efficient one
although I didn't read the comments, lol
Can anyone give some insight to the symmetric difference problem? I have an..... opinion on the testing
Gulsvi
@gulsvi
Mar 23 2018 18:08
I think this is the standard "fancy" response to that answer:
function steamrollArray(arr) {
  const flattened = [].concat(...arr);
  return flattened.find(Array.isArray) ? steamrollArray(flattened) : flattened;
}
@gulsvi that is basically what mine does, just a little ah, fancier. :smile:
In the tests for sym difference: sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]) should contain only 3 elements
Well my result is [ 1, 1, 4, 5, 5 ]
which is technically correct, the definition of symmetrical difference as far as I can tell has nothing to do with how many of each elements there are in a set
so the challenge is really asking for the unique symmetrical difference, but they don't say so.
Not a huge deal but if I understand things correctly the challenge could be better defined
Nate Mallison
@NJM8
Mar 23 2018 18:14
There have been a few challenges like that. I don't like it because it doesn't point programmers towards good TDD with a clear goal. It's more like, hey make something, hey by the way pass all these other random tests we feel like putting in there
oh
why are there 5's in there? hmmmm
Gulsvi
@gulsvi
Mar 23 2018 18:16
Symmetric difference is the difference of the first two arrays and then take that difference and compare it with the third array
Nate Mallison
@NJM8
Mar 23 2018 18:18
oh yeah. right. so between arr[0] and arr[1] we get [1,1,3], then between that and arr[2] we get [1,1,4,5,5]
I didn't watch the whole vid, can't stand the presentation. but I read the wikipedia page, it's just elements NOT in BOTH sets
not unique elements
which is what the test asks for
Jason Luboff
@JLuboff
Mar 23 2018 18:25
Apparently I don't remember how the fuck to use .concat or I'm pulling a serious retard move right now
Retard move apprently
Nate Mallison
@NJM8
Mar 23 2018 19:07
Can anyone tell me why I'm getting very small math errors when doing the the exact change challenge?
I'm taking the available change and subtracting it from changeNeeded, then adding it to changeReturned to create the array of returned denominations
      let thisChange = 0;
      while (thisStep < changeNeeded) {
        thisChange += thisStep;
        changeNeeded -= thisStep;
      }
Nate Mallison
@NJM8
Mar 23 2018 19:13
nvm
der der der
Nate Mallison
@NJM8
Mar 23 2018 19:26
Actually yes, why is this happening:
0.01
0.02
0.03
0.04
0.05
0.060000000000000005
0.07
0.08
0.09
0.09999999999999999
0.10999999999999999
0.11999999999999998
0.12999999999999998
0.13999999999999999
0.15
0.16
0.17
0.18000000000000002
0.19000000000000003
0.20000000000000004
0.21000000000000005
0.22000000000000006
0.23000000000000007
0.24000000000000007
0.25000000000000006
0.26000000000000006
0.2700000000000001
0.2800000000000001
0.2900000000000001
0.3000000000000001
0.3100000000000001
0.3200000000000001
0.3300000000000001
0.34000000000000014
0.35000000000000014
0.36000000000000015
0.37000000000000016
0.38000000000000017
0.3900000000000002
0.4000000000000002
0.4100000000000002
0.4200000000000002
0.4300000000000002
0.4400000000000002
0.45000000000000023
0.46000000000000024
0.47000000000000025
0.48000000000000026
0.49000000000000027
[ 'PENNY', 0.49000000000000027 ]
so there isn't enough room for another penny. I know JS can have some problems like this but I've never seen it happen with such small numbers of addition
Gulsvi
@gulsvi
Mar 23 2018 19:29
@NJM8 It's a floating point arithmetic problem inherent with JS. Try console.log(0.4 + 0.01); and you'll get 0.41000000000000003
Nate Mallison
@NJM8
Mar 23 2018 19:30
I was thinking that with all these algorithm challenges there have been other cases where I've done tons of math and not run into it but those were all regular ints
what is the best way to go around? call toFixed each time? shift everything two places at the start?
Gulsvi
@gulsvi
Mar 23 2018 19:35
@NJM8 In this challenge, I think you can use math.floor and round numbers down. In a calculator project, converting to a string with a fixed length (max digits allowed by the calculator) and then back to a number would work:
console.log(Number((0.4 + 0.01).toFixed(10)))
Math.js is a library a lot of people use too
Number(parseFloat(0.4 + 0.01).toPrecision(12))
Nate Mallison
@NJM8
Mar 23 2018 19:46
oh JS. you are so weird sometimes
who, while making this stuff thought to themselves. yeah, a Number object, lets give it a method that allows programmers to trim a number to a certain number of decimal places. but for fun let's have it return a string, yeah, that'll keep them up late a night
a string return from a number method on a number object? perfect sense
Markus Kiili
@Masd925
Mar 23 2018 19:49
@NJM8 The robust way is to use penny amounts that are safe integers, free from rounding errors.
Aditya
@ezioda004
Mar 23 2018 19:50
^ That's the best practice.
Markus Kiili
@Masd925
Mar 23 2018 19:50
Some rounding scheme or margin of error can work too, but much harder to show that it works on all cases.
All languages have floats with similar precision problems, but JS is special in that it only has one Number type that are 64-bit floats. For storing money amounts, floats are not really used.
Nate Mallison
@NJM8
Mar 23 2018 20:09
@Masd925 I figured that would be best but but ended up putting Number(num.toFixed(2)) all over the place
ugh. I better fix it
Nate Mallison
@NJM8
Mar 23 2018 20:32
how do I remove the decimal in a number but keep all the numbers?
I am trying to use a regex but you need a string for that and converting a number to a string removes leading zeros
Markus Kiili
@Masd925
Mar 23 2018 20:34
@NJM8 Hard to say what you mean actually. Post an example code.
Nate Mallison
@NJM8
Mar 23 2018 20:34
console.log(Number((123.00).toString().replace(/\./g, '')));
returns 123
not 12300
Markus Kiili
@Masd925
Mar 23 2018 20:35
@NJM8 123.00 and 123 are the same number, so not possible.
Nate Mallison
@NJM8
Mar 23 2018 20:36
well the problem is 123.00.toString() = '123'
Markus Kiili
@Masd925
Mar 23 2018 20:37
@NJM8 123.00 produces the same float as 123 so the zeros are meaningless in a number literal.
Nate Mallison
@NJM8
Mar 23 2018 20:38
there should be a remove decimal function
I see what you are saying, it doesn't know the difference
Jason Luboff
@JLuboff
Mar 23 2018 20:39
I haven't been paying attention..but why do you need 123.00 to be 12300?
Markus Kiili
@Masd925
Mar 23 2018 20:39
Yeah. A float doesn't remember the literal that created it.
Nate Mallison
@NJM8
Mar 23 2018 20:39
convert currency to ints to I don't have to deal with float precision issues
Jason Luboff
@JLuboff
Mar 23 2018 20:40
You could always use padEnd
Markus Kiili
@Masd925
Mar 23 2018 20:40
@NJM8 Multiply by 100 and round.
But ya, what @Masd925 says is probably better
Nate Mallison
@NJM8
Mar 23 2018 20:43
hmm, I think it will be more complex. What about 0.50 cents.
Jason Luboff
@JLuboff
Mar 23 2018 20:44
Using padEnd would be more complex than what @Masd925 said (if thats what you're saying is more complex)
You would have to extract the numbers after the decimal, and feed those to padEnd.
Nate Mallison
@NJM8
Mar 23 2018 20:46
ahh, you said multiply by 100 and round.
got it
Thanks @Masd925
CamperBot
@camperbot
Mar 23 2018 20:47
njm8 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4744 | @masd925 |http://www.freecodecamp.org/masd925
Gulsvi
@gulsvi
Mar 23 2018 20:50
How would you do 40 cents + 1 cent with that method of multiplying by 100 and rounding?
I guess it would be:
Math.round(((0.4 * 100)) + Math.round((0.01 * 100)))/100
or:
Number((0.4 + 0.01).toFixed(2))
Markus Kiili
@Masd925
Mar 23 2018 21:00
@gulsvi If you first transform the amounts into pennies, you just add 40+1.
Gulsvi
@gulsvi
Mar 23 2018 21:02
@Masd925 I was trying to figure out how that would look. Mulitply by 100, add, then divide by 100 for correct format
Nate Mallison
@NJM8
Mar 23 2018 21:05
@gulsvi
function removeDecimal(num){
  return Math.round(num * 100);
}

function addDecimal(num){
  return Number((num / 100).toFixed(2));
}
Gulsvi
@gulsvi
Mar 23 2018 21:06
@NJM8 Interesting. I think @Masd925 might have been recommending to do something like this:
   {
      PENNY: 1,
      NICKEL: 5,
      DIME: 10,
      QUARTER: 25,
      ONE: 100,
      FIVE: 500,
      TEN: 1000,
      TWENTY: 2000,
      "ONE HUNDRED": 10000
    };
rather than using the example they give in the challenge with decimal values
Nate Mallison
@NJM8
Mar 23 2018 21:07
oh yes I definitely did that
it was just a question of should I call toFixed on all my math to adjust for errors, or convert all args to ints before math, than back to floats afterwards
Gulsvi
@gulsvi
Mar 23 2018 21:09
I'm glad I finished that awful challenge lol, never want to look back at it again
First time I figured it out, it must have been 200 lines of code
Nate Mallison
@NJM8
Mar 23 2018 21:10
phew. got it
Thanks for the help guys, I'm gonna go drink some beer and play with the kiddo's
Jason Luboff
@JLuboff
Mar 23 2018 21:18
Drink some beer? Play with the kiddos? Here I am still at work!