Today's Topics

• Review at-home challenge from last class
• Arrow Functions
• Arrow Functions and this
• Array Helpers
• Altering Arrays

Arrow Functions

Arrow Functions

var getMessage = function(name) {
  return 'Hello ' + name + '!';
}								

const getMessage = name => `Hello ${name}!`;

Arrow Functions and this

The this keyword

The this keyword determines context

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

obj.getName(); // Zeta

There's this One Problem

Binding and changing this in functions is one of the most common JavaScript errors

What is this problem?

Let's take a look

Can arrow functions help?

• Arrow functions do not have a this 🌟
• The value of this is lexically fetched from the scope the arrow function sits inside

Array Helpers

Array Helpers

Tons of new methods that can be applied to arrays

Array Helpers

Moving away from for loops

• Easier for other devs to immediately read and understand
• Encourage functional programming
• More compact — why write more code?
• More maintainable and scalable

forEach

var names = ['Morgan', 'Taylor', 'Lesley'];

for (var i = 0; i < names.length; i++) {
  console.log(names[i]);
}

const names = ['Morgan', 'Taylor', 'Lesley'];

names.forEach(function(name, index, array) {
  console.log(name);
});

forEach

const numbers = [123, 500, -50, 82, 8];
numbers.forEach(function(number, index, array) {
  console.log(number > 50); // can you get this on one line?
});

every

var students = [
  { name: 'Morgan', present: true },
  { name: 'Sam', present: false },
  { name: 'Taylor', present: true }
];
var allPresent = true;
for (var i = 0; i < students.length; i++) {
  if (!students[i].present) {
    allPresent = false;
    break;
  }
}
console.log(allPresent); // false

const students = [
  { name: 'Morgan', present: true },
  { name: 'Sam', present: false },
  { name: 'Taylor', present: true }
];
const allPresent = students.every(student => student.present);
console.log(allPresent); // false

every

const numbers = [123, 500, -50, 82, 8];
const allLargerThan50 = numbers.every(number => number > 50);
console.log(allLargerThan50); // false

some

var students = [
  { name: 'Morgan', present: true },
  { name: 'Sam', present: false },
  { name: 'Taylor', present: true }
];
var somePresent = false;
for (var i = 0; i < students.length; i++) {
  if (students[i].present) {
    somePresent = true;
    break;
  }
}
console.log(somePresent); // true

const students = [
  { name: 'Morgan', present: true },
  { name: 'Sam', present: false },
  { name: 'Taylor', present: true }
];
const somePresent = students.some(student => student.present);
console.log(somePresent); // true

some

const numbers = [123, 500, -50, 82, 8];
const someLargerThan50 = numbers.some(number => number > 50);
console.log(someLargerThan50); // true

filter

const filteredArr = arr.filter(iteratorFunction);

var users = [
  { username: 'ryan10', active: true },
  { username: 'morgan', active: false }
];
var activeUsers = [];
for (var i = 0; i < users.length; i++) {
  if (users[i].active) {
    activeUsers.push(users[i]);
  }
}
console.log(activeUsers);

const users = [
  { username: 'ryan10', active: true },
  { username: 'morgan', active: false }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

filter

const numbers = [123, 500, -50, 82, 8];
const numbersLargerThan50 = numbers.filter(number => number > 50);
console.log(numbersLargerThan50); // [ 123, 500, 82 ]

filter() Practical Example

Filtering API Responses

API Response Example »
CodePen Example »

map

You can assign the resulting array to a variable:
const modifiedArr = arr.map(iteratorFunction);

var numbers = [2, 6, 10];
var halvedNumbers = [];

for (var i = 0; i < numbers.length; i++) {
  halvedNumbers.push(numbers[i] / 2);
}

console.log(halvedNumbers); // 1, 3, 5

const numbers = [2, 6, 10];

const halvedNumbers = numbers.map(number => number / 2);

console.log(halvedNumbers); // 1, 3, 5

No need to create an empty array first! 🎉

map

const numbers = [123, 500, -50, 82, 8];
const decrementedNumbers = numbers.map(number => number - 1);
console.log(decrementedNumbers); // [ 122, 499, -51, 81, 7 ]

find

const matchingObject = arr.find(iteratorFunction);

var jobs = [
  { title: 'Electrician' },
  { title: 'Developer' },
  { title: 'Barista' }
];
var devJob;
for (var i = 0; i < jobs.length; i++) {
  if (jobs[i].title === 'Developer') {
    devJob = jobs[i];
    break;
  }
}
console.log(devJob); // { title: 'Developer' }

const jobs = [
  { title: 'Electrician' },
  { title: 'Developer' },
  { title: 'Barista' }
];
const devJob = jobs.find(job => job.title === 'Developer');
console.log(devJob); // { title: 'Developer' }

find

arr.find(iteratorFunction)

const jobs = [
{ title: 'Electrician' },
{ title: 'Developer' },
{ title: 'Barista' }
];
const devJob = jobs.find(job => job.title === 'Developer');
console.log(devJob); // { title: 'Developer' }

find() Practical Example

Single-page web apps

findIndex

const matchingIndex = arr.findIndex(iteratorFunction);

var numbers = [ 25, 30, 35, 40, 45 ];
var firstIndex;
for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > 33) {
    firstIndex = i;
    break;
  }
}
console.log(firstIndex); // 2

const numbers = [ 25, 30, 35, 40, 45 ];
const firstIndex = numbers.findIndex(number => number > 33);
console.log(firstIndex); // 2 (the location of 35)

findIndex

arr.findIndex(iteratorFunction)

const numbers = [ 25, 30, 35, 40, 45 ];
const firstIndex = numbers.findIndex(number => number > 33);
console.log(firstIndex); // 2 (the location of 35)

reduce

const reducedValue = arr.reduce(iteratorFunction, initialValue);

var numbers = [2, 6, 10];

var sum = 0;
for (var i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log(sum); // 18

const numbers = [2, 6, 10];

const sum = numbers.reduce(function(currentSum, number) {
  return currentSum + number;
}, 0);

console.log(sum); // 18

reduce

// when iteratorFunction is a reference:
arr.reduce(iteratorFunction, initialValue);

// or when iteratorFunction isn't a reference:
arr.reduce((calculatedValue, element, index, array) => { }, initialValue);

reduce is slightly different from the other array helpers because it takes two parameters:

1. iteratorFunction
   • The iterator function requires a calculatedValue parameter, which is modified each time and returned each iteration
2. initialValue — used during the first iteration to calculate the next iteration's calculatedValue

reduce in action

arr.reduce(iteratorFunction, initialValue);

const numbers = [1, 5, 10];

const sum = numbers.reduce(function(calculatedValue, number) {
    return calculatedValue + number;
}, 0); // 0 is the initialValue

console.log(sum); // 16

Let's take a look »

Map and Reduce

A Sandwich Metaphor

reduce

Use it creatively and ace your next interview

• Write a function, isBalanced, to determine if an expression's parentheses are balanced. For example, (())()() would be balanced, while ()(() and )( would not.

var parens = '(())()()';
var parensFalse = '()(()';
var parensFalse2 = ')(';

console.log(isBalanced(parens)); // true
console.log(isBalanced(parensFalse)); // false
console.log(isBalanced(parensFalse2)); //false

function isBalanced(expression) {
  var retVal = 0;
  var chars = expression.split('');
  for (var i = 0; i < chars.length; i++) {
    var char = chars[i];
    if (retVal >= 0) {
      if (char === '(') {
        retVal++;
      } else if (char === ')') {
        retVal--;
      }
    }
  }
  return retVal === 0;
}

Altering Arrays

Altering Arrays

New methods that alter existing arrays

fill

• If no startIndex or endIndex is given, the whole array is filled with the same value

var numbers = [1, 2, 3];

for (var i = 0; i < numbers.length; i++) {
  numbers[i] = 4;
}

console.log(numbers); // [4, 4, 4]


var numbers2 = [1, 2, 3];
var startIndex = 1;
var endIndex = 2;
for (var j = 0; j < numbers2.length; j++) {
  if (j >= startIndex && j < endIndex) {
    numbers2[j] = 4;
  }
}

console.log(numbers2); // [1, 4, 3]

const numbers = [1, 2, 3];
const numbers2 = [1, 2, 3];

numbers.fill(4);
console.log(numbers); // [4, 4, 4]

numbers2.fill(4, 1, 2);
console.log(numbers2); // [1, 4, 3]

copyWithin

• If no startIndex or endIndex is given, the whole array is filled with the same value

const spells = ['hocus', 'pocus', 'wingardium', 'leviosa'];

spells.copyWithin(2, 0);
console.log(spells);
// ['hocus', 'pocus', 'hocus', 'pocus']