Objects & JSON

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

• Know what objects and methods are
• Real World Scenarios
• Understand what is JSON
• Work with JSON-formatted data

Agenda

• Homework Review
• Hoisting
• Objects
• Real World Scenarios
• Using JSON

Exit Ticket Questions

Classroom Resources

Homework Review

Hoisting

Hoisting

• When JavaScript compiles all of your code, all variable declarations using var are lifted to the top of their function/local scope.
• Hoisting doesn't happen in the code, rather the Compiler.
• Google Chrome uses V8 Compiler / Interpreter.

Hoisting

function celebrate() {

  console.log("Wahoo!");
  var x = 1;
}
								

function celebrate() {
  var x; // top of function scope
  console.log("Wahoo!");
  x = 1;
}
								

• Variable names declared with var are hoisted, but not their values.

Hoisting

function celebrate() {
  console.log("Wahoo!");
  let x = 1;
}
								

function celebrate() {
  console.log("Wahoo!");
  let x = 1;
}
								

• Variable names declared with let or const are not hoisted.

Hoisting - Function Declarations

foo()

function foo() {
  console.log("Hi!");
}
								

function foo() {
  console.log("Hi!");
}

foo();
								

• Function declarations are hoisted.
• Your code can call a hoisted function before it has been declared.

Hoisting - Function Expressions

foo()


var foo = function() {
  console.log("Hi!");
}
								

var foo;

foo(); // error foo is not a function
foo = function() {
  console.log("Hi!");
}
								

• Function expressions are treated like other variables

Hoisting - Function Expressions

foo()

let foo = function() {
  console.log("Hi!");
}
								

foo(); // foo is not defined

let foo = function() {
  console.log("Hi!");
}
								

• Function expressions are treated like other variables

let, const and var

Objects

Objects are a data type

Objects store data

• Objects are a type of data structure that is nearly universal across programming languages.
• Like arrays, objects can hold multiple pieces of data of varying types.
• Objects store data and are accessed like files in a filing cabinet.

Objects

const myObject = new Object();

const myObject = {};
// Most common way is 'object literal syntax'							

Objects

Objects

• Objects are a collection of properties.

Property = Key & Value

• A property is an association between a key and a value.
• key: name (often descriptive) used to reference the data.
• • A key can be either a name, a number or a string.
• value: the data stored in that property.
• • Can be any value including arrays, null or undefined and even another object.

Key-value pair

• A property is a know as a key-value pair.

Objects are not ordered

	[
	  "Dave", 		// 0
	  "Benson-Phillips",	// 1
	  55			// 2
	]
									

{
  name: "Dave",
  lastName: "Benson-Phillips",
  age: 55
}
								

A method is a function property

const animal = {
  type: 'dog',
  speak: function() {
	console.log("Woof!");
  }
}
							

A method is a function property

Get / Set Properties

Dot Notation

const person = {
  name: 'Wilson',
  location: 'London',
  shout: function() {
	console.log("I hate lockdown");
  }
};
							

person.name // getting a value
=> "Wilson"

							

person.name = 'Steven'; // setting a value
=> "Steven"
							

person.shout() // calling a method
=> "I hate lockdown"
							

Bracket Notation

const person = {
  name: 'Wilson',
  location: 'London',
  shout: function() {
	console.log("I hate lockdown");
  }
};
							

person['name']
=> "Wilson"
							

person['name'] = 'Steven';
=> "Steven";
							

person['whisper'] = function() {
  console.log("Social distancing is my jam");
};
							

Using a variable as a property

const name = 'Jayne';
const object = {
    name: name
};

object;
=> { name: "Jayne" }
							

const object = { name }; // ES6 syntax
								

Property value shorthand

const name = 'Adrianna';
const nationality = 'Polish';
const dob = '1990-10-10';

const person = { name, nationality, dob };

person;
=> Object { name: "Adrianna", nationality: "Polish", dob: "1990-10-10" };
							

Destructuring

const person = { name: 'Adrianna', nationality: 'Polish', dob: '1990-10-10' };
const { name, dob, nationality } = person;

name;
=> "Adrianna";

nationality;
=> "Polish";

dob;
=> "1990-10-10";
							

Deleting Properties

const classroom = {
  name: 'JSD 9',
  type: 'Remote',
  start: '11/05/2020'
};

delete classroom.start;

classroom
=> Object { name: "WDI 2", type: "Remote" }
							

Real World Scenarios

Objects in the Real World

Objects = Nouns

Properties = Adjectives

Properties = Adjectives

JSON

Objects vs JSON

const course = {
  name: 'JSD',
  weeks: 10,
  location: 'Remote',
  instructor; 'Wilson Espina',
  students: [
    'Mr Motivator',
    'Cathy Burke',
    'Carl Cox',
    'Steven King',
    'Susie Dent'
  ],
  dates: {
    start: '2020-05-11',
    end: '2020-07-20'
  }
}
								

const course = {
  "name": "JSD",
  "weeks": 10,
  "location": "Remote",
  "instructor": "Wilson Espina",
  "students": [
    "Mr Motivator",
    "Cathy Burke",
    "Carl Cox",
    "Steven King",
    "Susie Dent"
  ],
  "dates": {
    "start": "2020-05-11",
    "end": "2020-07-20"
  }
}
								

JSON

const course = {
  "name": "JSD",
  "weeks": 10,
  "location": "Remote",
  "instructor": "Wilson Espina",
  "students": [
    "Mr Motivator",
    "Cathy Burke",
    "Carl Cox",
    "Steven King",
    "Susie Dent"
  ],
  "dates": {
    "start": "2020-05-11",
    "end": "2020-07-20"
  }
}
								

JSON is not JavaScript Specific

JSON in action

"Programme": {
  "title": "Coronation Street",
  "synopsis":
  	"Geoff forces Yasmeen into an embarrassing situation in the Rovers.",
  "image":
  	"https://images-itv.com/episode/8290/1019",
  "description":
  	"Geoff forces Yasmeen into an embarrassing situation in the Rovers.",
  "dateTime": "2020-05-01T18:30:00.000Z",
  "channel": "itv",
  "production":
  	{ "productionId": "8290/1019/11",
	  "productionType": "PROGRAMME"
	}
}
							

JSON Rules

• JSON object must be surrounded by curly braces {}
• Name-value pairs are grouped by a : and separated by a comma,.
• Each key must be unique and enclosed within double quotes ""
• No trailing commas.
• In numbers, a decimal point must be followed by at least one digit.
• Boolean values can either be true or false and NULL values are represented with null (without quotes).
• No comments.

To convert an object to JSON

JSON.stringify(object);
						

To convert an JSON to an Object

JSON.parse(json);
						

Working with nested Data Structures

Using JSON Data

const course = '{"name":"JSD","weeks":
10,"location":"Remote","instructor":
"Wilson Espina","students":["Mr 
Motivator","Cathy Burke","Carl Cox",
"Steven King","Susie Dent"],"dates":
{"start":"2020-05-11","end":"2020-07-
20"}}'
							

Working with nested data structure

Working with nested data structure

Working with nested data structure

Working with nested data structure

Working with nested data structure

Working with nested data structure

Working with nested data structure

• Know what objects and methods are
• Real World Scenarios
• Understand what is JSON
• Work with JSON-formatted data

Lookahead to Next Lesson (03/06/20)

SlackBot Lab

• Introduction to SlackBots.
• Use API keys to interact with the Hubot Framework.
• Write scripts that allow your bot to interact with users of the class Slack workspace.