Register to get access to free programming courses with interactive exercises

Creating an abstraction JS: Building abstractions with data

The Cartesian coordinate system is not the only way to define graphs. Another method you can use is the polar coordinate system.

...the polar coordinate system is a two-dimensional coordinate system in which each point on a plane is determined by a distance from a reference point and an angle from a reference direction. The reference point (analogous to the origin of a Cartesian coordinate system) is called the pole, and the ray from the pole in the reference direction is the polar axis. (c) Wikipedia

Polar Coordinate System

Imagine the following situation. You are developing a graphics editor (like Photoshop), and your library for working with graphical primitives is based on the Cartesian coordinate system. At some point, you realize that switching to a polar system will make your system easier and faster. What price to pay for such a change? You have to rewrite almost all the code.

const point = { x: 2, y: 3 };
const symmetricalPoint = { x: -point.x, y: point.y };

This is because your library does not hide its internal structure. Any code that uses points or segments knows how they are programmed. This applies both to the code that creates new primitives and to the code that extracts the values from them. We can change the situation and hide the implementation using functions:

const point = makePoint(3, 4);
const symmetricalPoint = makePoint(-getX(point), getY(point));

In the example we can see three functions: makePoint(), getX() and getY(). The makePoint() function is called a constructor because it creates a new primitive, while getX() and getY() — are called selectors or getters. Such a small change causes far-reaching consequences. The main thing is that the client (the one that uses the library) of our code does not work with the structure directly.

// i.e., this isn't the right way
const point = [1, 4]; // we know that this is an array
console.log(point[1]); // direct access to the array

// So
const point = makePoint(3, 4); // we don't know how the point is set up
console.log(getY(point)); // we only access its parts through selectors

Looking at the code, you can't even tell what the point is from the inside, or what language constructs are represented (you can use the debug print for this). This is how we do data abstraction. The essence of this abstraction is that we hide the inner implementation. You could say that creating abstraction with data results in hiding that data from external code.

And here's one way to implement an abstraction when working with a point:

const makePoint = (x, y) => ({ x, y });

const getX = (point) => point.x;
const getY = (point) => point.y;

Now we can change the implementation without rewriting the whole code (however, we may still need to rewrite some parts). Although we use the makePoint(), function, which creates a point based on the Cartesian coordinate system (taking x and y coordinates as input), internally it may well be represented in the polar coordinate system. In other words, there is a translation from one system to another:

const makePoint = (x, y) => {
  // conversion
  return {
    angle: Math.atan2(y, x),
    radius: Math.sqrt(x ** 2 + y ** 2)
  };
};

Once you start working using data abstraction, there's no way back. Always stick to the features you created yourself or those provided by the library you are using.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.