Value and Reference types

var people = [
    { name: 'John Hill', age: 22 },
    { name: 'Jack Chill', age: 27 }
];

var getInitials = function( name ) {
    // Reusing the name argument makes little sense in general.
    // We are making this assignment here for demonstrating
    // the difference between value types and reference types.
    name = name.split( ' ' ).map( function( word ) {
        return word.charAt( 0 );
    } ).join( '' );

    console.log( name );

    return name;
}

var increaseAge = function( person ) {
    person.age += 1;
}

var addPerson = function( people, name, age ) {
    people.push( { name: name, age: age } );
}

// Part 1: getInitials
console.log( getInitials( people[0].name ) ); 
console.log( people[0].name );

// Part 2: increaseAge
increaseAge( people[1] );
console.log( people[1].age );

// Part 3: addPerson
addPerson( people, 'Jim Gordon', 32 );
console.table( people );

• In the first part, the initials of a name are constructed by the getInitials function. The string value passed to the function is copied. This copy is accessed and modified inside the function. These modifications have nothing to do with the original value people[0].name.
• The increaseAge function accepts an object. As objects are reference types, only the reference to the passed person is copied. When members of the referenced object are changed, the changes are kept even after executing the function. These changes are accessible via each reference.
• Arrays are also reference types. Adding an element to an array is a permanent change.

JH
JH
John Hill
28
(index) name         age
0       "John Hill"  22
1       "Jack Chill" 28
2       "Jim Gordon" 32
undefined

• console.table is a nice logging utility. It displays arrays of objects in tabular format in modern browsers like Google Chrome.
• The last undefined is the return value of the last console.log. It also appears as a value in the console.

Mistake: treating a value type as a reference type

function increaseAge( age ) {
    age += 1;
}

console.log( 'Before:', people[0].age );
increaseAge( people[0].age );
console.log( 'After:', people[0].age );

function replacePerson( person, name, age ) {
    person = { name: name, age: age };
}

replacePerson( people[1], 'Jack Newtown', 35 );
console.table( people );

Mistake: treating a reference type as a value type

var shopTransaction = {
    items: [ { name: 'Astro Mint Chewing Gum' } ],   
    price: 1,
    amountPaid: 1000
}

var cashier = {
    units:    [500, 200, 100, 50, 20, 10, 5, 2, 1],
    quantity: [0, 0, 5, 4, 5, 10, 10, 20, 9]
}

function canChange( shopTransaction, cashier ) {
    var amount = shopTransaction.amountPaid - shopTransaction.price;
    for( var i = 0; i < cashier.units.length; ++i ) {
        var unit = cashier.units[i];
        while ( amount >= unit && cashier.quantity[i] > 0 ) {
            amount -= unit;
            cashier.quantity[i] -= 1;
        }
    }

    return amount == 0;
}

console.log( canChange( shopTransaction, cashier ) );
console.log( cashier.quantity );

function canChange( shopTransaction, cashier ) {
    var amount = shopTransaction.amountPaid - shopTransaction.price;
    for( var i = 0; i < cashier.units.length; ++i ) {
        var unit = cashier.units[i];
        var currentQuantity = cashier.quantity[i];
        while ( amount >= unit && currentQuantity > 0 ) {
            amount -= unit;
            currentQuantity -= 1;
        }
    }

    return amount == 0;
}

Summary