"JavaScript Core Concepts" is a 5-Section Series consisting of:

Section 1 Data Types & Variables

Part 1 Variables
Part 2 Primitive Data Types
Part 3 Complex/Composite Data Types

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements
Section 4 Past, Present & Future
Section 5 Data Structures & Algorithms

...

JavaScript Complex/Composite Data Types

What is a Complex/Composite Data Type?

A complex/composite data type represents a number of similar or different data under a single declaration of a variable. It is a data type that allows multiple values to be grouped together.

JS Complex/Composite Data Types

JavaScript has 1 complex data type: objects. And other data types like arrays and functions described below are just different types of objects.

#1 Objects

Definition

An object is a collection of properties, also known as a mapping between keys and values.

Here’s an example:

let event = {
location: "123 Event Street",
date: "12-03-2022",
host: "Angeline"
};

Purpose

Objects are useful for storing more than one value for a single variable. In the example above, I stored location, date, and host of an event in one variable named event. This means that objects are valuable to store collections of data, and creates a value in memory that could be referenced by an identifier.

Contents

Objects contain properties, which are defined as key-value pairs. The key is always a string/symbol, and the value is any data type (primitive or complex).

Use Case

Objects are useful for processing large amounts of data. For example, to store the data of a group of people.

Application

Create an empty Object

To create an empty object and add properties later, use the new keyword.

Here’s an example:

let event = new Object();
event.location = "123 Event Street";
event.date = "12-03-2022";
event.host = "Angeline";

Adding Properties

Naming Properties

Quotes are optional when naming a property if it is a valid JavaScript names (ie firstname), and quotes are mandatory for non-valid JavaScript names (ie "first-name").

Using Properties

Objects are a collection of properties, and the object literal syntax is where a limited set of properties are initialized. Properties can be added and removed.

Property Values

Property values can be any data type (primitive or composite), including other objects. Thus enabling building of complex data structures.

Identification of Properties

Properties are identified using key values which are either strings or symbols. And each property has its own corresponding attributes. Each attribute is accessed internally by the JavaScript engine, which can be set through Object.defineProperty() and read through Object.getOwnPropertyDescriptor().

Types of Object Properties

There are 2 types of object properties: The data property and the accessor property.

A data property associates a key with a value, and has these attributes:

1. value
   This is retrieved by a get access of the property, and can be any JavaScript value.

2. writable
   This is a boolean value indicating whether the property can be changed with an assignment.

3. enumerable
   This is a boolean value that indicates whether the property can be enumerated by a for…in loop.

4. configurable
   This is a boolean value that indicates if the property can be deleted, changed to an accessor property, and have its attributes changed.

Accessing Object Value

Each individual value within an object can be fetched for later use through the following 2 ways:

1. Dot Operator

console.log(event.host);

Creates this output:

"Angeline"

2. Square Bracket

console.log(event["host"]);

Creates this output:

"Angeline"

More Objects

More objects can be found through the JavaScript standard library of built-in objects.

#2 Arrays

What are arrays?

Arrays are a type of regular object. What makes an array special is the particular relationships between integer-keyed properties and the length property. And the purpose of an array is to store multiple values in one variable in order to represent lists or sets.

How to create an array

To create an array, you need to specify the array elements as a comma-separated list that is then surrounded by square brackets.

Here’s an example:

let users = ["Angeline", "Bob", "Sarah", "George"];

console.log(users[0]); //Output: "Angeline"

What do arrays contain?

Each value/element in an array has a numeric position called its index, which starts from 0 and may contain data of any data type (primitive or complex).

What are array methods?

Array methods are inherited from Array.prototype, and they are methods to manipulate arrays. For example: indexOf() searches a value in the array and push() adds an element to the array.

Typed Arrays

Typed arrays are an array-like view of the underlying binary data buffer, which offers methods with similar semantics to array counterparts. Typed arrays is the umbrella term for a range of data structures, for example: Int8Array and Float32Array.

#3 Functions

What are functions?

Functions are regular objects with the additional capability of being callable, which means that it executes a block of code.

How do you create a function?

Because functions are objects, you can assign them to variables. Furthermore, functions can be used in any other place where other values can be used–meaning that they can be stored in objects and arrays as well.

Here’s an example:

const greeting = function() {
return "Hi!";
}

console.log(typeof greeting) //Output: function
console.log(greeting()); //Output: "Hi!"

Functions can also be passed as arguments to other functions and functions can be returned from other functions.

Here’s an example:

function greeting(name) {
return "Hi, " + name;
}
function displayGreeting(greetingFunction, userName) {
return greetingFunction(userName);
}

let result = displayGreeting(createGreeting, "Angeline");
console.log(result); //Output: "Hi, Angeline"

#4 Dates

The best choice to represent data is using the built-in date utility in JavaScript.

...

How do primitives and complex data types differ in action?

Coercion in JavaScript

Coercing Objects in Values

Objects are wrappers, which means that the value of an object is the primitive they are wrapped around. And then the object is coerced down to this value as necessary.

Boolean objects are a tricky case where the value will always be coerced into a true primitive boolean, even if the initial value of the object is falsey. The only two cases where a boolean object is coerced into a false primitive boolean is when the initial value is undefined or null.

This means that when working with a boolean object, in order to use the value within the boolean object, the value needs to be explicitly asked for.

Coercing Primitives

Primitive data types cannot be coerced for the assignment of a property value. An attempt to assign a property to a primitive will lead to JavaScript coercing the primitive into an object; however, this new object has no reference, so it will be immediately disposed of.

What is the advantage of using an object?

Objects are handy as they allow you to assign properties, but this is its only arguable practical benefit.

What is the advantage of using primitives?

Primitives have specific and well-defined purposes, which also means that redefining them as state holders is a confusing act that should be avoided. These variables are immutable, which means that they cannot be modified by tweaking the properties of an object wrapper.

...

Resources for Further Exploration:

What is a composite data type i.e. object in JavaScript?

TutorialRepublic: JavaScript Data Types