⇦ Back

WDX-180

Web Development X

Week 09 | JavaScript Core 3

Week 08 ⇦

Updated: 5/12/2025

⇨ Week 10

You are viewing v2.0 of this content. To go back to v1.0 click this link.

Week 09 - Day 1 | JavaScript - Indexed collections 1

Study Plan

This chapter introduces collections of data which are ordered by an index value. This includes arrays and array-like constructs such as Array objects and TypedArray objects.

An array is an ordered list of values that you refer to with a name and an index.

For example, consider an array called emp, which contains employees’ names indexed by their numerical employee number. So emp[0] would be employee number zero, emp[1] employee number one, and so on.

JavaScript does not have an explicit array data type. However, you can use the predefined Array object and its methods to work with arrays in your applications. The Array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them. It has a property for determining the array length and other properties for use with regular expressions.

We will be focusing on arrays in this article, but many of the same concepts apply to typed arrays as well, since arrays and typed arrays share many similar methods. For more information on typed arrays, see the typed array guide.

Creating an array

The following statements create equivalent arrays:

  const arr1 = new Array(element0, element1, /* …, */ elementN);
  const arr2 = Array(element0, element1, /* …, */ elementN);
  const arr3 = [element0, element1, /* …, */ elementN];

element0, element1, …, elementN is a list of values for the array’s elements. When these values are specified, the array is initialized with them as the array’s elements. The array’s length property is set to the number of arguments.

The bracket syntax is called an “array literal” or “array initializer.” It’s shorter than other forms of array creation, and so is generally preferred. See Array literals for details.

To create an array with non-zero length, but without any items, either of the following can be used:

  // This...
  const arr1 = new Array(arrayLength);

  // … results in the same array as this
  const arr2 = Array(arrayLength);

  // This has exactly the same effect
  const arr3 = [];
  arr3.length = arrayLength;

In the above code, arrayLength must be a Number. Otherwise, an array with a single element (the provided value) will be created. Calling arr.length will return arrayLength, but the array doesn’t contain any elements. A for…in loop will not find any property on the array.

In addition to a newly defined variable as shown above, arrays can also be assigned as a property of a new or an existing object:

  const obj = {};
  // …
  obj.prop = [element0, element1, /* …, */ elementN];

  // OR
  const obj = { prop: [element0, element1, /* …, */ elementN] };

If you wish to initialize an array with a single element, and the element happens to be a Number, you must use the bracket syntax. When a single Number value is passed to the Array() constructor or function, it is interpreted as an arrayLength, not as a single element.

This creates an array with only one element: the number 42.

  const arr = [42];

This creates an array with no elements and arr.length set to 42.

  const arr = Array(42);

This is equivalent to:

  const arr = [];
  arr.length = 42;

Calling Array(N) results in a RangeError, if N is a non-whole number whose fractional portion is non-zero. The following example illustrates this behavior.

  const arr = Array(9.3); // RangeError: Invalid array length

If your code needs to create arrays with single elements of an arbitrary data type, it is safer to use array literals. Alternatively, create an empty array first before adding the single element to it.

You can also use the Array.of static method to create arrays with single element.

  const arr = Array.of(9.3); // arr contains only one element 9.3

Referring to array elements

Because elements are also properties, you can access them using property accessors. Suppose you define the following array:

  const myArray = ["Wind", "Rain", "Fire"];

You can refer to the first element of the array as myArray[0], the second element of the array as myArray[1], etc… The index of the elements begins with zero.

You can also use property accessors to access other properties of the array, like with an object.

const arr = ["one", "two", "three"];
arr[2]; // three
arr["length"]; // 3

Populating an array

You can populate an array by assigning values to its elements. For example:

  const emp = [];
  emp[0] = "Casey Jones";
  emp[1] = "Phil Lesh";
  emp[2] = "August West";

If you supply a non-integer value to the array operator in the code above, a property will be created in the object representing the array, instead of an array element.

const arr = [];
arr[3.4] = "Oranges";
console.log(arr.length); // 0
console.log(Object.hasOwn(arr, 3.4)); // true

You can also populate an array when you create it:

  const myArray = new Array("Hello", myVar, 3.14159);
  // OR
  const myArray = ["Mango", "Apple", "Orange"];

Understanding length

At the implementation level, JavaScript’s arrays actually store their elements as standard object properties, using the array index as the property name.

The length property is special. Its value is always a positive integer greater than the index of the last element if one exists. (In the example below, 'Dusty' is indexed at 30, so cats.length returns 30 + 1).

Remember, JavaScript Array indexes are 0-based: they start at 0, not 1. This means that the length property will be one more than the highest index stored in the array:

  const cats = [];
  cats[30] = ["Dusty"];
  console.log(cats.length); // 31

You can also assign to the length property.

Writing a value that is shorter than the number of stored items truncates the array. Writing 0 empties it entirely:

  const cats = ["Dusty", "Misty", "Twiggy"];
  console.log(cats.length); // 3

  cats.length = 2;
  console.log(cats); // [ 'Dusty', 'Misty' ] - Twiggy has been removed

  cats.length = 0;
  console.log(cats); // []; the cats array is empty

  cats.length = 3;
  console.log(cats); // [ <3 empty items> ]

Iterating over arrays

A common operation is to iterate over the values of an array, processing each one in some way, as follows:

  const colors = ["red", "green", "blue"];
  for (let i = 0; i < colors.length; i++) {
    console.log(colors[i]);
  }

If you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of DOM nodes, for example—you can use a more efficient idiom:

  const divs = document.getElementsByTagName("div");
  for (let i = 0, div; (div = divs[i]); i++) {
    /* Process div in some way */
  }

This avoids the overhead of checking the length of the array, and ensures that the div variable is reassigned to the current item each time around the loop for added convenience.

The forEach() method provides another way of iterating over an array:

  const colors = ["red", "green", "blue"];
  colors.forEach((color) => console.log(color));
  // red
  // green
  // blue

The function passed to forEach is executed once for every item in the array, with the array item passed as the argument to the function. Unassigned values are not iterated in a forEach loop.

Note that the elements of an array that are omitted when the array is defined are not listed when iterating by forEach, but are listed when undefined has been manually assigned to the element:

  const sparseArray = ["first", "second", , "fourth"];

  sparseArray.forEach((element) => {
    console.log(element);
  });
  // Logs:
  // first
  // second
  // fourth

  if (sparseArray[2] === undefined) {
    console.log("sparseArray[2] is undefined"); // true
  }

  const nonsparseArray = ["first", "second", undefined, "fourth"];

  nonsparseArray.forEach((element) => {
    console.log(element);
  });
  // Logs:
  // first
  // second
  // undefined
  // fourth

Since JavaScript array elements are saved as standard object properties, it is not advisable to iterate through JavaScript arrays using for…in loops, because normal elements and all enumerable properties will be listed.

Array methods

The Array object has the following methods:

The concat() method joins two or more arrays and returns a new array.

  let myArray = ["1", "2", "3"];
  myArray = myArray.concat("a", "b", "c");
  // myArray is now ["1", "2", "3", "a", "b", "c"]

The join() method joins all elements of an array into a string.

  const myArray = ["Wind", "Rain", "Fire"];
  const list = myArray.join(" - "); // list is "Wind - Rain - Fire"

The push() method adds one or more elements to the end of an array and returns the resulting length of the array.

  const myArray = ["1", "2"];
  myArray.push("3"); // myArray is now ["1", "2", "3"]

The pop() method removes the last element from an array and returns that element.

  const myArray = ["1", "2", "3"];
  const last = myArray.pop();
  // myArray is now ["1", "2"], last = "3"

The shift() method removes the first element from an array and returns that element.

  const myArray = ["1", "2", "3"];
  const first = myArray.shift();
  // myArray is now ["2", "3"], first is "1"

The unshift() method adds one or more elements to the front of an array and returns the new length of the array.

  const myArray = ["1", "2", "3"];
  myArray.unshift("4", "5");
  // myArray becomes ["4", "5", "1", "2", "3"]

The slice() method extracts a section of an array and returns a new array.

  let myArray = ["a", "b", "c", "d", "e"];
  myArray = myArray.slice(1, 4); // [ "b", "c", "d"]
  // starts at index 1 and extracts all elements
  // until index 3

The at() method returns the element at the specified index in the array, or undefined if the index is out of range. It’s notably used for negative indices that access elements from the end of the array.

  const myArray = ["a", "b", "c", "d", "e"];
  myArray.at(-2); // "d", the second-last element of myArray

The splice() method removes elements from an array and (optionally) replaces them. It returns the items which were removed from the array.

  const myArray = ["1", "2", "3", "4", "5"];
  myArray.splice(1, 3, "a", "b", "c", "d");
  // myArray is now ["1", "a", "b", "c", "d", "5"]
  // This code started at index one (or where the "2" was),
  // removed 3 elements there, and then inserted all consecutive
  // elements in its place.

The reverse() method transposes the elements of an array, in place: the first array element becomes the last and the last becomes the first. It returns a reference to the array.

  const myArray = ["1", "2", "3"];
  myArray.reverse();
  // transposes the array so that myArray = ["3", "2", "1"]

The flat() method returns a new array with all sub-array elements concatenated into it recursively up to the specified depth.

  let myArray = [1, 2, [3, 4]];
  myArray = myArray.flat();
  // myArray is now [1, 2, 3, 4], since the [3, 4] subarray is flattened

The sort() method sorts the elements of an array in place, and returns a reference to the array.

  const myArray = ["Wind", "Rain", "Fire"];
  myArray.sort();
  // sorts the array so that myArray = ["Fire", "Rain", "Wind"]

sort() can also take a callback function to determine how array elements are compared. The callback function is called with two arguments, which are two values from the array. The function compares these two values and returns a positive number, negative number, or zero, indicating the order of the two values. For instance, the following will sort the array by the last letter of a string:

  const sortFn = (a, b) => {
    if (a[a.length - 1] < b[b.length - 1]) {
      return -1; // Negative number => a < b, a comes before b
    } else if (a[a.length - 1] > b[b.length - 1]) {
      return 1; // Positive number => a > b, a comes after b
    }
    return 0; // Zero => a = b, a and b keep their original order
  };
  myArray.sort(sortFn);
  // sorts the array so that myArray = ["Wind","Fire","Rain"]
  • if a is less than b by the sorting system, return -1 (or any negative number)
  • if a is greater than b by the sorting system, return 1 (or any positive number)
  • if a and b are considered equivalent, return 0.

The indexOf() method searches the array for searchElement and returns the index of the first match.

  const a = ["a", "b", "a", "b", "a"];
  console.log(a.indexOf("b")); // 1

  // Now try again, starting from after the last match
  console.log(a.indexOf("b", 2)); // 3
  console.log(a.indexOf("z")); // -1, because 'z' was not found

The lastIndexOf() method works like indexOf, but starts at the end and searches backwards.

  const a = ["a", "b", "c", "d", "a", "b"];
  console.log(a.lastIndexOf("b")); // 5

  // Now try again, starting from before the last match
  console.log(a.lastIndexOf("b", 4)); // 1
  console.log(a.lastIndexOf("z")); // -1

The forEach() method executes callback on every array item and returns undefined.

  const a = ["a", "b", "c"];
  a.forEach((element) => {
    console.log(element);
  });
  // Logs:
  // a
  // b
  // c

The forEach method (and others below) that take a callback are known as iterative methods, because they iterate over the entire array in some fashion. Each one takes an optional second argument called thisArg. If provided, thisArg becomes the value of the this keyword inside the body of the callback function. If not provided, as with other cases where a function is invoked outside of an explicit object context, this will refer to the global object (window, globalThis, etc.) when the function is not strict, or undefined when the function is strict.

The sort() method introduced above is not an iterative method, because its callback function is only used for comparison and may not be called in any particular order based on element order. sort() does not accept the thisArg parameter either.

The map() method returns a new array of the return value from executing callback on every array item.

  const a1 = ["a", "b", "c"];
  const a2 = a1.map((item) => item.toUpperCase());
  console.log(a2); // ['A', 'B', 'C']

The flatMap() method runs map() followed by a flat() of depth 1.

  const a1 = ["a", "b", "c"];
  const a2 = a1.flatMap((item) => [item.toUpperCase(), item.toLowerCase()]);
  console.log(a2); // ['A', 'a', 'B', 'b', 'C', 'c']

The filter() method returns a new array containing the items for which callback returned true.

  const a1 = ["a", 10, "b", 20, "c", 30];
  const a2 = a1.filter((item) => typeof item === "number");
  console.log(a2); // [10, 20, 30]

The find() method returns the first item for which callback returned true.

  const a1 = ["a", 10, "b", 20, "c", 30];
  const i = a1.find((item) => typeof item === "number");
  console.log(i); // 10

The findLast() method returns the last item for which callback returned true.

  const a1 = ["a", 10, "b", 20, "c", 30];
  const i = a1.findLast((item) => typeof item === "number");
  console.log(i); // 30

The findIndex() method returns the index of the first item for which callback returned true.

  const a1 = ["a", 10, "b", 20, "c", 30];
  const i = a1.findIndex((item) => typeof item === "number");
  console.log(i); // 1

The findLastIndex() method returns the index of the last item for which callback returned true.

  const a1 = ["a", 10, "b", 20, "c", 30];
  const i = a1.findLastIndex((item) => typeof item === "number");
  console.log(i); // 5

Week 09 - Day 2 | JavaScript - Indexed collections 2

Study Plan

This module introduces some more Array methods and dives even deeper into these powerful indexed data structures.

More Array methods

The every() method returns true if callback returns true for every item in the array.

  function isNumber(value) {
    return typeof value === "number";
  }
  const a1 = [1, 2, 3];
  console.log(a1.every(isNumber)); // true
  const a2 = [1, "2", 3];
  console.log(a2.every(isNumber)); // false

The some() method returns true if callback returns true for at least one item in the array.

  function isNumber(value) {
    return typeof value === "number";
  }
  const a1 = [1, 2, 3];
  console.log(a1.some(isNumber)); // true
  const a2 = [1, "2", 3];
  console.log(a2.some(isNumber)); // true
  const a3 = ["1", "2", "3"];
  console.log(a3.some(isNumber)); // false

The reduce() method applies callback(accumulator, currentValue, currentIndex, array) for each value in the array for the purpose of reducing the list of items down to a single value. The reduce function returns the final value returned by callback function.

If initialValue is specified, then callback is called with initialValue as the first parameter value and the value of the first item in the array as the second parameter value.

If initialValue is not specified, then callback’s first two parameter values will be the first and second elements of the array. On every subsequent call, the first parameter’s value will be whatever callback returned on the previous call, and the second parameter’s value will be the next value in the array.

If callback needs access to the index of the item being processed, or access to the entire array, they are available as optional parameters.

  const a = [10, 20, 30];
  const total = a.reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0,
  );
  console.log(total); // 60

The reduceRight() method works like reduce(), but starts with the last element.

reduce and reduceRight are the least obvious of the iterative array methods. They should be used for algorithms that combine two values recursively in order to reduce a sequence down to a single value.

Array transformations

You can transform back and forth between arrays and other data structures.

Grouping the elements of an array

The Object.groupBy() method can be used to group the elements of an array, using a test function that returns a string indicating the group of the current element.

Here we have an inventory array that contains “food” objects that have a name and a type.

  const inventory = [
    { name: "asparagus", type: "vegetables" },
    { name: "bananas", type: "fruit" },
    { name: "goat", type: "meat" },
    { name: "cherries", type: "fruit" },
    { name: "fish", type: "meat" },
  ];

To use Object.groupBy(), you supply a callback function that is called with the current element, and optionally the current index and array, and returns a string indicating the group of the element.

The code below uses an arrow function to return the type of each array element (this uses object destructuring syntax for function arguments to unpack the type element from the passed object). The result is an object that has properties named after the unique strings returned by the callback. Each property is assigned an array containing the elements in the group.

  const result = Object.groupBy(inventory, ({ type }) => type);
  console.log(result);
  // Logs
  // {
  //   vegetables: [{ name: 'asparagus', type: 'vegetables' }],
  //   fruit: [
  //     { name: 'bananas', type: 'fruit' },
  //     { name: 'cherries', type: 'fruit' }
  //   ],
  //   meat: [
  //     { name: 'goat', type: 'meat' },
  //     { name: 'fish', type: 'meat' }
  //   ]
  // }

Note that the returned object references the same elements as the original array (not deep copies). Changing the internal structure of these elements will be reflected in both the original array and the returned object.

If you can’t use a string as the key, for example, if the information to group is associated with an object that might change, then you can instead use Map.groupBy(). This is very similar to Object.groupBy() except that it groups the elements of the array into a Map that can use an arbitrary value (object or primitive) as a key.

Sparse arrays

Arrays can contain “empty slots”, which are not the same as slots filled with the value undefined. Empty slots can be created in one of the following ways:

  // Array constructor:
  const a = Array(5); // [ <5 empty items> ]

  // Consecutive commas in array literal:
  const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]

  // Directly setting a slot with index greater than array.length:
  const c = [1, 2];
  c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]

  // Elongating an array by directly setting .length:
  const d = [1, 2];
  d.length = 5; // [ 1, 2, <3 empty items> ]

  // Deleting an element:
  const e = [1, 2, 3, 4, 5];
  delete e[2]; // [ 1, 2, <1 empty item>, 4, 5 ]

In some operations, empty slots behave as if they are filled with undefined.

  const arr = [1, 2, , , 5]; // Create a sparse array

  // Indexed access
  console.log(arr[2]); // undefined

  // For...of
  for (const i of arr) {
    console.log(i);
  }
  // Logs: 1 2 undefined undefined 5

  // Spreading
  const another = [...arr]; // "another" is [ 1, 2, undefined, undefined, 5 ]

But in others (most notably array iteration methods), empty slots are skipped.

  const mapped = arr.map((i) => i + 1); // [ 2, 3, <2 empty items>, 6 ]
  arr.forEach((i) => console.log(i)); // 1 2 5
  const filtered = arr.filter(() => true); // [ 1, 2, 5 ]
  const hasFalsy = arr.some((k) => !k); // false

  // Property enumeration
  const keys = Object.keys(arr); // [ '0', '1', '4' ]
  for (const key in arr) {
    console.log(key);
  }
  // Logs: '0' '1' '4'
  // Spreading into an object uses property enumeration, not the array's iterator
  const objectSpread = { ...arr }; // { '0': 1, '1': 2, '4': 5 }

For a complete list of how array methods behave with sparse arrays, see the Array reference page.

Multi-dimensional arrays

Arrays can be nested, meaning that an array can contain another array as an element. Using this characteristic of JavaScript arrays, multi-dimensional arrays can be created.

The following code creates a two-dimensional array.

  const a = new Array(4);
  for (let i = 0; i < 4; i++) {
    a[i] = new Array(4);
    for (let j = 0; j < 4; j++) {
      a[i][j] = `[${i}, ${j}]`;
    }
  }

This example creates an array with the following rows:

  Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
  Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
  Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
  Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

Using arrays to store other properties

Arrays can also be used like objects, to store related information.

  const arr = [1, 2, 3];
  arr.property = "value";
  console.log(arr.property); // "value"

For example, when an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match. An array is the return value of RegExp.prototype.exec(), String.prototype.match(), and String.prototype.split(). For information on using arrays with regular expressions, see Regular Expressions.

Working with array-like objects

Some JavaScript objects, such as the NodeList returned by document.getElementsByTagName() or the arguments object made available within the body of a function, look and behave like arrays on the surface but do not share all of their methods. The arguments object provides a length attribute but does not implement array methods like forEach().

Array methods cannot be called directly on array-like objects.

  function printArguments() {
    arguments.forEach((item) => {
      console.log(item);
    }); // TypeError: arguments.forEach is not a function
  }

But you can call them indirectly using Function.prototype.call().

  function printArguments() {
    Array.prototype.forEach.call(arguments, (item) => {
      console.log(item);
    });
  }

Array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:

  Array.prototype.forEach.call("a string", (chr) => {
    console.log(chr);
  });

Week 09 - Day 3 | JavaScript - Working with Objects 1

Study Plan

JavaScript is designed on an object-based paradigm. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method.

Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.

In addition to objects that are predefined in the browser, you can define your own objects. This chapter describes how to use objects, properties, and methods, and how to create your own objects.

Creating new objects

You can create an object using an object initializer. Alternatively, you can first create a constructor function and then instantiate an object by invoking that function with the new operator.

Using object initializers

Object initializers are also called object literals. “Object initializer” is consistent with the terminology used by C++.

The syntax for an object using an object initializer is:

  const obj = {
    property1: value1, // property name may be an identifier
    2: value2, // or a number
    "property n": value3, // or a string
  };

Each property name before colons is an identifier (either a name, a number, or a string literal), and each valueN is an expression whose value is assigned to the property name. The property name can also be an expression; computed keys need to be wrapped in square brackets. The object initializer reference contains a more detailed explanation of the syntax.

In this example, the newly created object is assigned to a variable obj — this is optional. If you do not need to refer to this object elsewhere, you do not need to assign it to a variable. (Note that you may need to wrap the object literal in parentheses if the object appears where a statement is expected, so as not to have the literal be confused with a block statement.)

Object initializers are expressions, and each object initializer results in a new object being created whenever the statement in which it appears is executed. Identical object initializers create distinct objects that do not compare to each other as equal.

The following statement creates an object and assigns it to the variable x if and only if the expression cond is true:

  let x;
  if (cond) {
    x = { greeting: "hi there" };
  }

The following example creates myHonda with three properties. Note that the engine property is also an object with its own properties.

  const myHonda = {
    color: "red",
    wheels: 4,
    engine: { cylinders: 4, size: 2.2 },
  };

Objects created with initializers are called plain objects, because they are instances of Object, but not any other object type. Some object types have special initializer syntaxes — for example, array initializers and regex literals.

Objects and properties

A JavaScript object has properties associated with it. Object properties are basically the same as variables, except that they are associated with objects, not scopes. The properties of an object define the characteristics of the object.

For example, this example creates an object named myCar, with properties named make, model, and year, with their values set to "Ford", "Mustang", and 1969:

  const myCar = {
    make: "Ford",
    model: "Mustang",
    year: 1969,
  };

Like JavaScript variables, property names are case sensitive. Property names can only be strings or Symbols — all keys are converted to strings unless they are Symbols. Array indices are, in fact, properties with string keys that contain integers.

Accessing properties

You can access a property of an object by its property name. Property accessors come in two syntaxes: dot notation and bracket notation. For example, you could access the properties of the myCar object as follows:

  // Dot notation
  myCar.make = "Ford";
  myCar.model = "Mustang";
  myCar.year = 1969;

  // Bracket notation
  myCar["make"] = "Ford";
  myCar["model"] = "Mustang";
  myCar["year"] = 1969;

An object property name can be any JavaScript string or symbol, including an empty string. However, you cannot use dot notation to access a property whose name is not a valid JavaScript identifier. For example, a property name that has a space or a hyphen, that starts with a number, or that is held inside a variable can only be accessed using the bracket notation. This notation is also very useful when property names are to be dynamically determined, i.e., not determinable until runtime. Examples are as follows:

  const myObj = {};
  const str = "myString";
  const rand = Math.random();
  const anotherObj = {};

  // Create additional properties on myObj
  myObj.type = "Dot syntax for a key named type";
  myObj["date created"] = "This key has a space";
  myObj[str] = "This key is in variable str";
  myObj[rand] = "A random number is the key here";
  myObj[anotherObj] = "This key is object anotherObj";
  myObj[""] = "This key is an empty string";

  console.log(myObj);
  // {
  //   type: 'Dot syntax for a key named type',
  //   'date created': 'This key has a space',
  //   myString: 'This key is in variable str',
  //   '0.6398914448618778': 'A random number is the key here',
  //   '[object Object]': 'This key is object anotherObj',
  //   '': 'This key is an empty string'
  // }
  console.log(myObj.myString); // 'This key is in variable str'

In the above code, the key anotherObj is an object, which is neither a string nor a symbol. When it is added to the myObj, JavaScript calls the toString() method of anotherObj, and use the resulting string as the new key.

You can also access properties with a string value stored in a variable. The variable must be passed in bracket notation. In the example above, the variable str held "myString" and it is "myString" that is the property name. Therefore, myObj.str will return as undefined.

  str = "myString";
  myObj[str] = "This key is in variable str";

  console.log(myObj.str); // undefined

  console.log(myObj[str]); // 'This key is in variable str'
  console.log(myObj.myString); // 'This key is in variable str'

This allows accessing any property as determined at runtime:

  let propertyName = "make";
  myCar[propertyName] = "Ford";

  // access different properties by changing the contents of the variable
  propertyName = "model";
  myCar[propertyName] = "Mustang";

  console.log(myCar); // { make: 'Ford', model: 'Mustang' }

However, beware of using square brackets to access properties whose names are given by external input. This may make your code susceptible to object injection attacks.

Nonexistent properties of an object have value undefined (and not null){:target=”_blank”}.

  myCar.nonexistentProperty; // undefined

Enumerating properties

There are three native ways to list/traverse object properties:

  • for...in loops. This method traverses all of the enumerable string properties of an object as well as its prototype chain.
  • Object.keys(). This method returns an array with only the enumerable own string property names (“keys”) in the object myObj, but not those in the prototype chain.
  • Object.getOwnPropertyNames(). This method returns an array containing all the own string property names in the object myObj, regardless of if they are enumerable or not.

You can use the bracket notation with for...in to iterate over all the enumerable properties of an object. To illustrate how this works, the following function displays the properties of the object when you pass the object and the object’s name as arguments to the function:

  function showProps(obj, objName) {
    let result = "";
    for (const i in obj) {
      // Object.hasOwn() is used to exclude properties from the object's
      // prototype chain and only show "own properties"
      if (Object.hasOwn(obj, i)) {
        result += `${objName}.${i} = ${obj[i]}\n`;
      }
    }
    console.log(result);
  }

The term “own property” refers to the properties of the object, but excluding those of the prototype chain. So, the function call showProps(myCar, 'myCar') would print the following:

  myCar.make = Ford
  myCar.model = Mustang
  myCar.year = 1969

The above is equivalent to:

  function showProps(obj, objName) {
    let result = "";
    Object.keys(obj).forEach((i) => {
      result += `${objName}.${i} = ${obj[i]}\n`;
    });
    console.log(result);
  }

There is no native way to list all inherited properties including non-enumerable ones. However, this can be achieved with the following function:

  function listAllProperties(myObj) {
    let objectToInspect = myObj;
    let result = [];

    while (objectToInspect !== null) {
      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
      objectToInspect = Object.getPrototypeOf(objectToInspect);
    }

    return result;
  }

For more information, see Enumerability and ownership of properties.

Deleting properties

You can remove a non-inherited property using the delete operator. The following code shows how to remove a property.

  // Creates a new object, myObj, with two properties, a and b.
  const myObj = { a: 5, b: 12 };

  // Removes the a property, leaving myObj with only the b property.
  delete myObj.a;
  console.log("a" in myObj); // false

Defining methods

A method is a function associated with an object, or, put differently, a method is a property of an object that is a function. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See also method definitions for more details. An example is:

  objectName.methodName = functionName;

  const myObj = {
    myMethod: function (params) {
      // do something
    },

    // this works too!
    myOtherMethod(params) {
      // do something else
    },
  };

where objectName is an existing object, methodName is the name you are assigning to the method, and functionName is the name of the function.

You can then call the method in the context of the object as follows:

  objectName.methodName(params);

Using this for object references

JavaScript has a special keyword, this, that you can use within a method to refer to the current object. For example, suppose you have 2 objects, Manager and Intern. Each object has its own name, age and job. In the function sayHi(), notice the use of this.name. When added to the 2 objects, the same function will print the message with the name of the respective object it’s attached to.

  const Manager = {
    name: "Karina",
    age: 27,
    job: "Software Engineer",
  };
  const Intern = {
    name: "Tyrone",
    age: 21,
    job: "Software Engineer Intern",
  };

  function sayHi() {
    console.log(`Hello, my name is ${this.name}`);
  }

  // add sayHi function to both objects
  Manager.sayHi = sayHi;
  Intern.sayHi = sayHi;

  Manager.sayHi(); // Hello, my name is Karina
  Intern.sayHi(); // Hello, my name is Tyrone

this is a “hidden parameter” of a function call that’s passed in by specifying the object before the function that was called. For example, in Manager.sayHi(), this is the Manager object, because Manager comes before the function sayHi(). If you access the same function from another object, this will change as well. If you use other methods to call the function, like Function.prototype.call() or Reflect.apply(), you can explicitly pass the value of this as an argument.

Week 09 - Day 4 | JavaScript - Working with Objects 2

Study Plan

Defining getters and setters

A getter is a function associated with a property that gets the value of a specific property. A setter is a function associated with a property that sets the value of a specific property. Together, they can indirectly represent the value of a property.

Getters and setters can be either

Within object initializers, getters and setters are defined like regular methods, but prefixed with the keywords get or set. The getter method must not expect a parameter, while the setter method expects exactly one parameter (the new value to set). For instance:

  const myObj = {
    a: 7,
    get b() {
      return this.a + 1;
    },
    set c(x) {
      this.a = x / 2;
    },
  };

  console.log(myObj.a); // 7
  console.log(myObj.b); // 8, returned from the get b() method
  myObj.c = 50; // Calls the set c(x) method
  console.log(myObj.a); // 25

The myObj object’s properties are:

  • myObj.a — a number
  • myObj.b — a getter that returns myObj.a plus 1
  • myObj.c — a setter that sets the value of myObj.a to half of the value myObj.c is being set to

Getters and setters can also be added to an object at any time after creation using the Object.defineProperties() method. This method’s first parameter is the object on which you want to define the getter or setter. The second parameter is an object whose property names are the getter or setter names, and whose property values are objects for defining the getter or setter functions. Here’s an example that defines the same getter and setter used in the previous example:

  const myObj = { a: 0 };

  Object.defineProperties(myObj, {
    b: {
      get() {
        return this.a + 1;
      },
    },
    c: {
      set(x) {
        this.a = x / 2;
      },
    },
  });

  myObj.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
  console.log(myObj.b); // Runs the getter, which yields a + 1 or 6

Which of the two forms to choose depends on your programming style and task at hand. If you can change the definition of the original object, you will probably define getters and setters through the original initializer. This form is more compact and natural. However, if you need to add getters and setters later — maybe because you did not write the particular object — then the second form is the only possible form. The second form better represents the dynamic nature of JavaScript, but it can make the code hard to read and understand.

Comparing objects

In JavaScript, objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

  // Two variables, two distinct objects with the same properties
  const fruit = { name: "apple" };
  const anotherFruit = { name: "apple" };

  fruit == anotherFruit; // return false
  fruit === anotherFruit; // return false

  // Two variables, a single object
  const fruit = { name: "apple" };
  const anotherFruit = fruit; // Assign fruit object reference to anotherFruit

  // Here fruit and anotherFruit are pointing to same object
  fruit == anotherFruit; // return true
  fruit === anotherFruit; // return true

  fruit.name = "grape";
  console.log(anotherFruit); // { name: "grape" }; not { name: "apple" }

For more information about comparison operators, see equality operators.

Week 09 - Day 5 | JavaScript - Array & Object Practice

Schedule

Study Plan

Exercises

Let’s practice Arrays and Objects!

Download the following file and try to solve all the exercises:

Array & Object Practice

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week09/progress/progress.draft.w09.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Week 09 - Weekend Suggestions

If you are in the mood of enjoying related content during the weekend, check out our weekly recommendations here.

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham