javascript.md

JavaScript exercises

• Fill the missing bits
  • Functions as arguments
  • Dynamically create functions
  • Deserialize JSON
• ECMAScript 2015+
  • Template literals
  • Arrow functions
  • for...of
  • Array destructuring
  • Object destructuring
  • Optional chaining and the nullish coalescing operator
  • Async functions

Fill the missing bits

Functions as arguments

Open in CodePen

// Let's define a couple of arithmetic function.
function add(a, b) {
  return a + b;
}
function multiply(a, b) {
  return a * b;
}

// Define a function that takes two numbers
// and a function to apply to those numbers.
function compute(/* TODO: give me some arguments! */) {
  // TODO: implement me!
}

// Call compute with "add".
let value = compute(2, 4, add);
console.log(value); // 6

// Call compute with "multiply".
value = compute(2, 4, multiply);
console.log(value); // 8

Dynamically create functions

Open in CodePen

// Implement this function in a way that makes the rest of the code work.
function createMultiplier(/* TODO: give me some arguments! */) {
  // TODO: implement me!
}

const multiplyByTwo = createMultiplier(2);
console.log(multiplyByTwo(1)); // 2
console.log(multiplyByTwo(2)); // 4
console.log(multiplyByTwo(3)); // 6

const multiplyByFive = createMultiplier(5);
console.log(multiplyByFive(1)); // 5
console.log(multiplyByFive(2)); // 10
console.log(multiplyByFive(3)); // 15

This type of function is called a closure.

Deserialize JSON

Open in CodePen

const personJson = '{"first":"James","last":"Bond"}';

// Extract the person's first and last names to new variables
// to make this code work, without modifying the rest of the code.

console.log(`My name is ${last}, ${first}, ${last}`);

ECMAScript 2015+

Learn how to use the modern JavaScript syntax.

Template literals

Open in CodePen

const firstName = 'John';
const lastName = 'Doe';

// Use a template literal instead of string concatenation.
console.log('Hello, I am ' + firstName + ' ' + lastName + '!');

Arrow functions

Open in CodePen

const people = [
  { first: "John", last: "Doe" },
  { first: "Bob", last: "Martin" },
  { first: "Alice", last: "Krauss" }
];

// Convert this function to an arrow function and save 2 lines.
const lastNames = people.map(function(person) {
  return person.last;
});

console.log(lastNames); // [ "Doe", "Martin", "Krauss" ]

for...of

Open in CodePen

let fruits = [ 'apple', 'pear', 'lemon' ];

// Use a for...of loop instead of iterating with an index.
for (let i = 0; i < fruits.length; i++) {
  const fruit = fruits[i];
  console.log(`${fruit} is a fruit`);
}

Array destructuring

Open in CodePen

const values = [ 23, 61, 42, 51, 12 ];

// Use a destructuring assignment to convert the next 2 lines
// to a single expression without modifying the rest of the code.
const firstValue = values[0];
const otherValues = values.slice(1);

console.log(`The first value is ${firstValue}`);
console.log(`The other values are ${otherValues.join(', ')}`);

Object destructuring

Open in CodePen

const person = {
  first: 'John',
  last: 'Doe',
  address: {
    city: 'Yverdon',
    street: 'Avenue des Sports',
    zip: 1400
  }
};

function logHabitation(person) {
  // Use a destructuring assignment in the function's argument to
  // remove the next 2 lines, without modifying the console.log statement.
  const first = person.first;
  const city = person.address.city;
  console.log(`${first} lives in ${city}`);
}

logHabitation(person); // "John lives in Yverdon"

Optional chaining and the nullish coalescing operator

Open in CodePen

const bob = {
  name: 'Bob',
  address: null
};

const alice = {
  name: 'Alice',
  address: {
    poBox: '000'
  }
};

const chuck = {
  name: 'Chuck',
  address: {
    city: 'Dallas'
  }
}

// Simplify this function using optional chaining and the nullish coalescing
// operator.
function whereDoTheyLive(person) {
  if (!person) {
    return 'Unknown';
  }

  const address = person.address;
  if (!address) {
    return 'Unknown';
  }

  const city = address.city;
  if (!city) {
    return 'Unknown';
  }

  return city;
}

console.log(whereDoTheyLive(bob));    // "Unknown"
console.log(whereDoTheyLive(alice));  // "Unknown"
console.log(whereDoTheyLive(chuck));  // "Dallas"

Async functions

Open in CodePen

advise();

// Get rid of the .then calls and callback functions by using async/await.
function advise() {
  fetch('https://api.adviceslip.com/advice')
    .then(res => res.json())
    .then(({ slip: { advice } }) => console.log(advice));
}