Creating and Manipulating Objects in JavaScript

Introduction

JavaScript objects are essential tools for developers, providing a versatile way to structure and manage data. Objects allow us to group related data and functions, making our code more organized and easier to work with. Whether you're new to JavaScript or a seasoned developer, understanding objects and how to manipulate them is crucial. This article will delve deep into creating and working with objects, exploring various techniques and use cases to enhance your programming skills.

What Are JavaScript Objects?

Objects in JavaScript are collections of key-value pairs, where each key can be a string or a symbol. Although other data types, like numbers or booleans, can be used as keys, they will be coerced to strings unless they are symbols. These objects serve as the backbone for many constructs in JavaScript, enabling developers to store data, model real-world entities, and encapsulate functionality.

Think of an object as a physical object, like a book, that has properties such as title, author, and pages. In JavaScript, these properties could be represented as:

let book = {
    title: "Every developer's guide",
    author: "Boniface Gordian",
    pages: 176
};

In the example above, book is an object with three properties: title, author, and pages.

Comments

[Jon Randy 🎖️]

...where each key is a string...

Unfortunately this is not correct. Keys can also be Symbols

[GreenerSoft]

Or an integer and a Boolean. This is in JSON where the keys are strings.

[Boniface Gordian]

Thank you for your comment! You’re right to highlight the difference between JavaScript objects and JSON, where keys must be strings. I’ve updated the article to clarify this distinction. I’m also planning to publish a more detailed article on JavaScript objects, where I’ll dive deeper into these concepts. I'm looking forward to sharing more insights with the community. Thanks again for engaging with the content!

[Jon Randy 🎖️]

Keys cannot be integers or Booleans, and this post has nothing to do with JSON. If you try to use anything other than a string or a symbol as an object key, it will be coerced to a string.

[GreenerSoft]

Yes, but :
let a = {1: "A", 2: "B"} or let b = {true: "C", false: "D"} are objects that can be written in JavaScript (but not in JSON).
And a[1] gives "A" and b[true] gives "C".
I agree that internally these keys are converted to strings, but JavaScript allows you to write them as integers or Booleans and access them as such.

[Jon Randy 🎖️]

Only because they're coerced to strings both on setting and getting the properties. It's completely wrong to say that Object keys can be anything other than strings or symbols.

I'm also still confused as to why you're bringing JSON into the this, since the post is not concerned with JSON at all - but you are correct that keys in JSON must always be quoted strings.

You can have some fun with property accessors though - I wrote a library to allow the use of Arrays as property accessors:

Turboprop: JS Arrays as Property Accessors!?!

Jon Randy 🎖️ ・ May 26 '22

#javascript #webdev #showdev #syntax

With it, you can do stuff like this:

// Getting
const arr = ['a', 'b', 'c']
const obj = {x: 3, y: 6, z: 9}
const str = "wxyz"

arr[[0, 2]]   // ['a', 'c']
obj[['y', 'z']]   // [6, 9]
str[[1, 3]]   // "xz"

// Setting
arr[[0, 2]] = ['p', 'q']  // arr is now ['p', 'b', 'q']
obj[['y', 'z']] = [2, 1]   // obj is now {x: 3, y: 2, z: 1}
// No setting for strings, since they are immutable

[GreenerSoft]

I agree that internally properties are only strings or symbols [ref], but I'm talking in terms of defining an object in JavaScript: you can use integers, booleans, expressions ([]), functions, getters, setters, etc. for properties.

For JSON, this is to remind beginners that it's not the same thing.

[Boniface Gordian]

Thank you for your comment! You’re right to highlight the difference between JavaScript objects and JSON, where keys must be strings. I’ve updated the article to clarify this distinction. I’m also planning to publish a more detailed article on JavaScript objects, where I’ll dive deeper into these concepts. I'm looking forward to sharing more insights with the community. Thanks again for engaging with the content!

[Boniface Gordian]

Thank you, Jon, for pointing out the important detail about JavaScript object keys being strings or symbols. I’ve updated the article to reflect this, and I appreciate your insight. I’m also working on a detailed article that will cover JavaScript objects more comprehensively, including their keys and other best practices. Keep an eye out for it—I'll be sharing more in-depth content soon. Thanks again for your feedback!