Complex DataTypes in JS

Collections

Objects and arrays are ‘complex’ data-types in JavaScript. Objects and arrays are mutable meaning that they can be accessed and changed after being created. JavaScript collections can be of indeterminant size.

What's the Difference?

Objects are collections of data made of unordered properties. These properties are made of a value assigned to a key. A key need to be a string, however a value can be any data-type.

	const obj = {
	key1: 1,
	key2: 'string',
	key3: true,
	key4: undefined,
	key5: null,
	key6: {},
	key7: [],
	key8: function fn(){}
	};

view raw gistfile1.txt hosted with ❤ by GitHub

Arrays are collections of data made of values assigned to a numerical index starting at zero. Arrays, unlike objects, are specifically ordered. Array values can also be any data-type.

	const arr = [
	0,
	'string',
	false,
	undefined,
	null,
	{},
	[],
	function fn(){}
	];

view raw gistfile1.txt hosted with ❤ by GitHub

Accessing Object Properties

Dot notation is used to access an objects properties when the LITERAL name of a key is known.

	let person = {
	firstName: 'John',
	lastName: 'Smith',
	};
	console.log(person.firstName); // => 'John'

view raw gistfile1.txt hosted with ❤ by GitHub

Bracket notation can be use a variable assigned to a key can be passed in the place of a key’s literal name. Bracket notation can also be used when a key has a ‘special’ character.

	let someThing = {
	color: 'blue',
	'key.name': 'something'
	};
	console.log(someThing['key.name']); // => 'something'

view raw gistfile1.txt hosted with ❤ by GitHub

Accessing Array Elements

Array elements are accessed using bracket notation passing the index number of the value trying to be accessed.

	let simpleArr = ['zero', 'one', 'two'];
	console.log(simpleArr[0]); // => 'zero'
	console.log(simpleArr[2]); // => 'two'

view raw gistfile1.txt hosted with ❤ by GitHub

Property Deletion

Object properties can be deleted using the delete keyword.

	var person = { name: ‘John’, age: 29};
	delete person.age;
	console.log(person); // => { name: 'John' }

view raw gistfile1.txt hosted with ❤ by GitHub

Removing Elements from an Array

There are various ways to remove elements from arrays.

The array method splice takes in two arguments: the index of the first element to remove and the number of elements to remove. The splice method can be used to return an array of the removed elements or if no arguments are passed then it can create an unaltered copy of the array.

The array method shift can be used to remove the first element from an array. The shift method can be used to return the element that was removed.

The array method pop can be used to remove the last element from an array. The pop method can also be used to return the element that was removed.

	let arr = [ 0, 1, 2, 3, 4 ];
	//splice
	let spliced = arr.splice(3, 4);
	console.log(arr); // => [ 0, 1, 2 ]
	console.log(spliced); // => [ 3, 4 ]
	//shift
	let shifted = arr.shift();
	console.log(arr); // => [ 1, 2 ]
	console.log(shifted); // => 0
	//pop
	let popped = arr.pop();
	console.log(arr); // => [ 1 ]
	console.log(popped); // => 2

view raw gistfile1.txt hosted with ❤ by GitHub

Comments

[Jon Randy 🎖️]

Object keys can be Symbols as well as strings. If you're using a symbol, then you must use the bracket notation.

const a = Symbol()
const myObj = {
  val: 3,
  [a]: 4
}

console.log(myObj.val)  // 3
console.log(myObj[a])  // 4