Javascript scopes (THIS)

The "This" in JavaScript is pretty confusing and i guess requires a whole POST to describe different scenarios to understand it better.

• So, by default "This" points to the global scope or window scope in a function.

function a() {

console.log(this) // this is global scope, or window scope

}

• In case we make of 'use strict' mode then "This" points to undefined.

Basically, "This" is set based on from where the function is called. Eg.

var name = 'Elsa';
function callName() {
console.log("name", this.name)
}
var obj = new callName(); // This would print 'undefined', this would point to window object this.window.name == 'Elsa'

• Another point to be noted, if we have a method inside an object then "This" points to the object.

Eg below:

var obj1 = {
  name: 'Prem',
  func: function() {
   console.log(this.name) // this refers to obj1
  }
}

obj1.func() // this would print 'Prem'

• We can change the scope of this using certain functions like this, using the .call method

var obj1 = { name: 'Prem', func: function() { console.log(this.name) // this refers to obj1 } } obj1.func() // this would print 'Prem' var obj2 = {name: 'Ratan'} obj1.func.call(obj2); // this would print 'Ratan'

Always make sure to identify the difference between a global variable and local variable even

though the variable name is same.

One last example:

function movie() { var name = "Prem"; // this is a local variable of movie func this.maker = "Ratan"; // this points to global scope here console.log(this.name + " " + maker); // output: undefined Payo } var name = "Dhan"; // global variable var maker = "Payo"; //global variable obj = new movie(); // This will create an object of function movie() console.log('maker', obj.maker); // this will print Ratan

In the above example this.name and name are 2 different variables,

similarly this.maker and maker.

My Understang of Javascript - Part1 (Basics)

When i started with Javascript, i would not understand as to why is it considered so special as compared to other languages and what is it that makes it different.

Certain things i found interesting, u might as well :)

First thing to Note... Everything in Javascript is an Object, or atleast derived from an object.

Primitives in Javascript are String, Number, Boolean, Null and undefined.

1. Functions

Functions in javascript are different because they can take any form. What i mean by this is functions are objects i.e they are called function objects. Other differences are functions can be passed as a parameter, it can be returned just like any other variables, that is reason why they are called the first class citizens. (Higher order functions)

2. Hoisting

What is hoisting? As the name suggest hoisting means raising something (like hoisting a flag [:P]).
Ok, enough of ENGLISH meanings , lets get back to Javascript.

In JavaScript all the variables are hoisted to top, i.e all the declarations only are hoisted not its assignment. below with example.

Program 1:
console.log(a);
var a= 10;

In Program 1 the value of `a` would be undefined, it will not throw an error as compared to other languages, reason being "Hoisting".

After hoisting the Program 1 would look something like this:
var a;
console.log(a);
a=10;

So, the declarations of a is taken to the top and not its assignment.
All the variables declared are by default set the value of undefined.

You can try the above example or various other examples to make this concept clear.

3. Scopes

Scope means up to where a particular variable would be available in a program/script.

Scopes belong to global scope, function scope. Lets understand each one and how they work.

a. Global scope: Is the one that is not inside any function or in short it starts with the first line of the code.
b. Function scope: This scope starts with the function and ends with the last ending brace. Variables inside the function are not accessible outside are called the local variables.

There is something more to this... The Closures ... lets unsderstand this with an example.

function a() {
   var alocal = 10;
   function b() {
     // variable alocal is accessible here
    console.log(alocal) // will print 10.
   }
}

Inner function has access to its outer function, thats why it can access the variable alocal.

4. "This" Scope

By default this points to the outermost global scope i.e window.
The scope of "this" changes depending on the way it is called.

In a function the "this" points to the global scope
function a() {
//this = global scope
}

Similarly function inside a function also points to a global scope.
function b() {
 function c() {
    // this still points to the global scope
 }
}

Only incase of objects its different.

var objLocal = {

loc : 1,

func: function() {

console.log("this", this); // this points to object scope and not global

}

}

We could change the scopes using .call() , .apply() methods

This is just the start, many more things to explore.. will post more in the coming blogs.

Thats all in this blog FOLKS!!