Lab 3 - JavaScript Basics

Objective: Practice JavaScript fundamentals with objects, properties, and functions in GEE.

What You'll Learn

  • Create and use JavaScript objects to store data
  • Access object properties using dot notation and bracket notation
  • Work with arrays and access individual elements
  • Call functions and pass arguments
  • Write effective code comments

Building On Previous Learning

In Lab 1 and Lab 2, you used code we provided. Now you'll learn the JavaScript fundamentals that make that code work, so you can write your own scripts from scratch.

Why This Matters

JavaScript is the language of Google Earth Engine. Understanding these fundamentals allows you to:

  • Store and organize data: Objects hold metadata about study areas, sensor parameters, etc.
  • Reuse code: Functions let you perform the same operation on different inputs
  • Debug errors: Understanding syntax helps you fix problems quickly
  • Read documentation: GEE documentation assumes JavaScript knowledge

Before You Start

  • Prerequisites: Complete Labs 1-2 and review the JavaScript basics primer in the module resources.
  • Estimated time: 60 minutes
  • Materials: Earth Engine Code Editor access, a keyboard-friendly workstation, and your syntax cheat sheet from the lecture.

Key Terms

Object
A JavaScript data structure that stores related data as key-value pairs (properties).
Property
A named value within an object. Accessed using dot notation: object.property
Array
An ordered list of values, accessed by index number starting at 0: array[0]
Function
A reusable block of code that takes inputs (arguments) and returns an output.
Argument
A value passed into a function when you call it: functionName(argument)

Introduction

In this lab, you will continue off the lessons learned in this module and challenge yourself to extend the base code and expand your JavaScript basic programming skills in Google Earth Engine. At the end of the lab, you will submit a link to your Google Earth Engine Code. Be sure to comment your code and use best practices.

Lab Instructions

  1. Part 1 - Getting Started

    Go to https://code.earthengine.google.com/9c89c36a78f913cc7be1845e6c47ebb3

    Save a copy of the Earth Engine Code in your Repositories.

    Tip: Use File → Save as to save a copy to your own repository. This ensures you won't lose your work.

  2. Part 2 - Understanding Objects

    In line 4 of this code, you defined an object with three properties. Objects are a fundamental part of JavaScript. They represent real-world entities, such as user data, files, or information about a list of items. Objects are composed of properties, which are key-value pairs containing data.

    In your Object cityData you stored three properties: the city, coordinates, and population. This data is available for you to use in your code. 

    var cityData = {
    city: 'Gainesville',
    coordinates: [-82.3248, 29.6516],
    population: 141085
};

    Understanding the structure:

    • city → A string (text) value
    • coordinates → An array (list) containing [longitude, latitude]
    • population → A number value

  3. Part 3 - Accessing Object Properties

    In JavaScript, you can access an object's properties in several ways. The most common method is using the dot operator (.). To use it, type the object name followed by a dot (.) and the property name.

    For example, to get the city property of the cityData object, you would type:

    cityData.city

    Result

    This returns: "Gainesville"

  4. Challenge 1: Print the City Name (10 Points)

    Challenge Task

    Using the greet function, print to the console "Hello Gainesville", retrieving "Gainesville" from the cityData object's city property.

    Hint: To do this, you will need to both call the function and pass through the city property of cityData.

    Think About It

    The greet function expects one argument. What should you pass to it?

  5. Part 4 - Exploring Array Properties

    Now explore the properties of cityData. In your code on line 9, you print cityData to the console and see that there are three properties. The second property is called coordinates and is an array.

    If you add brackets to the object's property, you can access individual parts of the array. Try this line of code: 

    print(cityData.coordinates[0]);

    This will output to the console the longitude of cityData. Try changing the 0 to a 1 and see what happens.

    Array Indexing: Arrays start counting at 0, not 1!

    • coordinates[0] = First element (longitude)
    • coordinates[1] = Second element (latitude)

  6. Challenge 2: Center the Map (10 Points)

    Challenge Task

    Using the method Map.setCenter(lon, lat, zoom), make a line of code that calls the longitude and latitude from the cityData properties and zooms to Gainesville at a zoom level of 12.

    Example format:

    Map.setCenter(longitude, latitude, 12);

    Replace longitude and latitude with the appropriate object property access.

  7. Challenge 3: Comment Your Code (10 Points)

    Challenge Task

    Comment your code explaining what was done. Use both single-line (//) and multi-line (/* */) comments to document:

    • What each variable represents
    • What each function does
    • How you solved the challenges

    Comment Best Practices

    // Single-line comment for short explanations

/* Multi-line comments are useful
   for longer descriptions or
   header blocks */

// Good: Explain WHY, not just WHAT
// This sets the map to Gainesville to verify our coordinates are correct
Map.setCenter(...);

Key Concepts

JavaScript Objects

Objects store related data and functions together:

var myObject = {
    property1: 'value1',
    property2: 'value2',
    property3: [1, 2, 3]
};

Accessing Properties

Use dot notation or bracket notation:

myObject.property1        // Dot notation
myObject['property1']     // Bracket notation
myObject.property3[0]     // Access array element

Functions

Functions are reusable blocks of code:

function myFunction(parameter) {
    // Do something with parameter
    return result;
}

// Call the function
myFunction(value);

Check Your Understanding

  1. What is the difference between cityData.city and cityData['city']?
  2. If an array has 5 elements, what index number accesses the last element?
  3. Why do we use coordinates[0] for longitude instead of coordinates[1]?
  4. What happens if you forget the parentheses when calling a function?

Hint: Try each of these in the Code Editor to see what happens!

Troubleshooting

Problem: "undefined" appears in the Console

Solution: You likely misspelled a property name. JavaScript is case-sensitive: City is not the same as city.

Problem: "is not a function" error

Solution: Make sure you're calling the function with parentheses: greet(argument) not greet.

Problem: Map doesn't center on Gainesville

Solution: Check that you're using the correct array indices (0 for longitude, 1 for latitude) and in the right order for Map.setCenter(lon, lat, zoom).

Common Mistakes to Avoid

  • Missing quotes around strings: 'Gainesville' not Gainesville
  • Array index off by one: Arrays start at 0, so index 1 is the SECOND element
  • Forgetting commas: Each property in an object needs a comma after it (except the last one)
  • Using = instead of : Inside objects, use colon: city: 'Gainesville'

Key Takeaways

  • Objects store related data as named properties
  • Use object.property or object['property'] to access values
  • Arrays use numeric indices starting at 0
  • Functions are called with parentheses and can receive arguments
  • Comments help you and others understand your code

📋 Lab Submission

Save and submit your script as a URL.

Subject: Lab 3 - JS Basics - [Your Name]

Include in your email:

  • The shareable link to your GEE script
  • Confirmation that all three challenges are completed
  • Screenshot of your Console output showing "Hello Gainesville"
  • Screenshot of the map centered on Gainesville

Grading:

  • Challenge 1 (10 points): Correctly use the greet function with cityData.city
  • Challenge 2 (10 points): Map.setCenter uses coordinates array correctly
  • Challenge 3 (10 points): Code is properly commented and documented