These are chat archives for FreeCodeCamp/HelpJavaScript

21st
Jan 2018
FlashHero
@FlashHero
Jan 21 2018 01:15

I get how this works

var action=function(){
  return this.status;
}
var obj={
  status:'offline'
}
var display=action.bind(obj);
console.log(display());

but how can I do the same with syntax something like bind(this), I'm learning React and I've never used this syntax before. Help

Stephen James
@sjames1958gm
Jan 21 2018 01:40
@FlashHero In your class constructor this is referring to the current object. So if you have a function/onClick
this.onClick = this.onClick.bind(this);
which 'replaces' the existing function with a prebound function
So when you provide this.onClick as a callback it get's the correct object as this
FlashHero
@FlashHero
Jan 21 2018 01:50
@sjames1958gm correct me if i'm wrong when you have a button <button onClick={this.alert}></button> the this in button points to the button HTML object, so I would need to change the this to point to the component object. right ?
Stephen James
@sjames1958gm
Jan 21 2018 01:51
@FlashHero No, because when {this.alert} is being evaluated this is the component object.
FlashHero
@FlashHero
Jan 21 2018 01:51
I'm confused ???
so the first this.onClick points to the actual function inside a constructor and so why would I need to change that
Stephen James
@sjames1958gm
Jan 21 2018 01:52
@FlashHero When the React framework calls your function it doesn't set the this context which is why you use bind.
Another technique that I like to use.
<button onClick={() => this.alert()}></button>
in this case you don't have to use bind at all
FlashHero
@FlashHero
Jan 21 2018 01:55
Yeah I knew that, but can you tell me where the this losses its context of the function inside the constructor
Stephen James
@sjames1958gm
Jan 21 2018 01:55
@FlashHero There are two contexts you have to consider.
  1. evaluation context, what value is passed to the React frame work. In this case this is the component object.
    <button onClick={this.alert}></button>
  2. execution context, what is the value of this when the function executes. Unless you use bind or another technique, this will NOT be the component object
FlashHero
@FlashHero
Jan 21 2018 01:58
@sjames1958gm so the this inside the function is what's causing the problem ?
Stephen James
@sjames1958gm
Jan 21 2018 01:58

@FlashHero this.alert.bind(this) returns a new function reference, consider that you did this

constructor(props) {
  this.alertWithThisBinding = this.alert.bind(this)
}
// Then use
<button onClick={this.alertWithThisBinding}></button>

Rather than introduce a new name, people have taken to doing.
this.alert = this.alert.bind(this)
just realize that the code here replaces the function this.alert with a new function

@FlashHero Yes, the this inside the function When it runs is the problem
FlashHero
@FlashHero
Jan 21 2018 02:02
@sjames1958gm so, the this.alertWithThisBinding store the new function with this bound to it and I can use that in the button. One last question where do the this point to when it's inside the function
I'm guessing the function itself ?
Stephen James
@sjames1958gm
Jan 21 2018 02:03
@FlashHero Because you use .bind() it will be the value you pass to .bind(this) which is the component object
FlashHero
@FlashHero
Jan 21 2018 02:07
@sjames1958gm the value I pass to .bind() which is this or the value I pass before .bind(this)
Stephen James
@sjames1958gm
Jan 21 2018 02:09
@FlashHero The value you pass to .bind()
@FlashHero it is a tough concept to wrap your head around.
FlashHero
@FlashHero
Jan 21 2018 02:13
@sjames1958gm I think I got it this.alert.bind(this) is similar to saying this.alert.bind(ComponentObject) so the this inside the alert function points to the function in the component object so something like componentObject.alert();
Stephen James
@sjames1958gm
Jan 21 2018 02:14
@FlashHero Well similar to that. ComponentObject is a class and this will point to the specific instance of ComponentObject that you are constructing
FlashHero
@FlashHero
Jan 21 2018 02:16
@sjames1958gm yes, so I still haven't understood where does the alert function's this points to inside a constructor
I think that's my main doubt
Stephen James
@sjames1958gm
Jan 21 2018 02:17
@FlashHero this inside the constructor points to the component object being constructed,
FlashHero
@FlashHero
Jan 21 2018 02:18
So why do I have to bind it if it points to the component object
and <button onClick={this.alert}></button> also points to the component object
Stephen James
@sjames1958gm
Jan 21 2018 02:20
@FlashHero because you will be passing that function object to React and when it calls the function it will NOT call it with the correct context.
The bind function attaches the correct context to the function
FlashHero
@FlashHero
Jan 21 2018 02:23
@sjames1958gm well I'm still kind of confused, I'll do more research but thank you for your time
CamperBot
@camperbot
Jan 21 2018 02:23
flashhero sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8875 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 21 2018 02:24
@FlashHero you're welcome
jusgoose
@gusd773
Jan 21 2018 04:08

HELP

/
function getIndexToIns(arr, num) {
var sortedArr = arguments[0].sort();
var target = arguments[1];
for (var i =0; i , sortedArr.length; i++){
if (sortedArr[i]>target){
sortedArr.indexOf(target);
}
}
}
getIndexToIns([40, 60], 50);
/

"Where do I belong" challenge
Aditya
@ezioda004
Jan 21 2018 04:13
@gusd773 Infinite loop here for (var i =0; i , sortedArr.length; i++)
Should be i < sortedArr
jusgoose
@gusd773
Jan 21 2018 04:14
@ezioda004 yea I peeped that but still not getting anything lol
my bad should've been more specific
Brad
@bradtaniguchi
Jan 21 2018 04:20

function getIndexToIns(arr, num) {
    var sortedArr = arguments[0].sort();
    var target = arguments[1];
    for (var i = 0; i, sortedArr.length; i++) {
        if (sortedArr[i] > target) {
            sortedArr.indexOf(target);
        }
    }
}getIndexToIns([40, 60], 50);
Aditya
@ezioda004
Jan 21 2018 04:21
@gusd773 Well you arent returning anything and sortedArr.indexOf(target); will only return the index if the target is the array but what if it isnt? Example ([10, 20, 30, 40, 50], 35) target is 35 but it will return -1 from sortedArr.indexOf(target);.
Brad
@bradtaniguchi
Jan 21 2018 04:21
How come your using the arguments object when the arguments are passed explicitly?
jusgoose
@gusd773
Jan 21 2018 04:28
ahh true @ezioda004 you right
阿扎哲健甫
@Azha3
Jan 21 2018 05:37

// 初始化变量
var testString = "How many non-space characters are there in this sentence?";

// 请只修改这条注释以下的代码

var expression = /\S/g; // 请修改这一行

// 请只修改这条注释以上的代码

// 用 nonSpaceCount 存储 testString 中匹配到 expression 的次数
var nonSpaceCount = testString.match(expression).length;

What's the difference between \S and \S+ (it's Capital)?Thanks for answering😀
Aditya
@ezioda004
Jan 21 2018 06:33
@Azha3 + Matches the preceding expression 1 or more times. Example you have var string = "Hello world a b c" \S matches 13 times and \S+ matches 5 times.
阿扎哲健甫
@Azha3
Jan 21 2018 07:39
OK! I get it!Thanks very much! @ezioda004
alanwucm111
@alanwu123
Jan 21 2018 14:12
Anybody have the answer for Make a Person?
Stephen James
@sjames1958gm
Jan 21 2018 16:07
@alanwu123 What have you tried? Better to learn from your code than simply the answer
Idowu Wasiu
@Hoxtygen
Jan 21 2018 16:40
hello guys, I've got problemsss.... I'm gonna be presenting them one by one
this first one goes thus.. I'm trying to write a code that get all even fibonacci numbers within a range, so far I've writen a function to tell if a number is fibonacci, this works well. Also wrote a code to get all fibonacci number within a range using the first code but its not working. Here's what I've written so far https://repl.it/@Hoxtygen/Sum-Even-Fibonacci-Numbers
Stephen James
@sjames1958gm
Jan 21 2018 16:47
@Hoxtygen Your isFib function is not correct. It is not the sum of the values - 1 and -2 it starts with 1, 1 and then sums the last two numbers.
Not sure you can tell a number is fibonaaci without starting from 1, 1 and going forward until you match or exceed number
Idowu Wasiu
@Hoxtygen
Jan 21 2018 16:48
@sjames1958gm I'm working according to the requirement of the question... Look up there, the parameters of the question are there
@sjames1958gm It's a question on project euler
Stephen James
@sjames1958gm
Jan 21 2018 16:50
@Hoxtygen Except your algorithm for isFib isn't correct
Idowu Wasiu
@Hoxtygen
Jan 21 2018 16:50
@sjames1958gm I did a console.log and it works fine
@sjames1958gm wait! something is wrong.. Thanks for pointing that out......................................
CamperBot
@camperbot
Jan 21 2018 16:51
hoxtygen sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8876 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 21 2018 16:52
It is probably easier to just start from 1 1 and generate the fibonacci numbers, counting only those that are even
Idowu Wasiu
@Hoxtygen
Jan 21 2018 16:52
@sjames1958gm the code gets the nth fibonnaci of a sequence, didnt say if its a fib or not.............. damn
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:00
@sjames1958gm I need to ask for a favor man, you up?
Stephen James
@sjames1958gm
Jan 21 2018 17:01
yes
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:02
@sjames1958gm I remembered I did similar thing on fcc and i copied some code on stackoverflow to determine if a number is fibonacci. I added the code now and it all works fine. But I need to condense the code
Stephen James
@sjames1958gm
Jan 21 2018 17:03
ok
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:06

@sjames1958gm

A number is Fibonacci if and only if one or both of (5*n^2 + 4) or (5*n^24) is a perfect square.
The isSquare function can be rewritten as
function isSquare (x) {
    // body... 
    if (x > 0 && Math.sqrt(x) % 1 === 0) {
        return true;
    }    else  {
        return false;
    }
}
// The above code is  used to test if a given number is a perfect square

//Test if a number is a perfect square
function isSquare(n) {
    return n > 0 && Math.sqrt(n) % 1 === 0;
}
//isSquare(9);
//Test if a number is a fibonaacci number
function isFib(x) {
    // body...
    //A number is a fibonacci number if and only if one of the below is true
    if (isSquare(5 * (x * x) - 4) || isSquare(5 * (x * x) + 4)) {
        return true;
        //console.log(true);
    } else {
        return false;
        //console.log(false);
    }
}

//any way to make this easier?

@sjames1958gm looks like i wrote a code twice
Stephen James
@sjames1958gm
Jan 21 2018 17:08
@Hoxtygen You only need one of those isSquare functions
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:08
@sjames1958gm yeh
Stephen James
@sjames1958gm
Jan 21 2018 17:09
function isFib(x) {
   return isSquare(5 * (x * x) - 4) || isSquare(5 * (x * x) + 4)
}
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:09
@sjames1958gm sorry for the repetition. back then when i copied that code i didnt fully grasp ternary operator so i rewrote it in the manner i understand.................. Should've edited it out
@sjames1958gm all im asking is if there's a way around that to make it simple or if there's alternative
Stephen James
@sjames1958gm
Jan 21 2018 17:14
That is about as simple as you can get.
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:14
@sjames1958gm okay. so now second question

@sjames1958gm

// The prime factors of 13195 are 5, 7, 13 and 29.What is the largest prime factor of the number 600851475143 ?

function primeFactor (value) {
  // body... 
  var container = []
  for (var i = 0; i < value; i++) {
    if (value % i === 0) {
      container.push(i)
    }
  }
  return container.reduce(function (x, y) {
    return (x > y) ? x : y
  })
}
 console.log(primeFactor(600851475143))

My browser takes forever to run that code, i've never obtained a result... any way to run and get result faster?

Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:20
@sjames1958gm I get result for smaller values, like millions; even those take some time. I use nodejs in my editors......... Using browsers completely render them useless to run such large values
Stephen James
@sjames1958gm
Jan 21 2018 17:20
@Hoxtygen Why create an array as you find a new value just store that number
Doesn't look like you are testing if i is prime?
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:22
@sjames1958gm sorry, can you elaborate?
Stephen James
@sjames1958gm
Jan 21 2018 17:22
value % i === 0 this only tests if i is a factor, not that i is a prime factor
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:23
@sjames1958gm I guess it's back to the drawing board
Stephen James
@sjames1958gm
Jan 21 2018 17:24
You can also stop when you get to sqrt(value) because all factors of a number is <= sqrt(n)
Idowu Wasiu
@Hoxtygen
Jan 21 2018 17:26
@sjames1958gm thanks man, i gotta get back to it
CamperBot
@camperbot
Jan 21 2018 17:26
hoxtygen sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Jan 21 2018 17:27
@Hoxtygen :+1:
Jianyu Zhang
@Jatstar
Jan 21 2018 18:23
hello
anyone
?
FlashHero
@FlashHero
Jan 21 2018 18:48
function animals(){
return 'I am a animal';
}
var cat=new animals();
animals.prototype.sound='animals sound';
cat.__proto__
I understand that cat.__proto__ points to the prototype of the original animals function and cat.__proto__ returns the sound but if I look inside of what it returns, there's another __proto__ which points to the javascript Object, so is there suppose to be two __proto__'s of what ?
Onome Sotu
@onomesotu
Jan 21 2018 21:06
@FlashHero all javascript objects have a fallback prototype of Object.prototype which they fall back on
FlashHero
@FlashHero
Jan 21 2018 21:52
@onomesotu I don't understand what that means can you elaborate ?
FlashHero
@FlashHero
Jan 21 2018 22:01
I have another question. Do I have to keep the files in src that comes with create-react-app package, Am I limited to files or do I just add files like normally or how does that work ?
And I can't even say ReactDOM.render to render it in something else, they already have it as div, do I change that or how does that work ?
alpox
@alpox
Jan 21 2018 23:06
@FlashHero If you know how node modules work, it works just like that with creat-react-app, but with ES6 module notation. You can therefore always add files and import them to other files
You can add new folders into src to build a structure. But better keep your code in the folder src
I wonder why you would want to render the react app in something else. There should not be the need for that unless you want to expand an already existing page with react
FlashHero
@FlashHero
Jan 21 2018 23:23
@alpox thanks and I got rid of all files and created index.js and imported react and react-dom, but I still can't get rid of the react logo in the title and I meant like render it in other HTML elements because initially they had it render in a div
CamperBot
@camperbot
Jan 21 2018 23:23
flashhero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1523 | @alpox |http://www.freecodecamp.org/alpox
FlashHero
@FlashHero
Jan 21 2018 23:29
@alpox and can I name files anything because only index.js seems works
alpox
@alpox
Jan 21 2018 23:38
@FlashHero Yea rendering it in a div is fine
Yes you can name the files, but you will still need an index.js
IF you want to change the logo in the title, you may have to change the index.html
But really, just leave the rest - render it in the div.
FlashHero
@FlashHero
Jan 21 2018 23:50
@alpox ok