150 JavaScript basics [2d]

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 Show archive.org snapshot : You should understand the basic language concepts.
• ES6 classes Show archive.org snapshot : 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 Show archive.org snapshot . 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 Show archive.org snapshot , 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:

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

What does the following print?

Copystudent.sayHello()

What does the following print? Why?

Copystudent.sayHello

What does the following print? Why?

Copyvar fn = student.sayHello
fn()

What does the following print? Why?

Copyvar fn = student.sayHello.bind(student)
fn()

setTimeout() Show archive.org snapshot executes a function after some time.

What does the following print in 1 second? Why?

CopysetTimeout(student.sayHello, 1000)

What does the following print in 1 second? Why?

CopysetTimeout(function() { student.sayHello() }, 1000)

What does the following print in 1 second? Why?

CopysetTimeout(student.sayHello.bind(student), 1000)

Now we use another object:

Copyvar 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?

Copystudent.sayHelloInOneSecond()

Can we fix it like this? Why not?

Copystudent.sayHelloInOneSecond.bind(student)()

Now we use another object:

Copyvar 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?

Copystudent.sayHelloInOneSecond()

Now we use another object:

Copyvar 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?

Copystudent.sayHelloInOneSecond()

Address search

In Ruby basics you built a searchable address book.

Port your code to JavaScript.