JavaScript is a scripting language supported by all browsers. Browsers don't speak Ruby, so if we want to implement client-side logic that runs in the browser, we need to express ourselves in JavaScript.

Goals

You should have a strong understanding of the following language features/concepts:

• Writing and reading variables
• Defining and calling functions
• Control flow: if, for, switch, ...
• Functions and function pointers
• Iterating over lists
• Throwing and catching errors
• The arcane rules around this.

Coming from Ruby you should notice that parentheses (()) are not optional in JavaScript function calls. Understand the difference between function pointers (foo) and function invocations (foo()). Notice the parallels between blocks ("procs", "lambdas") in Ruby and function pointers in JavaScript

Resources

• MDN JavaScript Basics Archive : You should understand the basic language concepts.
• ES6 classes Archive : You should understand the class keyword, constructors, instance methods, class methods, super, getters and setters.

Exercises

First steps

Try the following in a browser tab:

• Press Ctrl+Shift+J to open the developer tools' console.
• Assign some variables.
• Print a variable to the console using console.log().
• Create an array and iterate over it. Print each element to the console.
• Create an empty object and set/get some properties on it.
• Define a function that prints its first argument to the console.
• Call that function from the loop iterating the array.

Working with lists

• Write your own version of the Array.map function Archive . Name it myMap. It should work exactly like Array.map, but should be your own code. The function can be a new instance method of all arrays (by patching Array.prototype) or a stand-alone function that takes an array argument.
• Write a JavaScript function mySelect that works like Ruby's Enumerable#select Archive , only as a JavaScript equivalent. The function can be a new instance method of all arrays (by patching Array.prototype) or a stand-alone function that takes an array argument.

Did you learn how this works?

Execute the code snippets below in your browser console (one by one).

First, define this object:

Copy
var student = {
  name: 'Anna',
  sayHello: function() { console.log("Hello, my name is", this.name) }
}

What does the following print?

Copy
student.sayHello()

What does the following print? Why?

Copy
student.sayHello

What does the following print? Why?

Copy
var fn = student.sayHello
fn()

What does the following print? Why?

Copy
var fn = student.sayHello.bind(student)
fn()

setTimeout() Archive executes a function after some time.

What does the following print in 1 second? Why?

Copy
setTimeout(student.sayHello, 1000)

What does the following print in 1 second? Why?

Copy
setTimeout(function() { student.sayHello() }, 1000)

What does the following print in 1 second? Why?

Copy
setTimeout(student.sayHello.bind(student), 1000)

Now we use another object:

Copy
var student = {
  name: 'Anna',
  sayHello: function() { console.log("Hello, my name is", this.name) },
  sayHelloInOneSecond: function() {
    console.log("The value of this is", this)
    setTimeout(this.sayHello, 1000)
  }
}

What does the following print? Why?

Copy
student.sayHelloInOneSecond()

Can we fix it like this? Why not?

Copy
student.sayHelloInOneSecond.bind(student)()

Now we use another object:

Copy
var student = {
  name: 'Anna',
  sayHello: function() { console.log("Hello, my name is", this.name) },
  sayHelloInOneSecond: function() {
    console.log("The value of this is", this)
    setTimeout(function() { this.sayHello() }, 1000)
  }
}

What does the following print? Why?

Copy
student.sayHelloInOneSecond()

Now we use another object:

Copy
var student = {
  name: 'Anna',
  sayHello: function() { console.log("Hello, my name is", this.name) },
  sayHelloInOneSecond: function() {
    console.log("The value of this is", this)
    setTimeout(() => { this.sayHello() }, 1000)
  }
}

What does the following print? Why?

Copy
student.sayHelloInOneSecond()

Address search

In Ruby basics you built a searchable address book.

Port your code to JavaScript.