Basic ES5

Week 1

Day 3

Objects

An object is a

collection of properties

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

Definition

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 , ...

  • Property Accessors (Dot and square notations)
  • this in objects
  • Other gotchas when using this.
    • Functions Inside Methods Shadow this
    • Losing this When Extracting a Method
  • Inheritance
    • Javascript inheritance by examples
    • Setting and Deleting Affects Only Own Properties
    • Sharing Data Between Objects via a Prototype
    • Prototypal Chain

Review

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.

  • 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))

Pitfall

Functions Inside Methods Shadow this

var obj = {
    name: 'Jane',
    friends: [ 'Tarzan', 'Cheeta' ],
    loop: function () {
        'use strict';
        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);

  • Array (as Objects)

  • Array Methods

    • Map

    • Reduce

    • Filter

    • forEach

    • ...

  • mutating and non-mutating methods

Arrays

  • An array is a map from indices (natural numbers, starting at zero) to arbitrary values.
  • The values (the range of the map) are called the array’s elements.
  • The most convenient way of creating an array is via an array literal.
> var arr = [ 'a', 'b', 'c' ]; // array literal
> arr[0]  // get element 0
'a'
> arr[0] = 'x';  // set element 0
> arr
[ 'x', 'b', 'c' ]
  • Arrays Are Maps, Not Tuples
  • The ECMAScript standard specifies arrays as maps (dictionaries) from indices to values.

Arrays Can Also Have Properties

  • Arrays are still objects and can have object properties.
  • Those are not considered part of the actual array; that is, they are not considered array elements.
> var arr = [ 'a', 'b' ];
> arr.foo = 123;
> arr
[ 'a', 'b' ]
> arr.foo
123

The Array Constructor

  • There are two ways to use the constructor Array:
    • you can create an empty array with a given length  
    • an array whose elements are the given values.
> var arr = new Array(2);
> arr.length
2
> arr  // two holes plus trailing comma (ignored!)
[ , ,]

// The same as ['a', 'b', 'c']:
var arr1 = new Array('a', 'b', 'c'); 
// AVOID this.

An empty array with a given length has only holes in it!

The problem is that you can’t create arrays with a single number in them, because that is interpreted as creating an array whose length is the number:

> new Array(2)  // alas, not [ 2 ]
[ , ,]

> new Array(5.7)  // alas, not [ 5.7 ]
RangeError: Invalid array length

> new Array('abc')  // ok
[ 'abc' ]

Array Prototype Methods

Adding and Removing Elements (Destructive)

Array.prototype.shift()

Removes the element at index 0 and returns it. The indices of subsequent elements are decremented by 1:

 

> var arr = [ 'a', 'b' ];

> arr.shift()
'a'
> arr
[ 'b' ]

Array.prototype.unshift(elem1?, elem2?, ...)

Prepends the given elements to the array. It returns the new length:

> var arr = [ 'c', 'd' ];
> arr.unshift('a', 'b')
4
> arr
[ 'a', 'b', 'c', 'd' ]

Array.prototype.pop()

Removes the last element of the array and returns it:

> var arr = [ 'a', 'b' ];
> arr.pop()
'b'
> arr
[ 'a' ]

Array.prototype.push(elem1?, elem2?, ...)

Adds the given elements to the end of the array. It returns the new length

> var arr = [ 'a', 'b' ];
> arr.push('c', 'd')
4
> arr
[ 'a', 'b', 'c', 'd' ]

Sorting and Reversing Elements (Destructive)

Array.prototype.reverse()

Array.prototype.sort(compareFunction?)

> var arr = [ 'a', 'b', 'c' ];
> arr.reverse()
[ 'c', 'b', 'a' ]
> arr // reversing happened in place
[ 'c', 'b', 'a' ]
> var arr = ['banana', 'apple', 'pear', 'orange'];
> arr.sort()
[ 'apple', 'banana', 'orange', 'pear' ]
> arr  // sorting happened in place
[ 'apple', 'banana', 'orange', 'pear' ]

Concatenating, Slicing, Joining (Nondestructive)

Array.prototype.concat(arr1?, arr2?, ...)

Array.prototype.slice(begin?, end?)

Array.prototype.join(separator?)

> var arr = [ 'a', 'b' ];
> arr.concat('c', ['d', 'e'])
[ 'a', 'b', 'c', 'd', 'e' ]

> arr
[ 'a', 'b' ]
> [ 'a', 'b', 'c', 'd' ].slice(1, 3)
[ 'b', 'c' ]

> [3, 4, 5].join('-')
'3-4-5'
> [3, 4, 5].join()
'3,4,5'
> [3, 4, 5].join('')
'345'

> [undefined, null].join('#')
'#'

Searching for Values (Nondestructive)

Array.prototype.indexOf(searchValue, startIndex?)

Array.prototype.lastIndexOf(searchElement, startIndex?)

> [ 3, 1, 17, 1, 4 ].indexOf(1)
1
> [ 3, 1, 17, 1, 4 ].indexOf(1, 2)
3

> [NaN].indexOf(NaN)
-1

> [ 3, 1, 17, 1, 4 ].lastIndexOf(1)
3
> [ 3, 1, 17, 1, 4 ].lastIndexOf(1, -3)
1

Iteration (Nondestructive)

Examination Methods

Array.prototype.forEach(callback, thisValue?)

Array.prototype.every(callback, thisValue?)

Array.prototype.some(callback, thisValue?)

var arr = [ 'apple', 'pear', 'orange' ];
arr.forEach(function (elem) {
    console.log(elem);
});

> function isEven(x) { return x % 2 === 0 }
> [ 2, 4, 6 ].every(isEven)
true
> [ 2, 3, 4 ].every(isEven)
false

> function isEven(x) { return x % 2 === 0 }
> [ 1, 3, 5 ].some(isEven)
false
> [ 1, 2, 3 ].some(isEven)
true

Transformation Methods

Array.prototype.map(callback, thisValue?)

Array.prototype.reduce(callback, initialValue?)

> [ 1, 2, 3 ].map(function (x) { return 2 * x })
[ 2, 4, 6 ]

> [ 1, 0, 3, 0 ].filter(function (x) { return x !== 0 })
[ 1, 3 ]

function add(prev, cur) {
    return prev + cur;
}
console.log([10, 3, -1].reduce(add)); // 12

Basic JS (Week 1, Day 3, Segment 2)

By Amal Augustine

Made with Slides.com

Basic JS (Week 1, Day 3, Segment 2)

  • 182

More from Amal Augustine