Javascript Scope Tutorial - What Makes Javascript Weird...and Awesome Pt 4

LearnCode.academy · 144K views · 2014 · 8:23

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering questions about `this`, closures and variable scope in event handlers and callbacks, as a quick explanation of how JavaScript scope behaves.

Recommended by 3 people across 2 different months, 2014 to 2017.

What it is

A short JavaScript tutorial from LearnCode.academy, part 4 of a series, explaining scope (which variables code can access) versus context (the value of `this`). It shows how scope plays out in the functions you write, especially with callbacks and asynchronous code.

What people said

Recommends varun teja · 2016-01 · Stack Overflow · on “JS: Should I set a var/let in a click (or equivalent) event?”

it depends!! scenario 1: change variables depending upon events function foo(){ var baq;// to avoid scope conflicts baq = 0; $('.bar') .click(function(){ baq++;//increment baq with click event }) } scenario 2: dealing with context function foo(){ var baq;// to avoid scope conflicts baq = $(this); $('.bar') .click(function(){ baq = $(this); }) } i can't imagine all cases.but there is a good video on youtube about this. video [this video]

Recommends Paulo Fortes · 2017-02 · Stack Overflow · on “When to use anonymous functions in JSX”

In ES6 , with the first scenario "this" refers to the Component where the function called belongs to. <button onClick={() => this.functionNameHere()}></button> is equivalent to <button onClick={this.functionNameHere.bind(this)}></button> . On the other hand, in <button onClick={this.functionNameHere()}></button> "this" refers to the button itself. I came from Python and I'm still a bit confuded about javascript context. Check this video for further info: [this video]

Recommends Rico Kahler · 2017-02 · Stack Overflow · on “How to Compare Variable value in Javascript?”

It might be a problem with scoping. Its hard to tell from the code you gave but try doing something like this: // create a variable that refers to the scope you want. const that = this; let abc = false; $('#dataTable tr td').find("input[name='" + 'lstDetlIssue[' + i + '].Product' + "']").change(function () { // then change it like so that.abc = true; alert(that.abc); }); This youtube video [this video] explains javascript scope pretty well.

Cites Will Stern · 2014-03 · Stack Overflow · on “Ng-model does not update controller value”

"If you use ng-model, you have to have a dot in there." Make your model point to an object.property and you'll be good to go. Controller $scope.formData = {}; $scope.check = function () { console.log($scope.formData.searchText.$modelValue); //works } Template <input ng-model="formData.searchText"/> <button ng-click="check()">Check!</button> This happens when child scopes are in play - like child routes or ng-repeats. The child-scope creates its own value and a name conflict is born as illustrated here [this video] : See this video clip for more: [this video]

Cites Ramesh Rajendran · 2017-01 · Stack Overflow · on “$scope returns undefined in ionic app”

Solution : "If you use ng-model, you have to have a dot in there." Make your model point to an object.property and you'll be good to go. Controller $scope.formData = {}; $scope.check = function () { console.log($scope.formData.searchText.$modelValue); //works } Template <input ng-model="formData.searchText"/> <button ng-click="check()">Check!</button> This happens when child scopes are in play - like child routes or ng-repeats. The child-scope creates it's own value and a name conflict is born as illustrated here [this video] : See this video clip for more: [this video] . And that is referred from below links : Other Solutions Use this keyword instead of $scope , More details [LINK] And also you can g