Teaching JavaScript to Gender Studies Majors

I wrote my first line of code when I was 19. My mother has a degree in computer engineering and mathematics, but growing up as a girl interested in reading and writing and drawing it never dawned on me, let alone anyone else, that I could want to learn, benefit from learning, or even enjoy coding. Three years later and I’m on my way to becoming a full stack web developer. But I look around at my friends, many of them 2018 college graduates with degrees in the arts and humanities, and I wonder how they could benefit from learning even the most basic fundamentals of programming.

These days my little cousins are taught JavaScript in their elementary school enrichment programs while my peers feel disenfranchised, condescended to, and manipulated by a tech culture that can lean hypermasculine and cutthroat. To young people, particularly young women, the tech industry fails to live up to its ideal of an open forum for the spread of ideas and transparent, democratic investment and crowdfunding. Many would feel uncomfortable even formulating opinions about political policy or investment related to the tech industry because of their lack of technical knowledge. There are resources for people who want to change their careers, but not for people who just want to understand what programming is or simply gain the confidence that comes with knowing oneself to be capable of it.

I was excited when my roommate, a recent graduate in Gender Studies and Creative Writing, was assigned to learn HTML and CSS for her job at an independent magazine. The magazine’s founder taught herself to code by building their website entirely herself. And while the site could be rewritten to be more efficient or comprehensible, it stands as a testament to the creativity and effort that was poured into it. My roommate has now learned an impressive amount of HTML and CSS, and I think more young women can benefit from doing the same, and not only for hypertext but for algorithmic languages as well.

So I’m sharing these short programming examples that will walk you through some of the basics of JavaScript syntax. Each question has a box where you can test out the code. You can also refer to a list of further resources I’ll include below. Happy coding!

Q1

1. Strings vs. Numbers & “Print”

Variables stored in JavaScript can have one of several data types. Think of a variable in code the same way as you would in algebra: it refers to another value. Two of the most common data types are Strings and Numbers. A string is delimited by single ( ‘ ‘ ) or double (“ “) quotes. A Number is not delimited, and can be used to perform mathematical operations. Different data types respond differently to the same symbols; that is, the “+” sign adds two numbers together, but it concatenates two strings together. So 9+3=12, but “9”+“3”=“93”. The commands “console.log()” and “system.stdout.print()” in JavaScript “print” their contents to the console. In these exercises we will be using “console.log()” a lot so that our code keeps us updated on what it’s doing!

Q2

2. Booleans

Another common JavaScript data type is the Boolean. Booleans can store either “true” or “false”, and nothing else. Note that other data types can also function as Booleans: any string that is not empty will evaluate to “true”, and any number that is not zero will evaluate to “true”, while the number 0 and undefined or null values evaluate to “false”.

Q3

3. “if” Logic and Value Comparators

Code nested inside an “if” block will only run if its condition or conditions evaluate as “true”.

Q4

4. While Loops

Like “if” blocks, while loops only run if their conditions evaluate to “true”. But a while loop will run repeatedly until its condition is no longer true. It’s important to exercise caution with while loops since you can easily write an infinite loop that could crash your program! If you get stuck in an infinite loop, use the “stop” button so you can edit your code. Check out what happens if you run the infinite loop below . (Code that is “commented out” has two slashes “//” before it and will not be executed. Remove the slashes by highlighting all of the “commented out” content and hitting the command and slash keys at the same time.)

Q5

5. For Loops

A for loop is similar to a while loop, but less likely to accidentally create an infinite loop. For loops are ideal for iterating. Note that the “++” means that the iterator will increase by 1 with each loop, and the “- -” means the iterator will decrease by 1.

Q6

6. Arrays

An array is technically a type of Object, which is another JavaScript data type. But we aren’t worrying about Objects just yet. An array stores other variables as a list. To create an array, we use single square brackets around a comma-delimited list of variables. For example: myArray = [‘string’, ‘true’, 9]. Each element of an array has an index (note that array indices have base zero), and can be referenced individually as array[index]. So myArray[0] evaluates to the string ‘string’, myArray[1] evaluates to the Boolean ‘true’, and myArray[2] evaluates to the number 9.

Q7

7. Objects

An object is similar to a string, but its properties do not have indices, and each property holds a key: value pair. Keys are strings, but values can be any data type. Objects are written using curly brackets. You can think of an object like a dictionary. Some coding languages actually use the term “dictionary” instead of “object” for this data type.

Q8

8. Const vs. Let & Errors

When declaring a variable, we use “const” or “let” to indicate whether we want to change the value of the variable in the future. Variables written with “const” cannot be changed, and attempting to do so can cause your code to throw errors! But the same variable can be rewritten with no problem if it is instantiated with “let” instead.

Q9

9. Try/Catch Blocks

A try/catch block is a very useful way to avoid errors crashing your code. The code inside the try block is executed, and if an error is thrown, it is abandoned and the catch block is executed instead.

Q10

10. Functional Programming & Return

You may have noticed that your console displays logs in white, but it also shows a green arrow and another value after it’s finished executing the code. This value is typically not shown on command lines — this is a special feature of Repl.it: it’s showing you the value that the function returned. Most of the functions we’ve written so far don’t return anything, so Repl.it shows the returned value “undefined.” But by including the statement “return _____” we can determine what value will be returned by the function. Keep in mind that a return statement causes the function to stop executing. So we can write a program that accepts parameters, operates on them, and returns altered or updated information. To avoid repeating the same logic in code, we frequently write one function that can be called multiple times. You might notice that some functions have an implicit return value even when no return is specified. Don’t worry about this for now.

Q11

11. String Methods

JavaScript includes built in methods, which can be called on variables of the correct data type. These are basically helper functions that are used so frequently that they were built in. “String.toUpperCase()”, for example, transforms a string to all upper case. “String.slice(beginning, end)” returns the characters starting at the beginning index up to (but not including) the end index.

Q12

12. Object Methods

Some common object methods include:

Object.hasOwnProperty(propName): Returns a boolean “true” if the object contains a property with the name “propName,” otherwise returns “false.”

Object.keys(): Returns an array containing all of the object’s keys.

Object.values(): Returns an array containing all of the object’s values.

Q13

13. Array Methods

Some common array methods include:

Array.sort(): Sorts the array’s elements in ascending order based on unicode values; that is in ascending numerical and then alphabetical order.

Array.push(newElem): Adds the element “newElem” to the end of the array.

Array.pop(): Removes the last element of the array and returns it.

Array.shift(): Removes the first element of the array and returns it.

Array.unshift(newElem): Adds the element “newElem” to the front of the array, pushing each element’s index up 1.

Array.slice(beginning, end): Assuming beginning and end are numbers; returns a new array that contains the elements from indices beginning to end, not including the element at index end.

Array.splice(beginning, deleteCount, newElem): Returns a new array where, beginning at the beginning index, deleteCount elements are removed and the newElem is inserted. To delete a single element at index 3, call Array.splice(3, 1). To insert an element at index 2, call Array.splice(2, 0, newElem). To simply make a copy of the array, call Array.splice()

Array.join(delimiter): Returns a string where every element of the array is concatenated into the string with the given delimiter between each element, or a comma by default. For example, [“banana”, “pancakes”].join() returns “banana,pancakes” but [“banana”, “pancakes”].join(“ “) returns “banana pancakes”.

FURTHER RESOURCES

Mozilla JavaScript MDN Docs *note: you can think of documentation, or docs, as a user manual

CodeAcademy JavaScript courses *note: a simple way to log a few hours of coding — great if you need to document your progress and turn it in for whatever reason

FullStack Academy online resources

Here’s a link to the Grace Hopper Program’s site! This is the program that I’m currently enrolled in :)

CodeWars *note: a fun way to practice increasingly challenging algorithmic programming problems. You may find these too challenging at the moment, but I’d highly recommend coming back to them later.

Repl.it *note: a great way to write and run your programs online without installing coding software — very useful if you’re just trying your hand at coding. I used Repl.it to embed the practice problems into this article!