These are chat archives for FreeCodeCamp/Help

27th
Feb 2019
Kaz Baig
@kbaig
Feb 27 00:05
@thekholm80 oh hai :wave:
Kyle Holm
@thekholm80
Feb 27 00:05
@kbaig hey buddy
kinopotato
@kinopotato
Feb 27 06:14

@ezioda004 so basically same rules, if you're going to use "this", better not to use es6 and I suppose better not to use es6 function syntax inside objects?

const user = {
  name: "kino",
  sayHi() {
    console.log(this); // user obj
    return "hi";
  }
};

const user2 = {
  name: "potato",
  sayHi: () => {
    console.log(this); // default binding
    return "hi 2";
  }
};

or arrow function syntax,

Aditya
@ezioda004
Feb 27 06:19
@kinopotato I've never heard of "this" rule you speak of. The use case of each syntax differs, sometimes you need the outer scope this, sometimes you need to refer the object itself. For example in react, you can do something like:
class MyComponent {
  someField = () => {
    this; // refers to the instance
    const someObj = {
        method1(){
          this; // here this refers to the someObj
          this.props.... // doesnt work
        },
        method2: () => {
           this; // here this refers to the instance of MyComponent
           this.props.... // works!
        }
    };
  }
}
tl;dr: both syntax have its use cases and there is no hard rule to go by
kinopotato
@kinopotato
Feb 27 06:22
I guess I was mistaken thinking that this doesn't work with arrow functions, but it seems it just works in a different way than I assumed. Need to read more about this. (see what I did there at the end? he he he) Thanks man!
by the way, what would props be in your example? From what I know, usually "this" would refer to something inside the object, so what would props be??
psyperl
@psyperl
Feb 27 06:43
are you sure it would work with arrows?
kinopotato
@kinopotato
Feb 27 06:44
If you're asking me, then I have no clue
psyperl
@psyperl
Feb 27 06:46
lets check
psyperl
@psyperl
Feb 27 06:52
somehow this in arrows returning some larger context of this
const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return this
  }
})
console.log(test().greetings().prop1) // didn't get what i want
in browser it gave me window context or some such
kinopotato
@kinopotato
Feb 27 06:54
I checked it at repl.it and it gave me hello then undefined
psyperl
@psyperl
Feb 27 06:54
same yeah
kinopotato
@kinopotato
Feb 27 06:56
I removed prop1 and got this
SecurityError: Blocked a frame with origin "https://replbox.repl.it" from accessing a cross-origin frame.
    at eval:9:9
    at eval
    at new Promise
    at i.<anonymous>
hehe, yeah, my JS is too shitty for me to comprehend all of this
any of this, actually
psyperl
@psyperl
Feb 27 06:57
yeah it access larger context either frame or window .. in repl it i guess it gave us frame
kinopotato
@kinopotato
Feb 27 06:59
is that like global variables?
psyperl
@psyperl
Feb 27 07:00
yep
kinopotato
@kinopotato
Feb 27 07:04
yeah, sounds like something I should know about - but don't. haha. better that I don't touch it for now.
thanks for the info dude ;)
:)
psyperl
@psyperl
Feb 27 07:05
no worries... this code maybe give you the clue
const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return this
  }
})

if (this == test().greetings()){
  console.log("World!")
}
:D
kinopotato
@kinopotato
Feb 27 07:08
so I can assume that "this" inside an arrow function is similar to a var. I guess we can say it's var this and anywhere I call that var it will show and be the same (assuming I don't change its value)
psyperl
@psyperl
Feb 27 07:08
yep
kinopotato
@kinopotato
Feb 27 07:08
where can that be useful?
psyperl
@psyperl
Feb 27 07:09
hang on ... well this inside arrow function is equal to this outside that function .. that's what i meant
not sure where that can be useful to be honest .. to be honest.. i just discovered and figure that out just after we tested it :D
kinopotato
@kinopotato
Feb 27 07:10
basically equal everywhere UNLESS it's not an arrow function which then the "this" inside a normal function becomes like let and only applicable within that block
psyperl
@psyperl
Feb 27 07:11
yeah. if it's not in an arrow function then this will be within that object scope
else this will be in the scope where that arrow function is created
kinopotato
@kinopotato
Feb 27 07:14
const ex = {
  going : "bananas"
}

const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return this.ex
  }
})

console.log(test().greetings())//Hello { going: 'bananas' }
this is weird for me since I'm used to using let and never really got to using var, haha
psyperl
@psyperl
Feb 27 07:15
that works?
kinopotato
@kinopotato
Feb 27 07:16
weird right, I'm not used to this kind of coding. well to be fair I'm not used to any kind of coding. lol
psyperl
@psyperl
Feb 27 07:17
lol
oo i have funny use cases ... hang on
kinopotato
@kinopotato
Feb 27 07:19
const ex = {
  going : "bananas"
}

const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return this.ex
  }
})

const test2 = {
  prop1 : "World",
  greetings() {
    console.log("hello to you 2")
    return this.ex
  }
}

console.log(test().greetings()) // Hello { going: 'bananas' }
console.log(test2.greetings()) //hello to you 2 undefined

btw what is this syntax that you use?

const test = x => ()

looks like a normal arrow function but then there's an object inside which means it's used as an argument?

psyperl
@psyperl
Feb 27 07:21
that's just returning the object
need to put parens because if you only put {} it will think it's the function body
i tried accessing the ex .. but doesn't work ... your case is strange.. it shouldn't work... so yeah that's weird
// both the same
const returnObj = { } 
const returnObj1 = () = ({})

// this is an empty function 
const emptyFunc = () = { 
}
const emptyFunc2 = () = {}
kinopotato
@kinopotato
Feb 27 07:29

tried this as well

function banana(){
  console.log("I love bananas yummy!");
}

let noArrow = {
  noArrow() {
    return this.banana()
  }
}

let arrow = {
  arrow: () => {
    return this.banana()
  }
}

arrow.arrow() // I love bananas yummy!
noArrow.noArrow() // typeError: this.banana is not a function

so I'm guessing if you want to access something outside of your block then you use "this" with arrow functions

hmm, but then...
psyperl
@psyperl
Feb 27 07:30
yeah the second one didn't work..
kinopotato
@kinopotato
Feb 27 07:30
but then this
function banana(){
  console.log("I love bananas yummy!");
}

let noArrow = {
  noArrow() {
    return banana()
  }
}

let arrow = {
  arrow: () => {
    return this.banana()
  }
}

arrow.arrow() // I love bananas yummy!
noArrow.noArrow() // I love bananas yummy!
so I still don't know the use case, hahaha
Manish Giri
@Manish-Giri
Feb 27 07:31
console.log(test().greetings()); // Hello { going: 'bananas' }
are you sure this is what this line prints
I think it would print hello undefined
psyperl
@psyperl
Feb 27 07:31
it's hello undefined too here
kinopotato
@kinopotato
Feb 27 07:31
did it at repl.it
psyperl
@psyperl
Feb 27 07:31
but he did it at repl.it yeah
kinopotato
@kinopotato
Feb 27 07:31
lemme try again
psyperl
@psyperl
Feb 27 07:31
which is weird .. result is unpredicted
kinopotato
@kinopotato
Feb 27 07:32
same result for this
```
const ex = {
  going : "bananas"
}

const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return this.ex
  }
})

console.log(test().greetings())//Hello { going: 'bananas' }
Manish Giri
@Manish-Giri
Feb 27 07:32
because test doesn't have an ex
kinopotato
@kinopotato
Feb 27 07:33
I have no clue, I type that at repl.it and that's what it spewed. haha, I don't even know what's happening
psyperl
@psyperl
Feb 27 07:33
i ran it on repl.it .. i got Hello undefined instead
node js version
kinopotato
@kinopotato
Feb 27 07:34
Untitled.jpg
I think I'm just using JS
normal one
psyperl
@psyperl
Feb 27 07:35
how do you get to the normal one? lol
kinopotato
@kinopotato
Feb 27 07:35
I just chose javaScript when you get prompted?
psyperl
@psyperl
Feb 27 07:36
i didn't get the prompt
kinopotato
@kinopotato
Feb 27 07:36
when you go to the main page, you can choose a bunch of stuff there
it changed, haha, before you can choose but now it is asking me to sign up
psyperl
@psyperl
Feb 27 07:37
lol
yeah it always sent me to node .. and it won't work there
kinopotato
@kinopotato
Feb 27 07:37
maybe this link will work? I bookmarked a repl.it page that was JS and even though it keeps changing URL (same bookmark) it always remains as vanilla js
https://repl.it/repls/RegularSandyAgent
psyperl
@psyperl
Feb 27 07:38
well i ran it on my browser as a flat JS .. doesn't work too
that url gave me different page @kinopotato
kinopotato
@kinopotato
Feb 27 07:39
as usual, I have no clue
this is the other link
https://repl.it/repls/NoteworthyRaggedLinux
the one that I'm currently on with the "this" tests
Manish Giri
@Manish-Giri
Feb 27 07:40
so repl.it has different behavior based on the environment
in a plain JS repl, it prints hello undefined
psyperl
@psyperl
Feb 27 07:40
yeah.. only the browser mode one it semms
kinopotato
@kinopotato
Feb 27 07:40

also, I just tried this

const ex = {
  going : "bananas"
}

const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ")
    return ex
  }
})

console.log(test().greetings())//Hello { going: 'bananas' }

so yeah, I really have no clue what using "this" inside arrow functions are for

psyperl
@psyperl
Feb 27 07:40
in direct plain js here I also got undefined
Manish Giri
@Manish-Giri
Feb 27 07:40
but in a babel/es6 repl, it prints hello and the obj
note the babel repl doesn't let you console.log(this) so you'll need to comment it out
kinopotato
@kinopotato
Feb 27 07:42
we were running different codes
I wasn't running console.log(this)
Manish Giri
@Manish-Giri
Feb 27 07:43
I added that
to see what this was
kinopotato
@kinopotato
Feb 27 07:43
const ex = {
  going : "bananas"
}

const test = x => ({
  prop1 : "World",
  greetings: () => {
    console.log("Hello ");
    return this.ex;
  }
})

const test2 = {
  prop1 : "World",
  greetings() {
    console.log("hello to you 2")
    return this.ex
  }
}

console.log(test().greetings()); // Hello { going: 'bananas' }
console.log(test2.greetings());//hello to you 2 undefined
I think "this" pertains to everything or the global object if written inside an arrow function
psyperl
@psyperl
Feb 27 07:44
can you call that console.log(test().greetings()); twice?
and see if it's giving you the same result?
kinopotato
@kinopotato
Feb 27 07:45
err, alright
yep
same
psyperl
@psyperl
Feb 27 07:45
wew
scary lol
kinopotato
@kinopotato
Feb 27 07:45
Hello
{ going: 'bananas' }
Hello
{ going: 'bananas' }
hello to you 2
undefined
it's only scary if you want to be competent. be like me, be "just alright"
he he he
psyperl
@psyperl
Feb 27 07:46
i like how more people jumping in to the discussion and started the sentence with 'are you sure' lol
kinopotato
@kinopotato
Feb 27 07:47
haha, a lot of things start with a question like that
"are you sure you want to eat that?"
"are you sure you want to jump over that?"
psyperl
@psyperl
Feb 27 07:47
yeah i would just avoid the use of this in arrow function
Manish Giri
@Manish-Giri
Feb 27 07:47
I think "this" pertains to everything or the global object if written inside an arrow function
arrow funcs don't have a "this" binding
so it's generally the window scope
kinopotato
@kinopotato
Feb 27 07:48
aditya said there's a use case and he's an expert (I'm sorta dumb tho so everyone is an expert for me)
psyperl
@psyperl
Feb 27 07:48
yeah
generally window scope.. and from @kinopotato example it gave some frame scope
kinopotato
@kinopotato
Feb 27 07:48
but what's the use case tho? for example if I want to call something outside my block then I just call it
this.ex VS ex
works the same since it was declared outside the current block
Manish Giri
@Manish-Giri
Feb 27 07:50
both returns undefined
I mean test() and test2
psyperl
@psyperl
Feb 27 07:51
const greet = x => ({
  outerScope: () => { return this }
})

const user1 = {
  sayHi() { return greet() }
};

user1.sayHi() // this will give window object instead of user1 obj
so yeah seems to always give the root object
except maybe frame
in codepen .. it gave me the greet object lol
result varies between diff environment :D
kinopotato
@kinopotato
Feb 27 08:01
I want nothing to do with this now, haha, bring back my innocence!
psyperl
@psyperl
Feb 27 08:01
haha
well yeah is unpredictable result.. best to avoid
kinopotato
@kinopotato
Feb 27 08:04
can't argue with that
psyperl
@psyperl
Feb 27 08:05
wrong code i pasted above .. but oh well
enough of this :D
kinopotato
@kinopotato
Feb 27 08:07
lel
ZhangHong
@miles-zh
Feb 27 08:18
blob
blob
what's the problem
artze
@artze
Feb 27 13:29
check typo? geolocation.geCurrentPosition
should be getCurrentPosition
Aditya
@ezioda004
Feb 27 17:31
@kinopotato The use case is fairly straightforward, I want to access the outerscope this inside the object:
class Foo {
  x = 2;
  someField = () => {
      const obj = {
         type: 'something',
         val: y => {
           return this.x + y;
         }
      };
      // few mutations later
      console.log(obj.val(3)); // 5, works!
  };
}
new Foo().someField();
BuntyBru
@BuntyBru
Feb 27 18:57
@Smootimus nice to see you are back gilfoyle
@thekholm80
how are things going mate?