CS133JS Beginning Programming: JavaScript

Combining JavaScript Statements

Table of Contents

Announcements

• Today, Tuesday, November 28 from 2:00 to 4:00 pm there will be a Study Jam in the library. The library will provide free pizza and snacks for students as you study for finals. In addition to food and drink, there will be research help, tutoring, relaxation and yoga tips, and therapy dogs.

• Tomorrow, Wednesday, November 29 from 9:00 am to 2:00 pm there is an Advising & Financial Aid Reg Fest
  Questions about financial aid, winter term registration and what courses to enroll in? Join us for a drop-in event with academic advising, financial aid and student services representatives. Can't make it? Student Services departments are available on drop-in Monday-Friday.

• Any late or extra credit assignments are due by the end of the day on Monday, 12/4/23.

• CS 235AM, Mobile App Development is being offered next term (Winter 2024). You'll learn to make apps for iOS and Android using JavaScript.

Q and A

• How is lab 8 going?

  • Only part 1 is required. Is anyone doing part 2?

  • No code review required, production version due Thursday.

• How is the term project going?

  • Beta due today (Forum submission for your lab partner).

  • Code review for your lab partner due Thursday.

  • Production version due Monday.

• Final quiz

  • There is a, short, ungraded practice quiz open now.

  • Look at the review suggestions in this week's overview.

  • The final quiz is at the regular class time next Tuesday, December 5. Or, take it in the Instructional Testing Center, Monday 12/4 through Wednesday 12/6.

  • Any questions?

Combined Statements

In JavaScript, as in most programming languages you can combine multiple operations into one statement—meaning you can do multiple things in one line of code. For example, here are a series of JavaScript statements to square a number entered by a user:

let aNumber = 0;                       // declare and initialize a variable
aNumber = prompt("Enter a number");     // get input
let numberSquared = aNumber * aNumber;  // square it
console.log(numberSquared);             // output the result

We can combine some of the operations and still do exactly the same thing:

let aNumber = prompt("Enter a number");  // declare a variable, get input
console.log(aNumber * aNumber);          // square it, output the result

Combined Statements with Arrays

The possibility for combining operations gets more "interesting" (complicated?) when we are using arrays. For example, we'll make an array of animals and then output all the animals:

let farmAnimals = [];       // declare an array
let animal1 = "cow";        // declare and initialze a variable with a value
farmAnimals.push(animal1);  // add an element to the array with the variable's value
let animal2 = "chicken";    
farmAnimals.push(animal2);
let animal3 = "horse";
farmAnimals.push(animal3);

for (let i = 0; i < farmAnimals.length; i++) {  // loop through the index numbers
  let animal = farmAnimals[i];                  // get the value from an elemnet
  console.log(animal);                      // output the value
}

We can do exactly the same thing like this:

let farmAnimals = ["cow", "chicken", "horse"]; // declare and initialize
for(let animal of farmAnimals) {                   // loop through the animals
  console.log(animal);                          // output the value
}

Here's another example, the Olympic Trials qualifying speed for the women's 100m dash is 11.15 seconds. We'll search an array of times for the runners who qualify:

const QUALIFYING_TIME = 11.15;
// parallel arrays
let times = [10.35, 12.92, 9.87, 11.16,12.01, 11.15];  // times in seconds
let runners = ["Emily", "Hannah", "Madison", "Ashley", "Sarah","Alexis"]; // runners
for(let i = 0; i < times.length; i++) {    // loop through the array using it's index
  let time = times[i];                     // copy array elements into variables
  let runner = runners[i];
  if (time <= QUALIFYING_TIME) {           // check for a qualifying time
     console.log(runner);                  // output the name of the qualifying runner
  }
}

We can simplify this by directly working with the array elements instead of copying them into variables:

const QUALIFYING_TIME = 11.15;
// parallel arrays--runners and times are at the same indecies
let times = [10.35, 12.92, 9.87, 11.16,12.01, 11.15];  // times in seconds
let runners = ["Emily", "Hannah", "Madison", "Ashley", "Sarah","Alexis"]; // runners
for(let i = 0; i < times.length; i++) {
  if (times[i] <= QUALIFYING_TIME) {
     console.log(runners[i]);
  }
}

Combined Statements with Objects

Objects provide even more opportunities for combining operations. For example we could combine the parallel arrays containing runners and their times into one array that contains runner objects:

const QUALIFYING_TIME = 11.15;
// Array of runner objects with name and time properties
let runners = [ {name:"Emily", time:10.35}, {name:"Hannah", time:12.92}, {name:"Madison", time:9.87}, {name:"Ashley", time:11.16}, {name:"Sarah", time:12.01},{name:"Alexis", time:11.15}];  

// Find the qualifying runners and display them on the console
for(let i = 0; i < runners.length; i++) {
  let runner = runners[i];       // copy the runner object at element i to a variable
  let name = runner.name;        // copy the runner's name to a variable
  let time = runner.time;        // copy the runner's time to a variable
  if (time <= QUALIFYING_TIME) {
     console.log(name);
  }
}

We can simply the code in the loop by combining operations to directly operate on objects in array elements:

// Find the qualifying runners and display them on the console
for(let i = 0; i < runners.length; i++) {
  if (runners[i].time <= QUALIFYING_TIME) {
     console.log(runners[i].name);
  }
}

We can simplify this loop further by using a for-of loop:

xxxxxxxxxx
// Find the qualifying runners and display them on the console
for(let runner of runners) {
  if (runner.time <= QUALIFYING_TIME) {
     console.log(runner.name);
  }
}

Combined Statements with the DOM

Since the objects in the Document Object Model are just JavaScript objects, we can combine multiple statements the operate on the DOM into one statement in the same way we would when working with any other JavaScript objects. Here's an example of setting the text content of an HTML element:

xxxxxxxxxx
<p id="message"></p>
<script>
  let message = 
      "Alone, we can do so little; together we can do so much. -- Helen Keller"
  let paragraph = document.getElementById("message");
  paragraph.innerHTML = message;
</script>

We can combine this all into one statement:

xxxxxxxxxx
<p id="message"></p>
<script>
  document.getElementById("message").innerHTML = 
      "Alone, we can do so little; together we can do so much. -- Helen Keller";
</script>

Beginning JavaScript Lecture Notes by Brian Bird, 2023, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.