There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.

Introduction to Objects

Objects are a special data type in JavaScript. Primitive data types hold one piece of data – like a string, number or boolean variable. Objects, like arrays, hold a set of data. They’re often contrasted with arrays by explaining that arrays generally contain data about multiple, distinct items – like an array with a collection of the names of car manufacturers or bands or people. Objects also hold a collection of data, but they’re generally about a single thing; like a person’s height, weight, eye color, skin color and hair color. Arrays basically have information about a collection of items, and objects have more detailed data about one particular item.

Objects are declared like variables, but using braces at the ends ( {} ), somewhat like a function.

As per the Lambda School text:

In the last lesson we introduced Arrays. Arrays are containers that hold collections of data. In this lesson we will introduce another data container, the Object. Objects and arrays are similar in some ways and very different in others. Where arrays hold multiple items related to each other, Objects will hold a lot of information about one thing. Objects are instantiated by using braces ({}).

const newObj = {};

• Mozilla Developer Network: Working with objects

Key:Value pairs

Keys are essentially variables that exist in an object. Values are the data that goes into the key. For example, if there was an object called band and its keys included bandName, guitarist, bassist, drummer and vocalist, then we could conceivably have an object with the following key:value pairs:

const band = {
  bandName: 'Godflesh',
  guitarist: 'Justin Broadrick',
  bassist: 'G.C. Green',
  drummer: 'drum machine',
  vocalist: 'Justin Broadrick',
};

As per the Lambda School text:

Unlike arrays that have index valued items, objects use a concept called key:value pairs. The key is the identifier and the value is the value we want to save to that key. The syntax is “key: value”. Objects can hold many key:value pairs, they must be separated by a comma (no semi-colons inside of an object!). Keys are unique in an object, there can be only one key of that name. Although, multiple keys can have the same value. Values can be any Javascript type, string, number, boolean, array, function or even another object. In this demo we will create a user object.

const user = {
  username: 'dan.frehner',
  password: 'abc123',
  lovesJavascript: true,
  favoriteNumber: 42,
};

Accessing Values

The values in key:value pairs can be accessed by calling the object name and the key. There are two ways to do this: dot notation and bracket notation.

To get a value using dot notation, we call the object name, a dot and the key name:

band.bassist; // G.C. Green
band.drummer; // drum machine

This is the same process as calling the .length property on an array because, apparently the .length property is also a key:value pair!

Getting a value using bracket notation is like calling an item in an array, although we must use a string or number to specify which item, or a variable that points to a string or number. Keys are wrapped in quotation marks when calling them.

const passString = 'password';
user['lovesJavascript']; // true
user['username']; // dan.frehner
user[passString]; // abc123

The above example uses data from the user object from the Lambda School text. Note that passString and user[passString] are not the same variable, even though their names are similar. passString is a global variable, and user[passString] refers to a key inside of the user object. Hence, their values are different (‘password’ and ‘abc123’, respectively… neither of which are secure passwords).

In the wild you will see brackets almost always being used with variables.

Assigning Values

Assigning values works just like accessing them. We can assign them, with dot notation, or with bracket notation when the object is created (just like declaring a variable):

const newUser = {isNew: true,}
const loveJSString = 'lovesJavascript';

newUser.username = 'new.username';
newUser['password'] = '12345';
newUser[loveJSString] = true;

In the above example from the Lambda School text, the object newUser is created with a single key:value pair called isNew, which is assigned the value of true. Then a global variable called loveJSString is created. Next, three new key:value pairs are created and added to the newUser object: newUser.username, newUser.password and newUser.loveJSString. Values are assigned to each of the keys.

Note that the three new key:value pairs are assigned using a different format. The first one is assigned using dot notation. The second uses bracket notation with quotation marks, and the last uses bracket notation without quotation marks. All are valid. From what I’ve read outside of the pre-course, quotes are required if a key’s name begins with a number instead of a letter.

Removing Properties

A property can be removed from an object using the delete keyword. My understanding of this is that property refers to a key in an object, and that deleting it removes it entirely from the object, so that it, and its value, are no longer part of the object. Its like if, using the Lambda School newUser object in the previous example, newUser simply stopped tracking something like the loveJSString key for all newUsers.

If a property is deleted from an object, any attempt to call that property and get a value for it will return “undefined”.

const newObject = {removeThisProperty: true,};

delete newObject.removeThisProperty;

As per the Lambda School text:

It is rare we will see the use of the delete keyword, many find best practice to be setting the value of a keyword to undefined. It will be up to you when the time comes.

 

• Lambda School Full-Stack/Web Developer Pre-course Index