JavaScript Basics | Objects cover image

JavaScript Basics | Objects

Jonathan Barrios • September 6, 2020

javascript

Introduction

Welcome to the JavaScript Basics series for beginners. In part 6 of JavaScript Basics, we'll dive into objects, object literals, Math, and Date objects. See you there!

Prerequisites

To get the most out of this course, you should know:

In Part 6 of JavaScript Basics, we'll focus on:

Future JavaScript Basics posts include:

Note: It takes years of focused practice to become a great JavaScript engineer. This JavaScript Basics course is an introduction to JavaScript fundamentals and will improve your coding skills, but don't expect to transform into a JavaScript expert overnight instantly. Remember, the JavaScript learning journey is a marathon, not a sprint.

Objects

A JavaScript object is an assocciative array that contains a collection of properties, and each property is an association between key(property) value pairs. A property's value can be strings, numbers, booleans, arrays, and even functions, in which case we would that function a method.

Think of objects as self-contained units, with properties and a type. Compared to a car, for example, we have color, shape, weight, model, etc. In like kind, JavaScript objects have properties, which define their characteristics as well. You can create objects using object literals, with the new keyword, and with the object.create() function.

Object Literals

Object literals are comma-separated lists of name-value pairs wrapped in curly braces. Object literals encapsulate information into a tidy package.

To create an object, make a comma-separated list of colon-separated name:value pairs, wrapped around curly braces.

const developer = {
  name: 'Jonathan',
  title: 'Web Developer',
}

let value
value = developer.name
console.log(value)

value = developer.title
console.log(value)
const developer = {
  name: 'Jonathan',
  title: 'Web Developer',
  id: 10,
  double: function() {
    return this.id * 2
  },
}

let value
value = developer.name
console.log(value)

value = developer.title
console.log(value)

value = developer.double()
console.log(value)

Math Object

I wont go into the Object-oriented nature of JavaScript in this chapter but we can take a look at how we can use the JavaScript standard built-in objects. The Date and Math objects are always available and we can use them to display the date or to perform math operations. Here are some examples of math operations using the Math object.

// Math Objects
value = Math.PI
value = Math.E
value = Math.round(3.7)
value = Math.ceil(3.7)
value = Math.floor(3.7)
value = Math.sqrt(3.7)
value = Math.abs(3.7)
value = Math.pow(3, 7)
value = Math.min(3, 7, 1, -2, 56)
value = Math.max(3, 7, 1, -2, 56)
value = Math.random()

value = Math.random() * 20
value = Math.floor(Math.random() * 20 + 1)

Date Object

The Date object represents a single moment in time represented in milliseconds since 1 January 1970 UTC and is important for programming in general. You can use .getMilliseconds() to view the exact count. Here are some examples of dates using the Date object.

const today = new Date()
const new_year = new Date('1-1-2020 00:00:01')
const new_year_two = new Date('January 1 2020 00:00:02')

console.log(today)
console.log(new_year)
console.log(new_year_two)

value = today.getFullYear()
console.log(value)

Now that you finished part 6 of JavaSctipt Basics, we'll begin learning all about JavaScript Objects in Part 7. Follow me on Twitter @_jonathan_codes for more JavaScript Basics and other web development frameworks, databases, and more. As always, Happy coding! 👋🏼