JavaScript Fundamentals:

Native Methods

Data Types and PRototypes

Review

What are they main Data Types in Javascript?

  • Boolean
  • String
  • Number
  • Object
  • Undefined

Objects Review

What is an Object?

 1.  A collection of properties

2.  The collection possess properties that have an association between a name (or key) and a value

3.  In Javascript the Object collection and Array collection are both of the data type Object.

When an Object has a function definition assigned to a property it is called a method . 

 

All Objects in Javascript inherit methods from the Object prototype.

Object.prototype

Prototype - a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.

 
lets abstract this a little bit...

All objects inherit methods and properties from Object.prototype

Array.prototype

The Array prototype actually inherits from the Object prototype and also has its own methods as well!

Because Arrays are an ordered collection it is necessary for the data structure to possess native methods specific to its own needs. The .length() method is a one example of this specific need.

var exampleArray = new Array(10);

var collectionCheck = function(collection) {
    if(Array.isArray(collection) {
        console.log("This is an Array checked by the isArray method!");
    }else {
        console.log("This is not an Array");
    }
}

collectionCheck(exampleArray)
//This is an Array checked by the isArray method!

Let's Explore Some Native Array Methods!

Context

Native methods FTW!

Concepts we'll cover:

  • .forEach()
  • .map()
  • .filter()
  • .reduce()

Bring together all of the concepts we've learned to and see the correlation between them and native methods.

.FOReach() usage

var pocketmons = ['Charisaur', 'Bulbazard', 'Twomew'];
var logger = function(val){
  console.log(val);
};
pocketmons.forEach(logger);
//'Charisaur'
//'Bulbazard'
//'Twomew'
//list.forEach(iterator)

.FOReach() usage

  • Iterates over a list of elements, giving them one at a time to an iterator function.
  • Each invocation of iterator is called with three arguments: element, index, list. If list is an Object, iterator's arguments will be value, key, list.

 

var each = function(list, iterator) {
  //function body here to make each work
};

//Example invocation:
pocketmons.each(function(element){
    console.log(element);
});
//'Charisaur'
//'Bulbazard'
//'Twomew'
 
  • Iterates over a list of elements, giving them one at a time to an iterator function.

list.each = function(callback) {
  //loop through the collection
  //invoke the callback on each element in the collection
};

.FOREACH() DEFINED

 
  • Iterates over a list of elements, giving them one at a time to an iterator function.

list.each = function(callback) {

    for (var i = 0; i < list.length; i++) {
      callback(list[i], i, list);
    };

};

.FOREACH() DEFINED

Looping with .Foreach() 

// Let's use _.each to solve this problem:

var addTwoToAllElements = function(arr){
    _.each(arr, function(val, index, collection){
        collection[index] = val + 2;
    });
};

var arr = [1, 2, 3, 4, 5];
addTwoToAllElements(arr);
console.log(arr) // [3, 4, 5, 6, 7];

Let's solve a problem using each.

// Let's use .forEach to solve this problem:

var addTwoToAllElements = function(arr){
    arr.forEach(function(val, index, collection){
        collection[index] = val + 2;
    });
};

var arr = [1, 2, 3, 4, 5];
addTwoToAllElements(arr);
console.log(arr) // [3, 4, 5, 6, 7];
var pocketmon = ['Charisaur', 'Bulbazard', 'Twomew'];
var stokedFunc = function(val){
  return val + '!!!';
};
var stokedPocketmon = pocketmon.map(stokedFunc);

.MAP() usage

//list.map(iterator)
console.log(stokedPocketmon);
//['Charisaur!!!','Bulbazard!!!','Twomew!!!']

.map() defined


list.map = function(iterator) {
  var result = []; // make a new array

  this.forEach(function(item, index) {
    result.push(iterator(item, index));
  });

  return result;
};
  • Produces a new array of values by mapping each value in list through a transformation function (iterator).
  • Each invocation of iterator is called with two arguments: (element, index). 

 

LOOPING WITH .MAP

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};

var animalNames = ['Frog', 'Falcon', 'Fox'];
// Remember coding WITHOUT Underscore?
var farm = []; 

for(var i = 0; i < animalNames.length; i++){ 
  farm.push(AnimalMaker(animalNames[i])); 
}

.map vs .FoReach 

function AnimalMaker(name) {
  return { 
    speak: function () { 
      console.log("my name is ", name); 
    } 
  };
};

var animalNames = ['Frog', 'Falcon', 'Fox'];

// Mapping builds up an array and returns it.
var farm = animalNames.map(function (name) {
  return AnimalMaker(name);
});

// A forEach loop returns nothing.
// Just use it to iterate over an array.
farm.forEach(function (animal) {
  animal.speak();
});

I want to simply loop through an array or object.

I want a new array based on an existing one.

Key takeaways

  • Native methods are functions available on an Objects prototype. They are tools that are at your service to simplify programming
  • .forEach basically does what a for loop does 
    • you can't return anything from its callback!
  • .map produces a new array 
    • it's callback requires a return statement!

Questions?

Native Functions

By telegraphprep

Made with Slides.com

Native Functions

An introduction to functional programming

  • 811

More from telegraphprep