Group session July 1st

Lesson Intro

Derek has a lot of very interesting stuff on his desk. Let’s talk about it!

Also: Because this is JavaScript (and everything is secretly an object) – an array is no different – and it has many very cool array functions (methods).

Ivy says

Will ya set a timer and tell us how long it takes to watch this video and do the follow-along parts? Thanks!

We find ourselves using these ones the most:

array.from(), array.isArray(), array.length

array.push(), array.shift()

array.join(), array.reverse(), array.find(), array.filter(), array.forEach(), array.map(), array.reduce()

Now, we – are showing you these – in order – on purpose. So, we don’t want to hear about all of the “other things” that you tried. Just stick with these. Today is all about these.

We expect map and reduce to be pretty tricky! We’ll be talking about those in detail later — but try and try them all out.

Exercises

  1. Watch the video and follow along

    Make sure to take a break – and make sure your data is unique to you.

    120 minutes suggested
  2. Try out all of the array properties and methods

    Get with a buddy and go over them one by one. Try and find a real-world use case for each / based on the projects you are building.

    120 minutes suggested

Newly introduced language features

  1. JavaScript

    Array filter

    // array.filter(conditionFunction); // returns a new array of items that match the condition
    
    var numbers = [5, 10, 35, 12, 45];
    
    var higherNumbers = numbers.filter( function(item, index, array) {
    	if (item > 30) {
    		return item;
    	}
    });
    
    console.log( higherNumbers ); // [35, 45]
    
    
    
    function isHighNumber(number) {
    	if (item > 30) {
    		return item;
    	}
    }
    
    var higherNumbers = numbers.filter(isHighNumber);
    
    console.log( higherNumbers ); // [35, 45]
  2. JavaScript

    Arrow functions

    const apes = ['Orangutans', 'Gorilla', 'Chimpanzees', 'Humans'];
    
    // classic foreach method with anonymous function
    apes.forEach( function(ape) {
      return console.log('1', ape);
    });
    
    // a regular function
    function printApe(ape) {
      return console.log('2', ape);
    }
    
    // array.forEach method with named function passed in
    apes.forEach( printApe ); // does this feel mysterious?
    
    // an "arrow" function as an "anonymous" callback function 
    apes.forEach( (ape) => console.log('3', ape) );
    // implicit return
    // (starting to be the default in MDN documentation)
    
    // you can leave out the (arg) if there's only one
    apes.forEach( ape => printApe(ape) );
    
    // if there is no argument you need empty parenthesis
    apes.forEach( () => console.log('4') );
    
    // if you open up a codeblock, you need to explicitly return again
    apes.forEach( (ape)=> {
      return console.log('5', ape);
    });
    
    // What ^ is happening here exactly?
    apes.forEach( function(ape) {
      return console.log('6', ape);
    });
    // what is different about the syntax?
    

    The 2015 edition of the ECMAScript specification (ES6) added arrow function expressions to the JavaScript language. Arrow functions are a new way to write anonymous function expressions

    Sidenote for later:

    • ES1: June 1997
    • ES2: June 1998
    • ES3: Dec. 1999
    • ES4: Abandoned
    • ES5: December 2009
    • ES6: June 2015

    But let’s not call these things ES-whatevers and instead call them by their year. It seemed like they were trying to get people hyped on “ES6” like how they did with HTML5 and CSS3, but there’s not going to be an HTML6 or ES7. We’ll just keep adding to it in pieces (or so they say). This way you can see exactly what features are in what spec and which of them are getting implemented into the browsers (when they eventually do).

    The history is fun, but the only thing you really need to concern yourself with is ES2015 and onward.

    ES2015 is when they added arrow functions and it’s not like they just worked on the first day of June. It took many more years after the specification was released for all the browsers to implement it. You can consider it the standard at this point. Anything ES2015 is available for you to use without any transpilation.

    Sandbox
Group session July 1st