JavaScript

Dynamic Context

When there's a will to fail, obstacles can be found.

function f() {
  this.name = 'arfat';
}

f();
function f() {
  'use strict'
  this.name = 'arfat';
}

f();
function fun() { 
  return this; 
}

fun();
typeof fun.call(2);
fun.apply(null);
fun.call(undefined);
typeof fun.bind(true)();

Functions can act in various ways in JavaScript. Let’s look at them —

Traditional Functions (that is, outside any object)

function add1(num1, num2) { // function declaration
 return num1 + num2;
}
const add2 = function(num1, num2) { // function expression
 return num1 + num2;
}

Object’s methods (inside an object)

  • In this case, the functions are embedded in objects. In most cases, they are supposed to act on data stored in the object itself.
  • For example, in the code below, getName() method returns the name property stored in details object.
const details = {
  name: 'Arfat',
  getName: function () {
  return this.name;
  }
}
details.getName(); // 'Arfat'

Constructor Functions

  • Constructor functions “construct” objects. They are equivalent to classes in other languages.
  • Since JavaScript has no concept of a class (even though it has class keyword), functions rise up to the task.
  • A function, when used with the new operator, is called a constructor function. The new operator changes the behavior of the function. 
function Person(name) {
  this.name = name;
}
const person1 = new Person('Arfat');
console.log(person1); 
// Person { name: 'Arfat' }

Global Context

In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.

console.log(this === global);
console.log(this === window);

Simple Function

When a function is executed normally (without any help of object), the this context is set to global.

function f() {
  return this;
}

console.log(f() === global);
console.log(f() === window);

Strict Mode vs Sloppy Mode

  • JavaScript's strict mode, introduced in ECMAScript 5, is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode".
  • Strict mode isn't just a subset: it intentionally has different semantics from normal code.
'use strict';
foo = 17;
foo = 17;
var undefined = 9
var Infinity = 10;

if (undefined) {
  console.log('is true');
}
'use strict';
var undefined = 9;
var Infinity = 10;

if (undefined) {
  console.log('is true');
}

Context in Strict mode

In sloppy mode,  this is always an object:

  • either the provided object if called with an object-valued this; the value, boxed, if called with a Boolean, string, or number this;
  • or the global object if called with an undefined or null this.
function fun() { return this; }
fun() === global;
typeof fun.call(2) === 'object';
fun.apply(null) === global;
fun.call(undefined) === global;
typeof fun.bind(true)() === 'object';
'use strict';
function fun() { return this; }
fun() === undefined;
fun.call(2) === 2;
fun.apply(null) === null;
fun.call(undefined) === undefined;
fun.bind(true)() === true;
const obj = {
  name: 'Arfat',
  f: function() {
    console.log(this.name);
  }
};

obj.f();
const obj = {
  name: 'Arfat',
  f: function() {
    console.log(this.name);
  }
};

var g = obj.f;
g();
function returnThisStrict() {
  'use strict';
  return this
}

var obj = { method: returnThisStrict };
console.log(obj.method());

const obj = {
  name: 'Arfat',
  f: function() {
    console.log(this.name);
  }
};
setTimeout(obj.f, 2000);
var obj = {
  name: 'Jane',
  friends: [ 'Tarzan', 'Cheeta' ],
  loop: function () {
      this.friends.forEach(
           function(friend) {  // (1)
              console.log(this.name+' knows '+friend);  // (2)
          }
      );
  }
};

obj.loop();

An object is a

collection of properties

A property is a
named container for a value
w/ some additional attributes

The name of a property  is called a key ;
thus, an object  can be considered as
a collection of key-value pairs .

There are similar concepts in other programming languages,
e.g., Map, Dictionary, Associative Array, Symbol Table, Hash Table , ...

Properties

  • all objects in JavaScript are maps (dictionaries) from strings to values.

  • A (key, value) entry in an object is called a property .  The key of a property is always a text string (ES5).

  • 3 Kinds of Properties

  • Properties (or named data properties)

  • Accessors (or named accessor properties)

  • Internal properties

    • Exist only in the ECMAScript language specification.

 

Accessing Properties

Dot Notation 

var jane = {
  name: 'Jane',

 'desc.func': function () {
      return 'Person named ' + this.name;
  },
};
$ jane.name

// 'jane'
$ jane['desc.func']

// [Function]

Bracket Notation

this in objects

this  refers to the object on which the method has been invoked 

> var obj = { method: returnThisStrict };
> obj.method() === obj
true

Normal functions in sloppy mode 

function returnThisSloppy() {
    return this
}
> returnThisSloppy() === window
true

Normal functions in strict mode 

function returnThisStrict() {
    'use strict';
    return this
}

> returnThisStrict() === undefined
true

Pitfalls

Losing this When Extracting a Method

var counter = {
    count: 0,
    inc: function () {
        this.count++;
    }
}

  • We have called the value of counter.inc  as a function.

  • Hence, this  is the global object and we have performed window.count++ .

  • window.count  does not exist and is undefined . Applying the ++  operator to it sets it to NaN.

  • Use strict mode for avoiding this. 

> var func = counter.inc;
> func()
> counter.count  // didn’t work
0

How to properly extract a method

> var func3 = counter.inc.bind(counter);
> func3()
> counter.count  // it worked!
1

Callbacks and extracted methods

function callIt(callback) {
    callback();
}
> callIt(counter.inc)

❌

✓ 

> callIt(counter.inc.bind(counter))

Changing Function context

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

Syntax: function.bind(thisArg[, arg1[, arg2[, ...]]])

The call() method calls a function with a given this value and arguments provided individually.

Syntax: function.call(thisArg, arg1, arg2, ...)

function greet() {
  var reply = [
    this.animal,
    'typically sleep between',
    this.sleepDuration
  ].join(' ');

  console.log(reply);
}

var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj); 
// cats typically sleep between 12 and 16 hours

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

Note: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

var min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

Syntax: function.apply(thisArg, [argsArray])

Pitfall

Functions Inside Methods Shadow this

var obj = {
  name: 'Jane',
  friends: [ 'Tarzan', 'Cheeta' ],
  loop: function () {
      this.friends.forEach(
          function (friend) {  // (1)
              console.log(this.name+' knows '+friend);  // (2)
          }
      );
  }
};

obj.loop()

What to do?

Workaround 1: that = this

loop: function () {
    'use strict';
    var that = this;
    this.friends.forEach(function (friend) {
        console.log(that.name+' knows '+friend);
    });
}

Workaround 2: bind()

loop: function () {
    'use strict';
    this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
    }.bind(this));  // (1)
}

Workaround 3: a thisValue for forEach()

this.friends.forEach(function (friend) {
        console.log(this.name+' knows '+friend);
}, this);

Arrow Functions

() => { ... } // no parameter
     x => { ... } // one parameter, an identifier
(x, y) => { ... } // several parameters

x => { return x * x }  // block
x => x * x
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);

New Kind of Function

Specifying a body:

The complete list of variables whose values are determined lexically is:

arguments     super     this     new.target

  • The following constructs are lexical: arguments, super, this, new.target
  • It can’t be used as a constructor: Normal functions support new via the internal method [[Construct]] and the property prototype. Arrow functions have neither, which is why new (() => {}) throws an error.

Arrow functions versus normal functions

An arrow function is different from a normal function in only two ways:

var obj = {
  name: 'Jane',
  friends: [ 'Tarzan', 'Cheeta' ],
  loop: function () {
      this.friends.forEach(
           (friend) => {
              console.log(this.name+' knows '+friend); 
          }
      );
  }
};

obj.loop()

Workaround 4: Arrow functions

function showInResult(str) {
    console.log(str);
}

const li = document.querySelector('#second-li');
const ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
   showInResult(this.tagName);
   showInResult(event.target.tagName);
   showInResult(`handler attached to ${event.currentTarget.tagName}`);
})
<button onclick={showInResult(this.tagName)}>
  Click
</button>

<ul>
  <li>Item 1</li>
  <li id="second-li">Item 2</li>
</ul>

In DOM event handler

this is set to the element the event fired from

function bluify(e) {
  // Always true
  console.log(this === e.currentTarget);
  // true when currentTarget and target are the same object
  console.log(this === e.target);
  this.style.backgroundColor = '#A5D9F3';
}

target = element that triggered event; currentTarget = element that listens to event.

In an inline event handler

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

When the code is called from an inline on-event handler, its this is set to the DOM element on which the listener is placed:

deck

By Arfat Salman

Made with Slides.com

deck

  • 223

More from Arfat Salman