Arrays

Data Types Review

Let's revisit some of the Primitive Data types we covered in the last module:

1. String, e.g. "Hello", "1", or ""

2. Number, e.g. 1, 1239, 1.2, or 1e4

3. Boolean, e.g. true or false

4. undefined <- that's, right undefined. In JavaScript, undefined values have their own data type!

Primitive data types like we covered in the last module are meant to represent a single piece of discrete data. It can be a large piece (think of War and Peace as a single String), but it's still just one item.

Complex or Composite data types represent Collections of data. The Complex data types of JavaScript are Array and Object. We'll dig much deeper into both of these data types later, but for now, let's learn how to construct them using Literal Notation.

Objects are collections of data just like Arrays, but we can access data by name instead of sequence. All names are themselves arbitrary Strings that you're free to make up as you see fit. Let's try to re-write part of myArray as an Object:

const myObject = {
  myString: "String",
  myNum: 23,
  myBoo: true
};

console.log(myObject["myString"]);

Objects are the foundation of an entire programming paradigm known as Object Oriented Programming, which we'll definitely be revisiting. For right now, it's enough to understand that we can store data in Objects and access them by name using either bracket notation or a shortcut called dot notation.

Dot notation for the above example would be something like:

console.log(myObject.myNum); // 23

Hopefully you recognize that we've already been working with built-in Objects, including window and console. Typing window.location was accessing the location property of the window Object provided by the browser. console.log() invokes the log function contained in a console Object provided by the browser. window and console are part of the BOM, or Browser Object Model (notice the 'Object' part of that). It's the collection of all of the data and built-in functions provided by the browser, that we can access at any time.

Array Concepts

Arrays are ordered lists of data. The data can be of any type, including String, Number, Boolean, undefined, or even variables and functions. We can create a variable of type Array like so:

// try this out in your console!
const myArray = ["String", 23, "Another String", true, false];
console.log(myArray);

Now try same thing with a mixture of variables and literals:

const myString = "String";
const myNum = 23;
const myBoo = true;
const myUndef;

const myArray = [myString, myNum, "Another String", myBoo, myUndef, false];
console.log(myArray);

The output should be exactly the same for both of those examples!

Just like we can invoke a function using parens (e.g. prompt()), we can access data in an array using bracket notation. Try it out on myArray:

console.log(myArray[0] + " and " + myArray[2]);

Arrays are also zero-indexed, which means that the first piece of data in the collection has a position of 0 (instead of 1). We'll see a lot more of this later. For now, it's enough to just recognize an array when you see one!

Arrays are ordered lists of data. The data can be of any type, including String, Number, Boolean, undefined, or even variables and functions. We can create a variable of type Array like so:

//try this out in your console!
const myArray = ["String", 23, "Another String", true, false];
console.log(myArray);

Now try same thing with a mixture of variables and literals:

const myString = "String";
const myNum = 23;
const myBoo = true;
const myUndef;

const myArray = [myString, myNum, "Another String", myBoo, myUndef, false];
console.log(myArray);

The output should be exactly the same for both of those examples!

Just like we can invoke a function using parens (e.g. prompt()), we can access data in an array using bracket notation. Try it out on myArray:

console.log(myArray[0] + " and " + myArray[2]);

Arrays are also zero-indexed, which means that the first piece of data in the collection has a position of 0 (instead of 1). We'll see a lot more of this later. For now, it's enough to just recognize an array when you see one!

Function Arguments

1. In your dev console, create a function logAndReturn that console.logs all of its inputs and then returns them. HINT:

   function logAndReturn() {
     console.log(arguments);
   
     return arguments;
   }

2. Store the return value as a variable returnedValues. HINT:

   const returnedValues = logAndReturn();

3. Pass that variable as an argument to a second invocation of logAndReturn. HINT:

   logAndReturn(returnedValues);

querySelectorAll()

querySelector() and querySelectorAll() are both functions accessible through the document Object. Every modern browser will expose these functions for you to use! You'll also notice that they each return a different type of complex data type:

• querySelector() returns a single DOM node, which is an Object that contains all of the same useful functions that we saw in the document Object (including querySelector()!)

• querySelectorAll() returns an array-like list of DOM nodes (where querySelector() only returns the first node that matches the selector). This means that we can assign these DOM nodes to variables and treat them just like any other Object or Array. To see how that works in action, try the following from the console:

const nav = document.querySelector("nav");
const navLinkArr = nav.querySelectorAll("li");
const firstNavLink = navLinkArr[0];
const secondNavLink = navLinkArr[1];

firstNavLink.textContent;
secondNavLink.textContent = "New Link Text";