Lesson notes
4 types of errors
-
Syntax Error. Incorrect use of the language. Often — extra or missing brackets or qutation marks. What to do? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.
-
Reference Error. Using a name that doesn't really exist. What to do? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.
-
Type Error. Using the wrong type, e.g. trying to call a number constant like a function. What to do? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.
-
Logic Error. Your code does the wrong thing, but the program runs and does not produce errors of types 1-3. Logic is broken. What to do? Review your code, make sure it does what it supposed to do.
Lesson transcript
You're having a party, and you're out of snacks, so you ask your friend to get some.
— Hey, could you go to the store and get some snacks, please?
And she says:
— What exactly?
And you say:
— You know, chips or something. We're out of snacks.
And she says:
— How many bags of chips do you want me to get?
And you start feeling funny already:
— Whatever, like, 5 bags.
— What kind of chips?
And you do this thing with your eyes and say "ah forget it", or go full on and describe the task in detail: "Go get 5 medium sized bags of bacon-flavored potato chips."
And 10 minutes later she comes back empty handed and says "they didn't have medium sized bags".
There are certain stereotypes about "computer people", and being this precise and kind of ridiculously explicit is one of them. Many think of people like that as being good at math or something.
The reality, of course, is more complex than that. There are no two types of people, there's a virtually infinite specter of personalities. And for certain people, computer programming comes a little bit more naturally because computers are absolutely precise and ridiculously explicit. This doesn't mean that if you don't see yourself as a "math person" you won't become a good developer. It only means you have to actively recognize and understand the way computers work.
This kind of behavior of computers leads to many errors. If you type console,log console comma log instead of console dot log, JavaScript will say "I have NO idea what you mean".
You will make mistakes and your programs will have errors. That's life. Every single computer programmer makes mistakes, and it doesn't really matter. What matters is how you deal with errors. Dealing with them is the essential skill. This makes programming unlike most other jobs: mistakes are guaranteed, you cannot avoid them completely, and dealing with mistakes is part of your job.
This "comma instead of dot" kind of mistake is the easiest to spot and to fix. It's a "syntax error" because incorrect symbol like this breaks the syntax rules of the language.
When you run a program with that kind of a mistake, JavaScript interpreter — the thing that runs your JavaScript programs — will complain: SyntaxError, and will point you to the place where it thinks the problem is.
Here we have a function definition, and in the end, there is a bracket. It shouldn't be there and it breaks the program, so JavaScript says: "SyntaxError: Unexpected token )". That bracket was unexpected.
Syntax error is like shouting nonsense. Nobody understands you.
The next kind of error is similar to syntax, but instead of breaking the syntax laws of the language you sort of break the syntax laws of your own code. Last time we've created a function called abs which returns an absolute value of a number.
If you call ads instead of abs, JavaScript interpreter will complain: ReferenceError: ads is not defined. You used a name that you think exists — but it doesn't really exist.
Multiple lines after that might seem intimidating, but they are actually there to help you. This is a stack trace — a sequence of function calls that lead to the error. When you run your program, even if it's tiny, it actually becomes a part of something bigger — a complex system of JavaScript programs that run to make your program alive. So, here you can see that the problem was in my file, the next line is the place where my code was called from, the third line is where that second place was called from, and we can go deeper still. It's like tracing footsteps backward — there's a problem, but we can go back one step at a time and see if we can find the reason.
We assume that this whole underlying system works fine, so the problem is in our code. When one of your functions calls another one, then you'll see that sequence of calls in the stack trace.
ReferenceError might occur with other constants too: for example, if your code has 10 * pi, but pi doesn't exist — you didn't create this constant with this exact name beforehand, then you'll get a ReferenceError.
Reference Error is like calling someone by a wrong name.
The next kind of error is when you confuse one thing for another. Look at this code:
First, we create a constant. Remember, it's like giving a name to something, in this case — giving a name length to a number 12. Then, on the second line, we call a function length and pass an argument — number 54. But wait! length is not a function! It's a number. Numbers are not functions, not boxes that do stuff. And this is exactly how JavaScript will complain:
This is a Type Error — the type of the thing you've used is wrong. JavaScript interpreter wouldn't tell you what the thing is, but it will tell you what it isn't. length is not a function.
Type Error is like asking your cat to do the laundry. You probably wanted to ask your roommate.
All of these errors — syntax, reference and type errors — are about wrong words. And all of them are explicit — you will see the error message and it will be clear what happened. And it's usually clear how to fix them:
-
Syntax Error? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.
-
Reference Error? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.
-
Type Error? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.
The final type of error we'll talk about today is the worst: Logic error. Say, we're writing a function that converts Fahrenheit into Celsius. To convert temperatures in degrees Fahrenheit to Celsius, subtract 32 and multiply by 5/9. For example: (50°F - 32) x 5/9 = 10°C.
Looks good, right? Let's run it, convert 50 degrees and print it:
And we get 32.22222222222222. Not 10. What happened? JavaScript didn't complain, there were no errors when running this code. The computer doesn't know what we're doing, so it just does the calculation as we asked it to. But the calculation is wrong — we made a mistake. We need to subtract 32 first, then multiply by 5/9. But we didn't put any brackets, so 32 got multiplied by 5/9 first, and then the result was substracted from the Fahrenheit temperature.
This is a Logic error. We didn't break any rules, we just did the wrong thing. This particular example was simple — we wrote a function, we ran it, and we see the incorrect result. But imagine if this function is just a small piece of a large system. A budgeting app at a large organization reports to the accounting department that they need to allocate additional $300,000 next month for the upcoming electricity bill. Emergency meetings gather, people get fired, the CEO starts drinking again. What happened?
It might be hard to find the problem: the air conditioning system expects the January temperature to be 32 degrees Celsius instead of 10 degrees because someone forgot to put brackets in their function.
Fighting logic errors is your responsibility 100%. It's sometimes hard, but expect a great relief and satisfaction in the end: ooooh, so THAT was the problem!
Now it's your turn to make mistakes! Continue to the the quiz and the exercise to feel the pain yourself.
<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">
<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="3fjfQBukgbp8aLvAhK7YklVnbOlADgB0tHYNy_wGnxaOPrJ2Os-6WhtiRCg2MO9TWc3isowQGngW88fYsdpAzQ";gon.locale="en";gon.language="en";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLScNwxM8rjQRRWqW5G6dn6-0NvLUblFemy7EvA9VsJ7Ov5wXqA";
//]]>
</script>
<meta charset="utf-8">
<title>Oh, no, errors! (And how to deal with them) | Programming fundamentals</title>
<meta name="description" content="Oh, no, errors! (And how to deal with them) / Programming fundamentals: Understand how errors arise in computer programs, how to recognize them, and how to fix them.">
<link rel="canonical" href="https://hexlet.io/courses/intro_to_programming/lessons/errors/theory_unit">
<meta name="robots" content="noarchive">
<meta property="og:title" content="Oh, no, errors! (And how to deal with them)">
<meta property="og:title" content="Programming fundamentals">
<meta property="og:description" content="Oh, no, errors! (And how to deal with them) / Programming fundamentals: Understand how errors arise in computer programs, how to recognize them, and how to fix them.">
<meta property="og:url" content="https://hexlet.io/courses/intro_to_programming/lessons/errors/theory_unit">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="CPI14nPdQkbSPJvwgZqQJ4xDQ1jk5-2sRLz58VXrZaFbNFjUUrZ5prU2ZBgzBKfmgOnNAyj596DmOTPiGDe6eg" />
<script src="/vite/assets/inertia-CgrHVkgd.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-C1cfMHAs.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-BXKrsWjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-Du9ljYPK.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/RootLayout-CUZzAr0T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DbDKujDz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DATLpQdV.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-BhY0AP_c.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-P1s4q94S.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-BsSGGK2I.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" />
<script src="/vite/assets/application-ZyVHkzwO.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-BokUl44d.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-gQnwoPhY.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-CB1F2-VC.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-BhDYOUva.css" media="screen" />
<!-- Google Tag Manager - deferred -->
<script>
// dataLayer stub сразу — пуши работают до загрузки скрипта
window.dataLayer = window.dataLayer || [];
// Сам скрипт — отложенно после load
window.addEventListener('load', function() {
setTimeout(function() {
dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
var j = document.createElement('script');
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
document.head.appendChild(j);
}, 1500);
});
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WK88TH" style="display:none;visibility:hidden" width="0"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Hexlet logo" height="24" src="https://hexlet.io/vite/assets/logo_en_light-FS-yL6XB.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Menu" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
All courses
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Everything</div>
<div class="text-muted">8</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular categories</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_backend-development">Backend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_frontend-development">Frontend Development
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Testing
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Popular courses</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Frontend Developer
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
About Hexlet
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">About company
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Blog
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.results">Results</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.career">Career</span>
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Testimonials
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.support">Support</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&promo_name=referal-program&promo_position=promo_position&promo_start=010724&promo_type=link" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.referal_program">Referal Program</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.certificates">Certificates</span>
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.vacancies">Vacancies</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.teams">Teams</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.college">College</span>
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button"><span class="translation_missing" title="translation missing: en.layouts.header.private_school">Private School</span>
</span></li>
</ul>
</li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Switch theme" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Sign up</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://hexlet.io/session/new" role="button"><span>Sign in</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">
</div>
<main class="mb-6 min-vh-100 h-100">
<div id="app" data-page="{"component":"web/courses/lessons/theory_unit","props":{"errors":{},"locale":"en","language":"en","httpsHost":"https://hexlet.io","host":"hexlet.io","colorScheme":"light","auth":{"user":{"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false}},"cloudflareTurnstileSiteKey":"0x4AAAAAAA15KmeFXzd2H0Xo","vkIdClientId":"51586979","yandexIdClientId":null,"formAuthToken":"RVmBKQTWq-YBp0wCA-UsYTQbdefENlYsH76FzMrat70Wn-wfJb2QBmats-qxexugOLH7vAgoTCC9O0_fhwZoZg","topics":[],"lesson":{"exercise":{"id":1702,"slug":"intro_to_programming_errors_exercise","name":null,"state":"active","kind":"exercise","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"Usually your job is to avoid errors and fix errors, but in this exercise you're going to **create** errors. This will help you understand where certain errors come from and help you recognize them faster in the future.\n\nYou have to work in two files — `reference.js` and `type.js`, and generate **2** errors in total.\n\n## reference.js\n\nThere is an empty function called `reference()`. The code inside that function should trigger a `ReferenceError`.\n\nRecall that `ReferenceError` occurs when you use an identifier (name) that doesn't exist. For example, if your function returns some constant, but you didn't create this constant; or there is an expression (a piece or a line of code that computes to a value, like a formula) which uses an unknown identifier.\n\n## type.js\n\nThere is an empty function called `type()`. The code inside that function should trigger a `TypeError`.\n\nRecall that `TypeError` occurs when you treat the thing incorrectly, mixing up the type. For example, if you try to call a number constant thinking it was a function constant.\n","prepared_readme":"Usually your job is to avoid errors and fix errors, but in this exercise you're going to **create** errors. This will help you understand where certain errors come from and help you recognize them faster in the future.\n\nYou have to work in two files — `reference.js` and `type.js`, and generate **2** errors in total.\n\n## reference.js\n\nThere is an empty function called `reference()`. The code inside that function should trigger a `ReferenceError`.\n\nRecall that `ReferenceError` occurs when you use an identifier (name) that doesn't exist. For example, if your function returns some constant, but you didn't create this constant; or there is an expression (a piece or a line of code that computes to a value, like a formula) which uses an unknown identifier.\n\n## type.js\n\nThere is an empty function called `type()`. The code inside that function should trigger a `TypeError`.\n\nRecall that `TypeError` occurs when you treat the thing incorrectly, mixing up the type. For example, if you try to call a number constant thinking it was a function constant.\n","has_solution":true,"entity_name":"Oh, no, errors! (And how to deal with them)"},"units":[{"id":1707,"name":"theory","url":"/courses/intro_to_programming/lessons/errors/theory_unit"},{"id":2474,"name":"quiz","url":"/courses/intro_to_programming/lessons/errors/quiz_unit"},{"id":5985,"name":"exercise","url":"/courses/intro_to_programming/lessons/errors/exercise_unit"}],"links":[],"ordered_units":[{"id":1707,"name":"theory","url":"/courses/intro_to_programming/lessons/errors/theory_unit"},{"id":2474,"name":"quiz","url":"/courses/intro_to_programming/lessons/errors/quiz_unit"},{"id":5985,"name":"exercise","url":"/courses/intro_to_programming/lessons/errors/exercise_unit"}],"id":836,"slug":"errors","state":"approved","name":"Oh, no, errors! (And how to deal with them)","course_order":170,"goal":"Understand how errors arise in computer programs, how to recognize them, and how to fix them.","self_study":null,"theory_video_provider":"youtube","theory_video_uid":"O0EHKBi7iXU","theory":"## Lesson notes\n\n### 4 types of errors\n\n1. **Syntax Error**. Incorrect use of the language. Often — extra or missing brackets or qutation marks. **What to do?** Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.\n2. **Reference Error**. Using a name that doesn't really exist. **What to do?** Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.\n3. **Type Error**. Using the wrong type, e.g. trying to call a number constant like a function. **What to do?** Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.\n4. **Logic Error**. Your code does the wrong thing, but the program runs and does not produce errors of types 1-3. Logic is broken. **What to do?** Review your code, make sure it does what it supposed to do.\n\n\n\n## Lesson transcript\n\nYou're having a party, and you're out of snacks, so you ask your friend to get some.\n\n— Hey, could you go to the store and get some snacks, please?\n\nAnd she says:\n\n— What exactly?\n\nAnd you say:\n\n— You know, chips or something. We're out of snacks.\n\nAnd she says:\n\n— How many bags of chips do you want me to get?\n\nAnd you start feeling funny already:\n\n— Whatever, like, 5 bags.\n\n— What kind of chips?\n\nAnd you do this thing with your eyes and say \"ah forget it\", or go full on and describe the task in detail: \"Go get 5 medium sized bags of bacon-flavored potato chips.\"\n\nAnd 10 minutes later she comes back empty handed and says \"they didn't have medium sized bags\".\n\nThere are certain stereotypes about \"computer people\", and being this precise and kind of ridiculously explicit is one of them. Many think of people like that as being good at math or something.\n\nThe reality, of course, is more complex than that. There are no two types of people, there's a virtually infinite specter of personalities. And for certain people, computer programming comes a little bit more naturally because computers are absolutely precise and ridiculously explicit. This doesn't mean that if you don't see yourself as a \"math person\" you won't become a good developer. It only means you have to actively recognize and understand the way computers work.\n\nThis kind of behavior of computers leads to many errors. If you type `console,log` console comma log instead of console dot log, JavaScript will say \"I have NO idea what you mean\".\n\nYou will make mistakes and your programs will have errors. That's life. Every single computer programmer makes mistakes, and it doesn't really matter. What matters is how you deal with errors. Dealing with them is the essential skill. This makes programming unlike most other jobs: mistakes are guaranteed, you cannot avoid them completely, and dealing with mistakes is part of your job.\n\nThis \"comma instead of dot\" kind of mistake is the easiest to spot and to fix. It's a \"syntax error\" because incorrect symbol like this breaks the syntax rules of the language.\n\nWhen you run a program with that kind of a mistake, JavaScript interpreter — the thing that runs your JavaScript programs — will complain: SyntaxError, and will point you to the place where it thinks the problem is.\n\n```javascript\nconst cube = (num) => {\n return num * num * num;\n})\n```\n\n```bash\n→ node test.js\n/Users/rakhim/test.js:3\n})\n ^\nSyntaxError: Unexpected token )\n at Object.exports.runInThisContext (vm.js:78:16)\n at Module._compile (module.js:543:28)\n at Object.Module._extensions..js (module.js:580:10)\n at Module.load (module.js:488:32)\n at tryModuleLoad (module.js:447:12)\n at Function.Module._load (module.js:439:3)\n at Module.runMain (module.js:605:10)\n at run (bootstrap_node.js:420:7)\n at startup (bootstrap_node.js:139:9)\n at bootstrap_node.js:535:3\n```\n\nHere we have a function definition, and in the end, there is a bracket. It shouldn't be there and it breaks the program, so JavaScript says: \"SyntaxError: Unexpected token )\". That bracket was unexpected.\n\n> Syntax error is like shouting nonsense. Nobody understands you.\n\nThe next kind of error is similar to syntax, but instead of breaking the syntax laws of the language you sort of break the syntax laws of **your own code**. Last time we've created a function called `abs` which returns an absolute value of a number.\n\n```bash\n→ node test.js\n/Users/rakhim/test.js:1\n ads(12);\n ^\nReferenceError: ads is not defined\n at Object.<anonymous> (/Users/rakhim/test.js:1:63)\n at Module._compile (module.js:571:32)\n at Object.Module._extensions..js (module.js:580:10)\n at Module.load (module.js:488:32)\n at tryModuleLoad (module.js:447:12)\n at Function.Module._load (module.js:439:3)\n at Module.runMain (module.js:605:10)\n at run (bootstrap_node.js:420:7)\n at startup (bootstrap_node.js:139:9)\n at bootstrap_node.js:535:3\n```\n\nIf you call `ads` instead of `abs`, JavaScript interpreter will complain: `ReferenceError: ads is not defined`. You used a name that you think exists — but it doesn't really exist.\n\nMultiple lines after that might seem intimidating, but they are actually there to help you. This is a **stack trace** — a sequence of function calls that lead to the error. When you run your program, even if it's tiny, it actually becomes a part of something bigger — a complex system of JavaScript programs that run to make your program alive. So, here you can see that the problem was in my file, the next line is the place where my code was called from, the third line is where that second place was called from, and we can go deeper still. It's like tracing footsteps backward — there's a problem, but we can go back one step at a time and see if we can find the reason.\n\nWe assume that this whole underlying system works fine, so the problem is in our code. When one of your functions calls another one, then you'll see that sequence of calls in the stack trace.\n\nReferenceError might occur with other constants too: for example, if your code has `10 * pi`, but `pi` doesn't exist — you didn't create this constant with this exact name beforehand, then you'll get a ReferenceError.\n\n> Reference Error is like calling someone by a wrong name.\n\nThe next kind of error is when you confuse one thing for another. Look at this code:\n\n```javascript\nconst length = 12;\nconst num = length(54);\n```\n\nFirst, we create a constant. Remember, it's like giving a name to something, in this case — giving a name `length` to a number 12. Then, on the second line, we call a function `length` and pass an argument — number 54. But wait! `length` is not a function! It's a number. Numbers are not functions, not boxes that do stuff. And this is exactly how JavaScript will complain:\n\n```bash\n→ node test.js\n/Users/rakhim/test.js:2\nconst num = length(-54);\n ^\n\nTypeError: length is not a function\n at Object.<anonymous> (/Users/rakhim/test.js:2:13)\n at Module._compile (module.js:571:32)\n at Object.Module._extensions..js (module.js:580:10)\n at Module.load (module.js:488:32)\n at tryModuleLoad (module.js:447:12)\n at Function.Module._load (module.js:439:3)\n at Module.runMain (module.js:605:10)\n at run (bootstrap_node.js:420:7)\n at startup (bootstrap_node.js:139:9)\n at bootstrap_node.js:535:3\n```\n\nThis is a **Type Error** — the type of the thing you've used is wrong. JavaScript interpreter wouldn't tell you what the thing **is**, but it will tell you what it **isn't**. `length` is not a function.\n\n> Type Error is like asking your cat to do the laundry. You probably wanted to ask your roommate.\n\nAll of these errors — syntax, reference and type errors — are about wrong words. And all of them are explicit — you will see the error message and it will be clear what happened. And it's usually clear how to fix them:\n\n1. **Syntax Error**? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.\n2. **Reference Error**? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.\n3. **Type Error**? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.\n\nThe final type of error we'll talk about today is the worst: **Logic error**. Say, we're writing a function that converts Fahrenheit into Celsius. To convert temperatures in degrees Fahrenheit to Celsius, subtract 32 and multiply by 5/9. For example: (50°F - 32) x 5/9 = 10°C.\n\n```javascript\nconst fahrToCelsius = (fahr) => {\n return fahr - 32 * 5/9;\n}\n```\n\nLooks good, right? Let's run it, convert 50 degrees and print it:\n\n```javascript\nconsole.log(fahrToCelsius(50));\n```\n\nAnd we get 32.22222222222222. Not 10. What happened? JavaScript didn't complain, there were no errors when running this code. The computer doesn't know what we're doing, so it just does the calculation as we asked it to. But the calculation is wrong — we made a mistake. We need to subtract 32 first, then multiply by 5/9. But we didn't put any brackets, so 32 got multiplied by 5/9 first, and then the result was substracted from the Fahrenheit temperature.\n\nThis is a **Logic error**. We didn't break any rules, we just did the wrong thing. This particular example was simple — we wrote a function, we ran it, and we see the incorrect result. But imagine if this function is just a small piece of a large system. A budgeting app at a large organization reports to the accounting department that they need to allocate additional $300,000 next month for the upcoming electricity bill. Emergency meetings gather, people get fired, the CEO starts drinking again. What happened?\n\nIt might be hard to find the problem: the air conditioning system expects the January temperature to be 32 degrees Celsius instead of 10 degrees because someone forgot to put brackets in their function.\n\nFighting logic errors is your responsibility 100%. It's sometimes hard, but expect a great relief and satisfaction in the end: ooooh, so THAT was the problem!\n\nNow it's your turn to make mistakes! Continue to the the quiz and the exercise to feel the pain yourself.\n"},"lessonMember":null,"courseMember":null,"course":{"start_lesson":{"exercise":null,"units":[{"id":1662,"name":"theory","url":"/courses/intro_to_programming/lessons/intro/theory_unit"}],"links":[],"ordered_units":[{"id":1662,"name":"theory","url":"/courses/intro_to_programming/lessons/intro/theory_unit"}],"id":813,"slug":"intro","state":"approved","name":"What is a computer anyway?","course_order":110,"goal":"We'll ask and try to answer some simple but important questions: What is a computer anyway? Is it smart? Do computers speak programming languages?","self_study":null,"theory_video_provider":"youtube","theory_video_uid":"muFql8Z4sCg","theory":"Every lesson includes additional materials: illustrations, recommended articles and videos, some optional resources and the full video script.\n\nThese first lessons don't have many links yet, but we're gradually going deeper and deeper, so expect more stuff as you follow along.\n\n## Video script\n\nThis is Tota.\n\nHe is a caveman.\n\nOne day he was walking in the forest, and all of a sudden a large noisy sphere appeared out of nowhere, sparkling and blinking.\n\n\"Just like Terminator movie\", - would've said Tota if he had seen Terminator.\n\nThe sphere disappeared quickly, and left a smoking black box on the grass.\n\nTota was curious, he waited for the smoke to calm down and went ahead to explore the box.\n\nIt was a heavy thing with two buttons on the side, one with an X and one with an O on its face, a long hole and a lever.\n\nBeing a caveman, Tota tried to touch it, kick it, smell it and roll it around. The box was obviously not alive, but the buttons intrigued him.\n\nTota discovered an interesting thing: if he pushed X once and O once, then pulled the lever, then O would glow for a momemnt, then X would glow for a moment.\n\nDid I tell you that Tota was remarkably smart? Top of his cave.\n\nHe then decided to push the buttons in the same way as they glow: O, then X, then pulled the lever. The box answered again.\n\nTota repeated the new pattern. There was another answer. When Tota pushed the last pattern, the box beeped and a produced a ball of lightning, scaring Tota immensely and putting the tree in front of him on fire.\n\nSo, now Tota had this weapon of sorts. He killed many animals with it, and enjoyed many meals near a fire.\n\nSoon he discovered more patterns: one would create some noise he really hated, another would spit a long leaf with markings, and others would do nothing at all.\n\nOnce Tota found an even more advanced feature of this device. He wanted to make fire again, but instead of just pushing the lever once, he pushed and held it. When he released it moments later, no fire came out, but both X and O started blinking. He desperately pressed O and they stopped blinking. From then on, simple O and a lever push produced the fire, so much easier and faster than before!\n\nHe realized that he had trained this beast just like he trained a baby wolf one day.\n\nSo... what is this thing?\n\nOf course, Tota calls it Boomwoom, but we can clearly come up with something better. At first, one might think this is some sort of overly complicated weapon. But it does some other weird stuff, like music... and even printing. It's not like a home appliance, although, some washing machines are more complicated to operate.\n\nLet's start with the buttons. Seems like the machine \"understands\" certain combinations and doesn't understand others. We don't know the meaning of the buttons and combinations, so I want to call it \"code\", as in \"I have no idea what that is, but it probably means something\". Some codes work, some don't, just like in our speech some sounds mean something, and others don't. 'Language' seems like a good word for it. This machine understands certain language of codes.\n\nOkay, how do we call this machine then? Code-language-understander? \"Understand\" sounds important to us, but the key thing about the machine is not that it just understands, but does something as a result. It understands the code for \"fire flash\", and immediately produces the fire flash. So, it's more like... code-language-performer? It performs some actions.\n\nThe guy from the future who sent this thing to the stone age might call it differently, but we today would definitely call this machine a \"computer\". That's how we call machines that accept code and perform some actions.\n\nYou might think this is a terrible computer with some terrible code. Today we have these magical devices with awesome features and programming languages with easy to read codes like this:\n\nBy the way, you will be able to write and understand this easily by the end of the course.\n\nAnd yes, nowadays computers are different. But... not too different. We haven't yet explored this machine thoroughly enough, but trust me: fundamentally, they are the same. Just like this... is very different to this... both use the same principles and capable of the same thing, to different extent.\n\nSo, we can keep looking at that weird machine and understand something important about computer programming in general:\n\nFirst: Computer understands a particular, strict language. Random pushes don't do much, only certain combinations work. And one tiny mistake in a pattern breaks everything. And second: Computers are really stupid\n\nYou might think this last part is due to this particular computer being weird and underpowered, but I am really talking about computers in general. They are very powerful but very stupid. Make no mistake, all they do is perform whatever we tell them. No magic. But, of course, for Tota it's magic indeed, just like some modern devices are magic to us, unless we learn computer programming. Fortunately, this is exactly what we are going to do in this course.\n\n## Synopsis\n\n- Computer accepts code and performs actions\n- Computer understands certain language of codes:\n - Some codes work\n - Some codes don't work\n - There are strict rules about code\n- Unlike people computers are fundamentally not smart, they only do what we tell them to do. And we tell them to do stuff using code\n- All computers are fundamentally the same. Primitive, old, underpowered computer and modern laptop use the same principles and capable of the same thing, to different extent\n\n## Additional materials\n\n- [Inside your computer - Bettina Bair](https://www.youtube.com/watch?v=AkFi90lZmXA)\n- [Punch Card Programming - Computerphile](https://www.youtube.com/watch?v=KG2M4ttzBnY)\n- [The Future of Computer Intelligence Is Everything but Artificial](https://www.wired.com/2014/06/the-future-of-computer-intelligence-is-everything-but-artificial/)\n\n\n"},"id":135,"slug":"intro_to_programming","challenges_count":4,"name":"Programming fundamentals","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"free","description":"What actually are computers? Do they speak programming languages? Is it hard to write your own programs? The answer to these, and many other questions, can be found in this course. We'll explore the nature of computers and code, and some fascinating ideas that allowed us to create modern computers, mobile phones, the internet and, you know, pretty much everything we rely on every day.","kind":"basic","updated_at":"2026-01-20T11:37:42.764Z","language":"javascript","duration_cache":67920,"skills":["Use basic language constructs: conditions, loops, functions, and others","Divide code into modules for reuse and no name conflicts","Understand key concepts for writing good code, such as code cleanliness and determinism"],"keywords":[],"lessons_count":16,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTY3OSwicHVyIjoiYmxvYl9pZCJ9fQ==--2aca53c34d52f86032c605caceb0ccdd4a9b2fa8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--6067466c2912ca31a17eddee04b8cf2a38c6ad17/image.png"},"recommendedLandings":[],"lessonMemberUnit":null,"accessToLearnUnitExists":true,"accessToCourseExists":true},"url":"/courses/intro_to_programming/lessons/errors/theory_unit","version":"1656487db0d1dd5f33634fe1070e57e55135cbeb","encryptHistory":false,"clearHistory":false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}
:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}
:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><div style="position:absolute;top:0rem" class=""></div><div style="max-width:var(--container-size-xl);height:100%;min-height:0rem" class=""><style data-mantine-styles="inline">.__m__-_R_5ub_{--grid-gutter:0rem;}</style><div style="height:100%;min-height:0rem" class="m_410352e9 mantine-Grid-root __m__-_R_5ub_"><div class="m_dee7bd2f mantine-Grid-inner" style="height:100%"><style data-mantine-styles="inline">.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:91.66666666666667%;--col-max-width:91.66666666666667%;}@media(min-width: 48em){.__m__-_R_rdub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem;display:flex" class="m_96bdd299 mantine-Grid-col __m__-_R_rdub_"><style data-mantine-styles="inline">.__m__-_R_6qrdub_{margin-top:0rem;padding-inline:var(--mantine-spacing-xs);width:100%;}@media(min-width: 48em){.__m__-_R_6qrdub_{margin-top:var(--mantine-spacing-xl);width:80%;}}@media(min-width: 62em){.__m__-_R_6qrdub_{padding-inline:var(--mantine-spacing-xl);}}</style><div style="margin-inline:auto;max-width:var(--mantine-breakpoint-xl)" class="__m__-_R_6qrdub_"><div style="color:var(--mantine-color-dimmed)" class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:calc(0.125rem * var(--mantine-scale));color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-lock "><path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6"></path><path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path><path d="M8 11v-4a4 4 0 1 1 8 0v4"></path></svg></div><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Programming fundamentals</p></div><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size);margin-bottom:var(--mantine-spacing-xl)" class="m_8a5d1357 mantine-Title-root" data-order="1">Theory: Oh, no, errors! (And how to deal with them)</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"LearningResource","name":"Oh, no, errors! (And how to deal with them)","inLanguage":"en","isPartOf":{"@type":"LearningResource","name":"Programming fundamentals"},"isAccessibleForFree":"False","hasPart":{"@type":"WebPageElement","isAccessibleForFree":"False","cssSelector":".paywalled"}}</script><div class=""><div style="--alert-color:var(--mantine-color-indigo-light-color);margin-bottom:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-lg)" class="m_66836ed3 mantine-Alert-root" id="mantine-_R_remqrdub_" role="alert" aria-describedby="mantine-_R_remqrdub_-body" aria-labelledby="mantine-_R_remqrdub_-title"><div class="m_a5d60502 mantine-Alert-wrapper"><div class="m_667f2a6a mantine-Alert-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-rocket "><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"></path><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg></div><div class="m_667c2793 mantine-Alert-body"><div class="m_6a03f287 mantine-Alert-title"><span id="mantine-_R_remqrdub_-title" class="m_698f4f23 mantine-Alert-label">Full access to materials</span></div><div id="mantine-_R_remqrdub_-body" class="m_7fa78076 mantine-Alert-message"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Sign up and get access to this and dozens of other courses</p><a style="--button-height:var(--button-height-xs);--button-padding-x:var(--button-padding-x-xs);--button-fz:var(--mantine-font-size-xs);--button-bg:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-hover:linear-gradient(45deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-filled) 100%);--button-color:var(--mantine-color-white);--button-bd:none" class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root" data-variant="gradient" data-size="xs" href="/u/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Sign up</span></span></a></div></div></div></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><div class="ratio ratio-16x9"><iframe width="100%" height="auto" src="//www.youtube.com/embed/O0EHKBi7iXU" loading="lazy" allowFullScreen="" title="video"></iframe></div></div><div class="paywalled m_d08caa0 mantine-Typography-root"><h2 id="heading-2-1">Lesson notes</h2>
<h3 id="heading-3-2">4 types of errors</h3>
<ol>
<li><strong>Syntax Error</strong>. Incorrect use of the language. Often — extra or missing brackets or qutation marks. <strong>What to do?</strong> Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.</li>
<li><strong>Reference Error</strong>. Using a name that doesn't really exist. <strong>What to do?</strong> Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.</li>
<li><strong>Type Error</strong>. Using the wrong type, e.g. trying to call a number constant like a function. <strong>What to do?</strong> Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.</li>
<li><strong>Logic Error</strong>. Your code does the wrong thing, but the program runs and does not produce errors of types 1-3. Logic is broken. <strong>What to do?</strong> Review your code, make sure it does what it supposed to do.</li>
</ol>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTczOCwicHVyIjoiYmxvYl9pZCJ9fQ==--535c8cb9ae582e8c28134e86923fdb7cfa94ec38/error_types.png" alt="three types of errors in JavaScript" loading="lazy"/></p>
<h2 id="heading-2-3">Lesson transcript</h2>
<p>You're having a party, and you're out of snacks, so you ask your friend to get some.</p>
<p>— Hey, could you go to the store and get some snacks, please?</p>
<p>And she says:</p>
<p>— What exactly?</p>
<p>And you say:</p>
<p>— You know, chips or something. We're out of snacks.</p>
<p>And she says:</p>
<p>— How many bags of chips do you want me to get?</p>
<p>And you start feeling funny already:</p>
<p>— Whatever, like, 5 bags.</p>
<p>— What kind of chips?</p>
<p>And you do this thing with your eyes and say "ah forget it", or go full on and describe the task in detail: "Go get 5 medium sized bags of bacon-flavored potato chips."</p>
<p>And 10 minutes later she comes back empty handed and says "they didn't have medium sized bags".</p>
<p>There are certain stereotypes about "computer people", and being this precise and kind of ridiculously explicit is one of them. Many think of people like that as being good at math or something.</p>
<p>The reality, of course, is more complex than that. There are no two types of people, there's a virtually infinite specter of personalities. And for certain people, computer programming comes a little bit more naturally because computers are absolutely precise and ridiculously explicit. This doesn't mean that if you don't see yourself as a "math person" you won't become a good developer. It only means you have to actively recognize and understand the way computers work.</p>
<p>This kind of behavior of computers leads to many errors. If you type <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">console,log</code> console comma log instead of console dot log, JavaScript will say "I have NO idea what you mean".</p>
<p>You will make mistakes and your programs will have errors. That's life. Every single computer programmer makes mistakes, and it doesn't really matter. What matters is how you deal with errors. Dealing with them is the essential skill. This makes programming unlike most other jobs: mistakes are guaranteed, you cannot avoid them completely, and dealing with mistakes is part of your job.</p>
<p>This "comma instead of dot" kind of mistake is the easiest to spot and to fix. It's a "syntax error" because incorrect symbol like this breaks the syntax rules of the language.</p>
<p>When you run a program with that kind of a mistake, JavaScript interpreter — the thing that runs your JavaScript programs — will complain: SyntaxError, and will point you to the place where it thinks the problem is.</p>
<div class="m_5cb1b9c8 mantine-CodeHighlightTabs-root"><div style="--sa-corner-width:0px;--sa-corner-height:0px" class="m_7b14120b mantine-CodeHighlightTabs-filesScrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><div class="m_38d99e51 mantine-CodeHighlightTabs-files"><button class="mantine-focus-auto m_5cac2e62 mantine-CodeHighlightTabs-file m_87cf2631 mantine-UnstyledButton-root" data-active="true" type="button"><span>javascript</span></button><button class="mantine-focus-auto m_5cac2e62 mantine-CodeHighlightTabs-file m_87cf2631 mantine-UnstyledButton-root" type="button"><span>bash</span></button></div></div></div><div data-orientation="horizontal" class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" style="position:absolute;--sa-thumb-width:18px" data-mantine-scrollbar="true"></div><div class="m_c44ba933 mantine-ScrollArea-scrollbar" data-hidden="true" data-orientation="vertical" style="position:absolute;--sa-thumb-height:18px" data-mantine-scrollbar="true"></div></div><div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlightTabs-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlightTabs-controls" data-with-offset="true"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlightTabs-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlightTabs-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlightTabs-pre" data-with-offset="true"><code class="m_5caae6d3 mantine-CodeHighlightTabs-code">const cube = (num) => {
return num * num * num;
})</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlightTabs-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div></div><p>Here we have a function definition, and in the end, there is a bracket. It shouldn't be there and it breaks the program, so JavaScript says: "SyntaxError: Unexpected token )". That bracket was unexpected.</p>
<blockquote>
<p>Syntax error is like shouting nonsense. Nobody understands you.</p>
</blockquote>
<p>The next kind of error is similar to syntax, but instead of breaking the syntax laws of the language you sort of break the syntax laws of <strong>your own code</strong>. Last time we've created a function called <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">abs</code> which returns an absolute value of a number.</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code">→ node test.js
/Users/rakhim/test.js:1
ads(12);
^
ReferenceError: ads is not defined
at Object.<anonymous> (/Users/rakhim/test.js:1:63)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>If you call <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">ads</code> instead of <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">abs</code>, JavaScript interpreter will complain: <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">ReferenceError: ads is not defined</code>. You used a name that you think exists — but it doesn't really exist.</p>
<p>Multiple lines after that might seem intimidating, but they are actually there to help you. This is a <strong>stack trace</strong> — a sequence of function calls that lead to the error. When you run your program, even if it's tiny, it actually becomes a part of something bigger — a complex system of JavaScript programs that run to make your program alive. So, here you can see that the problem was in my file, the next line is the place where my code was called from, the third line is where that second place was called from, and we can go deeper still. It's like tracing footsteps backward — there's a problem, but we can go back one step at a time and see if we can find the reason.</p>
<p>We assume that this whole underlying system works fine, so the problem is in our code. When one of your functions calls another one, then you'll see that sequence of calls in the stack trace.</p>
<p>ReferenceError might occur with other constants too: for example, if your code has <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">10 * pi</code>, but <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">pi</code> doesn't exist — you didn't create this constant with this exact name beforehand, then you'll get a ReferenceError.</p>
<blockquote>
<p>Reference Error is like calling someone by a wrong name.</p>
</blockquote>
<p>The next kind of error is when you confuse one thing for another. Look at this code:</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code">const length = 12;
const num = length(54);</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>First, we create a constant. Remember, it's like giving a name to something, in this case — giving a name <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">length</code> to a number 12. Then, on the second line, we call a function <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">length</code> and pass an argument — number 54. But wait! <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">length</code> is not a function! It's a number. Numbers are not functions, not boxes that do stuff. And this is exactly how JavaScript will complain:</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code">→ node test.js
/Users/rakhim/test.js:2
const num = length(-54);
^
TypeError: length is not a function
at Object.<anonymous> (/Users/rakhim/test.js:2:13)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>This is a <strong>Type Error</strong> — the type of the thing you've used is wrong. JavaScript interpreter wouldn't tell you what the thing <strong>is</strong>, but it will tell you what it <strong>isn't</strong>. <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">length</code> is not a function.</p>
<blockquote>
<p>Type Error is like asking your cat to do the laundry. You probably wanted to ask your roommate.</p>
</blockquote>
<p>All of these errors — syntax, reference and type errors — are about wrong words. And all of them are explicit — you will see the error message and it will be clear what happened. And it's usually clear how to fix them:</p>
<ol>
<li><strong>Syntax Error</strong>? Replace, remove or add symbols. Often the problem is with brackets and quotation marks: opened brackets should be closed, opened quotation marks should be closed.</li>
<li><strong>Reference Error</strong>? Check if the thing you're referencing exists. Maybe you used the wrong name, or maybe you forgot to create it.</li>
<li><strong>Type Error</strong>? Make sure you use things correctly. Often the problem is a simple mix up: you created a number constant and a function constant, but then tried to call the number. You probably meant to call the function.</li>
</ol>
<p>The final type of error we'll talk about today is the worst: <strong>Logic error</strong>. Say, we're writing a function that converts Fahrenheit into Celsius. To convert temperatures in degrees Fahrenheit to Celsius, subtract 32 and multiply by 5/9. For example: (50°F - 32) x 5/9 = 10°C.</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code">const fahrToCelsius = (fahr) => {
return fahr - 32 * 5/9;
}</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>Looks good, right? Let's run it, convert 50 degrees and print it:</p>
<div style="margin-bottom:var(--mantine-spacing-lg)" class="m_e597c321 mantine-CodeHighlight-codeHighlight" dir="ltr"><div class="m_be7e9c9c mantine-CodeHighlight-controls"><button style="--ai-bg:transparent;--ai-hover:transparent;--ai-color:inherit;--ai-bd:none" class="mantine-focus-auto mantine-active m_d498bab7 mantine-CodeHighlight-control m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="none" type="button" aria-label="Copy code"><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path></svg></span></button></div><div style="--scrollarea-scrollbar-size:calc(0.25rem * var(--mantine-scale));--sa-corner-width:0px;--sa-corner-height:0px" class="m_f744fd40 mantine-CodeHighlight-scrollarea m_d57069b5 mantine-ScrollArea-root" dir="ltr"><div style="overflow-x:hidden;overflow-y:hidden;overscroll-behavior-inline:none" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div class="m_b1336c6 mantine-ScrollArea-content"><pre class="m_2c47c4fd mantine-CodeHighlight-pre" style="padding:0"><code class="m_5caae6d3 mantine-CodeHighlight-code">console.log(fahrToCelsius(50));</code></pre></div></div></div><button class="mantine-focus-auto m_c9378bc2 mantine-CodeHighlight-showCodeButton m_87cf2631 mantine-UnstyledButton-root" data-hidden="true" type="button">Expand code</button></div>
<p>And we get 32.22222222222222. Not 10. What happened? JavaScript didn't complain, there were no errors when running this code. The computer doesn't know what we're doing, so it just does the calculation as we asked it to. But the calculation is wrong — we made a mistake. We need to subtract 32 first, then multiply by 5/9. But we didn't put any brackets, so 32 got multiplied by 5/9 first, and then the result was substracted from the Fahrenheit temperature.</p>
<p>This is a <strong>Logic error</strong>. We didn't break any rules, we just did the wrong thing. This particular example was simple — we wrote a function, we ran it, and we see the incorrect result. But imagine if this function is just a small piece of a large system. A budgeting app at a large organization reports to the accounting department that they need to allocate additional $300,000 next month for the upcoming electricity bill. Emergency meetings gather, people get fired, the CEO starts drinking again. What happened?</p>
<p>It might be hard to find the problem: the air conditioning system expects the January temperature to be 32 degrees Celsius instead of 10 degrees because someone forgot to put brackets in their function.</p>
<p>Fighting logic errors is your responsibility 100%. It's sometimes hard, but expect a great relief and satisfaction in the end: ooooh, so THAT was the problem!</p>
<p>Now it's your turn to make mistakes! Continue to the the quiz and the exercise to feel the pain yourself.</p></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:8.333333333333334%;--col-max-width:8.333333333333334%;}@media(min-width: 48em){.__m__-_R_1bdub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}</style><div style="min-width:0rem;height:100%;min-height:0rem" class="m_96bdd299 mantine-Grid-col __m__-_R_1bdub_"><div style="margin-inline:var(--mantine-spacing-xs)" class="mantine-visible-from-sm"><button style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-lg);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" data-disabled="true" data-block="true" disabled="" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label"><span style="margin-inline-end:var(--mantine-spacing-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Next</span>→</span></span></button><a style="padding-inline:0rem" class="mantine-focus-auto m_f0824112 mantine-NavLink-root m_87cf2631 mantine-UnstyledButton-root"><span class="m_690090b5 mantine-NavLink-section" data-position="left"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></div></span><div class="m_f07af9d2 mantine-NavLink-body"><span class="m_1f6ac4c4 mantine-NavLink-label">Navigation</span><span class="m_57492dcc mantine-NavLink-description">Theory</span></div><span class="m_690090b5 mantine-NavLink-section" data-position="right"></span></a><div style="margin-block:var(--mantine-spacing-lg)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div><div style="margin-block:var(--mantine-spacing-lg)" class=""><div style="justify-content:space-between;margin-bottom:calc(0.1875rem * var(--mantine-scale));color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-xs)" class="m_8bffd616 mantine-Flex-root __m__-_R_qimrbdub_"><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Completed</p><p style="font-size:var(--mantine-font-size-xs)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">0 / 16</p></div><div style="--progress-size:var(--progress-size-sm)" class="m_db6d6462 mantine-Progress-root" data-size="sm"><div style="--progress-section-size:0%;--progress-section-color:var(--mantine-color-gray-filled)" class="m_2242eb65 mantine-Progress-section" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0%"></div></div></div><div style="--toc-bg:var(--mantine-color-blue-light);--toc-color:var(--mantine-color-blue-light-color);--toc-size:var(--mantine-font-size-sm);--toc-radius:var(--mantine-radius-sm);margin-top:var(--mantine-spacing-xl)" class="m_bcaa9990 mantine-TableOfContents-root" data-variant="light" data-size="sm"></div></div><div class="mantine-hidden-from-sm"><div style="--stack-gap:0rem;--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><button style="--button-color:var(--mantine-color-white);margin-bottom:var(--mantine-spacing-xs);padding:0rem;text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" data-disabled="true" data-block="true" disabled="" type="button"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">→</span></span></button><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:var(--mantine-color-indigo-light-hover);--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding-block:var(--mantine-spacing-lg);color:inherit;width:100%" class="mantine-focus-auto m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="subtle" data-size="sm" data-disabled="true" type="button" disabled=""><span class="m_8d3afb97 mantine-ActionIcon-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-list-numbers "><path d="M11 6h9"></path><path d="M11 12h9"></path><path d="M12 18h8"></path><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path><path d="M6 10v-6l-2 2"></path></svg></span></button></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">About Hexlet</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">About us</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io/category/4316" data-target="_blank" role="button">Help</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Site Map</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Learn</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend-development">Backend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_frontend-development">Frontend
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_python">Python
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Testing
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_beginners">Popular Courses For Beginners</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Frontend Developer</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5"><span class="translation_missing" title="translation missing: en.layouts.footer_content.popular_courses_for_advanced">Popular Courses For Advanced</span></div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/web-development-free">Fundamentals of Web Development</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-development">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/css-animation">CSS Animation</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/http-api">HTTP API</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/layout-designer-positioning">Position CSS</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/cli-basics">Command line basics</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/git-basics-free">Git fundamentals</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Facebook" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.facebook.com/hexlethq"><span class="bi bi-facebook"></span>
</a></li>
<li class="me-3">
<a aria-label="Instagram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.instagram.com/hello_hexlet/"><span class="bi bi-instagram"></span>
</a></li>
<li>
<a aria-label="Twitter" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://twitter.com/Hexlet_IO"><span class="bi bi-twitter-x"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:%2B7%20717%20272%2076%2070">+7 717 272 76 70</a>
<span class="d-block opacity-50 small">free call</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Legal</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer"><span class="translation_missing" title="translation missing: en.layouts.footer_content.offer">Offer</span></a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts"><span class="translation_missing" title="translation missing: en.layouts.footer_content.contacts">Contacts</span></a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>TOO "Hexlet"</div>
<div>The Republic of Kazakhstan, Almaty</div>
<div>Auezova St., 14A</div>
<div>BIN 230340043714
</div>
</div>
</div>
</div>
</footer>
<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-CIOaBlj-.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-0bhwJkNI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-V3hfk_CP.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DejNWqwz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-B-jV56Ol.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-DOJkeu70.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-DZwEN4Zo.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-ClTF9s_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-mvvEXZQ8.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-CJocDKTE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-DH3_MBnL.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-Cj65YiRw.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-Csl7vw8x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-DeAQqnBE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-CN66HKVH.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-DQgTDFJJ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-Bfba02I7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-BcxwEZ7X.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/prop-types-DGBR76ns.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-CYyKzrjQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-SJZekO2j.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-bo78L81P.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-BhqaZ6vG.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-DlXMvSuQ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CFtMU8gd.js" as="script" crossorigin="anonymous">
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>