<!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="RbcEnF2-SEuNCA8WjVhch_yQAr6pByxsPSHDAZfvdHsWcWmqfNVzq-oC8P4_xmtG8DqM5WUZNmCfpAkS2jOroA";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>Course «JS: Functions»: online education</title>
<meta name="description" content="Take the JS: Functions course at the Hexlet online school. Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.">
<link rel="canonical" href="https://hexlet.io/courses/js-functions">
<meta property="og:description" content="Take the JS: Functions course at the Hexlet online school. Experienced mentors, practice on simulators, open-source projects in your portfolio. Individual and group online learning at Hexlet.
">
<meta property="og:title" content="Course «JS: Functions»: online education
">
<meta property="og:url" content="https://hexlet.io/courses/js-functions">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="48gGE3sBX0BRxK57RLTBHa6ctgefF5WIuPZWfF5y756wDmslWmpkoDbOUZP2KvbcojY4XFMJj4Qac5xvE64wRQ" />
<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">
<link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"/><div id="app" data-page="{"component":"web/courses/show","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":"FC1eY_8eHhU_KOht5mVT0QbRYA-ePBrvjfQpxlrajhRH6zNV3nUl9VgiF4VU-2QQCnvuVFIiAOMvcePVFwZRzw","course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"courseMember":null,"questionsCount":37,"exercisesCount":9,"lessons":[{"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","exercise_id":null},{"ordered_units":[{"id":6639,"name":"theory","url":"/courses/js-functions/lessons/pure-functions/theory_unit"},{"id":6640,"name":"quiz","url":"/courses/js-functions/lessons/pure-functions/quiz_unit"},{"id":6671,"name":"exercise","url":"/courses/js-functions/lessons/pure-functions/exercise_unit"}],"id":2910,"slug":"pure-functions","state":"approved","name":"Pure functions","course_order":30,"goal":"Learn about the concepts of determinism and side effects","exercise_id":2053},{"ordered_units":[{"id":6641,"name":"theory","url":"/courses/js-functions/lessons/command-query-separation/theory_unit"},{"id":6642,"name":"quiz","url":"/courses/js-functions/lessons/command-query-separation/quiz_unit"}],"id":2911,"slug":"command-query-separation","state":"approved","name":"Command–query separation","course_order":40,"goal":"Meet the CQS principle","exercise_id":null},{"ordered_units":[{"id":6643,"name":"theory","url":"/courses/js-functions/lessons/rest-operator/theory_unit"},{"id":6644,"name":"quiz","url":"/courses/js-functions/lessons/rest-operator/quiz_unit"},{"id":6663,"name":"exercise","url":"/courses/js-functions/lessons/rest-operator/exercise_unit"}],"id":2912,"slug":"rest-operator","state":"approved","name":"Rest parameter syntax (packing arguments)","course_order":50,"goal":"Learn how to use the rest syntax to form an array from function arguments","exercise_id":2055},{"ordered_units":[{"id":6645,"name":"theory","url":"/courses/js-functions/lessons/spread-operator/theory_unit"},{"id":6646,"name":"quiz","url":"/courses/js-functions/lessons/spread-operator/quiz_unit"},{"id":6664,"name":"exercise","url":"/courses/js-functions/lessons/spread-operator/exercise_unit"}],"id":2913,"slug":"spread-operator","state":"approved","name":"Spread syntax (unpacking arguments)","course_order":70,"goal":"Learn how to use the spread syntax with a function call","exercise_id":2061},{"ordered_units":[{"id":6647,"name":"theory","url":"/courses/js-functions/lessons/params-destructuring/theory_unit"}],"id":2914,"slug":"params-destructuring","state":"approved","name":"Parameter destructuring","course_order":80,"goal":"Learn how to apply the destructuring assignment for function parameters","exercise_id":null},{"ordered_units":[{"id":6648,"name":"theory","url":"/courses/js-functions/lessons/first-class-citizen/theory_unit"},{"id":6649,"name":"quiz","url":"/courses/js-functions/lessons/first-class-citizen/quiz_unit"},{"id":6665,"name":"exercise","url":"/courses/js-functions/lessons/first-class-citizen/exercise_unit"}],"id":2915,"slug":"first-class-citizen","state":"approved","name":"First-class objects","course_order":200,"goal":"Consider functions as data. Learn about arrow functions","exercise_id":2044},{"ordered_units":[{"id":6650,"name":"theory","url":"/courses/js-functions/lessons/high-order-functions/theory_unit"},{"id":6651,"name":"quiz","url":"/courses/js-functions/lessons/high-order-functions/quiz_unit"},{"id":6666,"name":"exercise","url":"/courses/js-functions/lessons/high-order-functions/exercise_unit"}],"id":2916,"slug":"high-order-functions","state":"approved","name":"Higher-order functions","course_order":300,"goal":"Learn how to build abstractions using functions","exercise_id":2045},{"ordered_units":[{"id":6652,"name":"theory","url":"/courses/js-functions/lessons/map/theory_unit"},{"id":6653,"name":"quiz","url":"/courses/js-functions/lessons/map/quiz_unit"},{"id":6667,"name":"exercise","url":"/courses/js-functions/lessons/map/exercise_unit"}],"id":2917,"slug":"map","state":"approved","name":"Mapping","course_order":400,"goal":"Learn how to use the map method","exercise_id":2049},{"ordered_units":[{"id":6654,"name":"theory","url":"/courses/js-functions/lessons/filter/theory_unit"},{"id":6655,"name":"quiz","url":"/courses/js-functions/lessons/filter/quiz_unit"},{"id":6668,"name":"exercise","url":"/courses/js-functions/lessons/filter/exercise_unit"}],"id":2918,"slug":"filter","state":"approved","name":"Filtering","course_order":500,"goal":"Learn how to use the filter method","exercise_id":2042},{"ordered_units":[{"id":6656,"name":"theory","url":"/courses/js-functions/lessons/reduce/theory_unit"},{"id":6657,"name":"quiz","url":"/courses/js-functions/lessons/reduce/quiz_unit"},{"id":6669,"name":"exercise","url":"/courses/js-functions/lessons/reduce/exercise_unit"}],"id":2919,"slug":"reduce","state":"approved","name":"Reducing","course_order":600,"goal":"Learn how to use the reduce method","exercise_id":2054},{"ordered_units":[{"id":6658,"name":"theory","url":"/courses/js-functions/lessons/signals/theory_unit"},{"id":6659,"name":"quiz","url":"/courses/js-functions/lessons/signals/quiz_unit"},{"id":6670,"name":"exercise","url":"/courses/js-functions/lessons/signals/exercise_unit"}],"id":2920,"slug":"signals","state":"approved","name":"Signals","course_order":650,"goal":"Come to grips with the concept of standard interface","exercise_id":2060},{"ordered_units":[{"id":6660,"name":"theory","url":"/courses/js-functions/lessons/paradigms/theory_unit"},{"id":6661,"name":"quiz","url":"/courses/js-functions/lessons/paradigms/quiz_unit"}],"id":2921,"slug":"paradigms","state":"approved","name":"Programming paradigms","course_order":850,"goal":"Become familiar with the \"paradigm\" concept and examine the differences between imperative and declarative paradigms","exercise_id":null},{"ordered_units":[{"id":6662,"name":"theory","url":"/courses/js-functions/lessons/abstraction/theory_unit"}],"id":2922,"slug":"abstraction","state":"approved","name":"Building abstraction using functions","course_order":900,"goal":"Summarize knowledge about functions and get to grips with the concept of abstraction","exercise_id":null}],"challenges":[{"exercise":{"id":2038,"slug":"js_functions_configuration_parsing_exercise","name":"Configuration parsing","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## getForwardedVariables.js\n\nImplement and export as default a function that accepts the contents of the configuration file as a string, finds environment variables in it that need to be passed and returns them as a string in the format \"name1=value1,name2=value2,name3=value3,...\".\n\nEnvironment variables in the configuration file are set by the `environment` command, after which there is a comma-separated list of variables in quotation marks.\n\n ```text\n environment=\"X_FORWARDED_MAIL=tirion@google.com,X_FORWARDED_HOME=/home/tirion,language=en\"\n ```\n\nThose variables that need to be forwarded start with the prefix `X_FORWARDED_`. Variable names in the output should be without this prefix. For example, if in the configuration file the variable is set like this: `X_FORWARDED_HOME=/home/tirion`, then in the output line it should look like this: \"HOME=/home/tirion\".\n\n```text\n[program:prepare]\ncommand=sudo -HEu tirion /bin/bash -c 'cd /usr/src/app && make prepare'\nautorestart=false\nenvironment=\"X_FORWARDED_MAIL=tirion@google.com,X_FORWARDED_HOME=/home/tirion,language=en\"\n\n[program:http_server]\ncommand=sudo -HEu tirion /bin/bash -c 'cd /usr/src/app && make environment'\nenvironment=\"key5=value5,X_FORWARDED_var3=value,key6=value6\"\n```\n\n```javascript\n// Read the file contents and write it to the content constant. You don't need to implement this in your solution\nconst content = fs.readFileSync(\"s.conf\", 'utf-8');\n\n// Pass file contents to a function\nconst result = getForwardedVariables(content);\nconsole.log(result); // => \"MAIL=tirion@google.com,HOME=/home/tirion,var3=value\"\n```\n\n## Tips\n\n* Examples of configuration files can be found in the *\\_\\_fixtures\\_\\_* directory\n","prepared_readme":"## getForwardedVariables.js\n\nImplement and export as default a function that accepts the contents of the configuration file as a string, finds environment variables in it that need to be passed and returns them as a string in the format \"name1=value1,name2=value2,name3=value3,...\".\n\nEnvironment variables in the configuration file are set by the `environment` command, after which there is a comma-separated list of variables in quotation marks.\n\n ```text\n environment=\"X_FORWARDED_MAIL=tirion@google.com,X_FORWARDED_HOME=/home/tirion,language=en\"\n ```\n\nThose variables that need to be forwarded start with the prefix `X_FORWARDED_`. Variable names in the output should be without this prefix. For example, if in the configuration file the variable is set like this: `X_FORWARDED_HOME=/home/tirion`, then in the output line it should look like this: \"HOME=/home/tirion\".\n\n```text\n[program:prepare]\ncommand=sudo -HEu tirion /bin/bash -c 'cd /usr/src/app && make prepare'\nautorestart=false\nenvironment=\"X_FORWARDED_MAIL=tirion@google.com,X_FORWARDED_HOME=/home/tirion,language=en\"\n\n[program:http_server]\ncommand=sudo -HEu tirion /bin/bash -c 'cd /usr/src/app && make environment'\nenvironment=\"key5=value5,X_FORWARDED_var3=value,key6=value6\"\n```\n\n```javascript\n// Read the file contents and write it to the content constant. You don't need to implement this in your solution\nconst content = fs.readFileSync(\"s.conf\", 'utf-8');\n\n// Pass file contents to a function\nconst result = getForwardedVariables(content);\nconsole.log(result); // => \"MAIL=tirion@google.com,HOME=/home/tirion,var3=value\"\n```\n\n## Tips\n\n* Examples of configuration files can be found in the *\\_\\_fixtures\\_\\_* directory\n","has_solution":true,"entity_name":"Configuration parsing"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":600,"slug":"js_functions_configuration_parsing_exercise","percent_of_success":"50%"},{"exercise":{"id":2050,"slug":"js_functions_nrzi_exercise","name":"NRZI encoding","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"[NRZI code](https://en.wikipedia.org/wiki/NRZI) (Non-Return-to-Zero, Inverted) is one of the methods of linear coding. It has two signal levels and is used to transmit bit sequences containing only 0 and 1. NRZI is used, for example, in optical cables, where only two signal states are consistently recognized, light and dark.\n\n## Encoding principle\n\nWhen transmitting a logical zero to the input of the coding device, the potential set at the previous clock cycle is transmitted (that is, the state of the potential does not change), and when transmitting a logical unit, the potential inverts.\n\n\n\n## solution.js\n\nImplement and export as default a function that accepts a string as a graphical representation of a linear signal and returns a binary code string. Carefully study the examples.\n\n### Examples\n\n```javascript\nconst signal1 = '_|¯|____|¯|__|¯¯¯';\nnrzi(signal1); // '011000110100'\n\nconst signal2 = '|¯|___|¯¯¯¯¯|___|¯|_|¯';\nnrzi(signal2); // '110010000100111'\n\nconst signal3 = '¯|___|¯¯¯¯¯|___|¯|_|¯';\nnrzi(signal3); // '010010000100111'\n\nconst signal4 = '';\nnrzi(signal4); // ''\n\nconst signal5 = '|';\nnrzi(signal5); // ''\n```\n\n### Tips\n\n* The `|` char indicates the signal switching and means that the signal level in the next clock cycle will be changed to the opposite compared to the previous one\n","prepared_readme":"[NRZI code](https://en.wikipedia.org/wiki/NRZI) (Non-Return-to-Zero, Inverted) is one of the methods of linear coding. It has two signal levels and is used to transmit bit sequences containing only 0 and 1. NRZI is used, for example, in optical cables, where only two signal states are consistently recognized, light and dark.\n\n## Encoding principle\n\nWhen transmitting a logical zero to the input of the coding device, the potential set at the previous clock cycle is transmitted (that is, the state of the potential does not change), and when transmitting a logical unit, the potential inverts.\n\n\n\n## solution.js\n\nImplement and export as default a function that accepts a string as a graphical representation of a linear signal and returns a binary code string. Carefully study the examples.\n\n### Examples\n\n```javascript\nconst signal1 = '_|¯|____|¯|__|¯¯¯';\nnrzi(signal1); // '011000110100'\n\nconst signal2 = '|¯|___|¯¯¯¯¯|___|¯|_|¯';\nnrzi(signal2); // '110010000100111'\n\nconst signal3 = '¯|___|¯¯¯¯¯|___|¯|_|¯';\nnrzi(signal3); // '010010000100111'\n\nconst signal4 = '';\nnrzi(signal4); // ''\n\nconst signal5 = '|';\nnrzi(signal5); // ''\n```\n\n### Tips\n\n* The `|` char indicates the signal switching and means that the signal level in the next clock cycle will be changed to the opposite compared to the previous one\n","has_solution":true,"entity_name":"NRZI encoding"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":607,"slug":"js_functions_nrzi_exercise","percent_of_success":"100%"},{"exercise":{"id":2057,"slug":"js_functions_vertical_histogram_exercise","name":"Vertical histogram","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"Dice is a six-sided die that is thrown several times. A histogram is a graphical representation of data in the form of columns or columns.\n\n## histogram.js\n\nImplement and export as default a function that displays a vertical histogram. The function takes as input the number of dice rolls and a function that simulates the dice roll (already implemented). The output of this function is a number between 1 and 6 that represents one of the six faces of the dice.\n\nThe dice faces and the number of their rolls are represented by columns in the histogram. The results are displayed graphically (using the `#` characters) and as a percentage of the total number of rolls, except when their number is 0 (zero).\n\nAdditional conditions:\n\n* Percentage values should be left aligned relative to the column\n* The values of the dice faces should be in the middle of the column\n* Columns are separated by a space\n* The number of sections in the column (column height) must correspond to the number of falls of each side of the dice\n\n### Examples\n\n```javascript\nimport displayHistogram from '../histogram.js';\n\ndisplayHistogram(32, rollDie);\n// => 28%\n// ###\n// ###\n// 19% ###\n// ### 16% ### 16%\n// 13% ### ### ### ###\n// ### 9% ### ### ### ###\n// ### ### ### ### ### ###\n// ### ### ### ### ### ###\n// ### ### ### ### ### ###\n// -----------------------\n// 1 2 3 4 5 6\n\ndisplayHistogram(13, rollDie);\n// => 31% 31%\n// ### ###\n// 15% 15% ### ###\n// ### 8% ### ### ###\n// ### ### ### ### ###\n// -----------------------\n// 1 2 3 4 5 6\n```\n\n### Tips\n\n* [Histogram](https://en.wikipedia.org/wiki/Histogram)\n* Use the functions from the [lodash](https://lodash.com/docs) library to solve the task\n* When getting a percentage value, use the standard rules for rounding numbers\n","prepared_readme":"Dice is a six-sided die that is thrown several times. A histogram is a graphical representation of data in the form of columns or columns.\n\n## histogram.js\n\nImplement and export as default a function that displays a vertical histogram. The function takes as input the number of dice rolls and a function that simulates the dice roll (already implemented). The output of this function is a number between 1 and 6 that represents one of the six faces of the dice.\n\nThe dice faces and the number of their rolls are represented by columns in the histogram. The results are displayed graphically (using the `#` characters) and as a percentage of the total number of rolls, except when their number is 0 (zero).\n\nAdditional conditions:\n\n* Percentage values should be left aligned relative to the column\n* The values of the dice faces should be in the middle of the column\n* Columns are separated by a space\n* The number of sections in the column (column height) must correspond to the number of falls of each side of the dice\n\n### Examples\n\n```javascript\nimport displayHistogram from '../histogram.js';\n\ndisplayHistogram(32, rollDie);\n// => 28%\n// ###\n// ###\n// 19% ###\n// ### 16% ### 16%\n// 13% ### ### ### ###\n// ### 9% ### ### ### ###\n// ### ### ### ### ### ###\n// ### ### ### ### ### ###\n// ### ### ### ### ### ###\n// -----------------------\n// 1 2 3 4 5 6\n\ndisplayHistogram(13, rollDie);\n// => 31% 31%\n// ### ###\n// 15% 15% ### ###\n// ### 8% ### ### ###\n// ### ### ### ### ###\n// -----------------------\n// 1 2 3 4 5 6\n```\n\n### Tips\n\n* [Histogram](https://en.wikipedia.org/wiki/Histogram)\n* Use the functions from the [lodash](https://lodash.com/docs) library to solve the task\n* When getting a percentage value, use the standard rules for rounding numbers\n","has_solution":true,"entity_name":"Vertical histogram"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":610,"slug":"js_functions_vertical_histogram_exercise","percent_of_success":"50%"},{"exercise":{"id":2059,"slug":"js_functions_sea_battle_exercise","name":"Sea Battle 2","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"This is an advanced version of the [Sea Battle](https://hexlet.io/challenges/js_arrays_sea_battle_exercise) challenge.\n\n## solution.js\n\nImplement and export as default a function that takes the battlefield as a square two-dimensional array of zeros and ones. Zero is an empty cell, one is a part of the ship. The function should return the number of ships on the battlefield.\n\nUnlike the classic game of \"Sea Battle\", in this version, the ships can be placed in the shape of the \"г\" figure and the \"snake\".\n\n```javascript\ncalcShipsCount([]); // 0\ncalcShipsCount([\n [1, 0, 1, 1, 1, 1],\n [1, 0, 0, 0, 0, 0],\n [0, 0, 1, 0, 0, 0],\n [1, 1, 1, 0, 0, 1],\n [0, 0, 0, 0, 1, 1],\n [0, 1, 0, 0, 1, 0],\n]); // 5\n```\n\n### Tips\n\n* If necessary, use the functions from the [lodash](https://lodash.com/) library\n* The tests contain a case with square 4-deck ships on the field. Uncomment it if you want to make the task even more tricky\n","prepared_readme":"This is an advanced version of the [Sea Battle](https://hexlet.io/challenges/js_arrays_sea_battle_exercise) challenge.\n\n## solution.js\n\nImplement and export as default a function that takes the battlefield as a square two-dimensional array of zeros and ones. Zero is an empty cell, one is a part of the ship. The function should return the number of ships on the battlefield.\n\nUnlike the classic game of \"Sea Battle\", in this version, the ships can be placed in the shape of the \"г\" figure and the \"snake\".\n\n```javascript\ncalcShipsCount([]); // 0\ncalcShipsCount([\n [1, 0, 1, 1, 1, 1],\n [1, 0, 0, 0, 0, 0],\n [0, 0, 1, 0, 0, 0],\n [1, 1, 1, 0, 0, 1],\n [0, 0, 0, 0, 1, 1],\n [0, 1, 0, 0, 1, 0],\n]); // 5\n```\n\n### Tips\n\n* If necessary, use the functions from the [lodash](https://lodash.com/) library\n* The tests contain a case with square 4-deck ships on the field. Uncomment it if you want to make the task even more tricky\n","has_solution":true,"entity_name":"Sea Battle 2"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":611,"slug":"js_functions_sea_battle_exercise","percent_of_success":"100%"},{"exercise":{"id":2047,"slug":"js_functions_ip_converter_exercise","name":"IP converter","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## solution.js\n\nImplement and export the `ipToInt()` and `intToIp()` functions, which convert the representation of an IP address from an 8-bit format to a 32-bit decimal number and vice versa.\n\nThe `ipToInt()` function takes a string as input and returns a number. The function `intToIp()` works the opposite way: it takes a number as input, and returns a string.\n\n### Examples\n\n```javascript\nipToInt('128.32.10.1'); // 2149583361\nipToInt('0.0.0.0'); // 0\nipToInt('255.255.255.255'); // 4294967295\n\nintToIp(2149583361); // '128.32.10.1'\nintToIp(0); // '0.0.0.0'\nintToIp(4294967295); // '255.255.255.255'\n```\n\n### Tips\n\n* [IPv4](https://en.wikipedia.org/wiki/IPv4)\n* Use the [parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) function to convert the string to the required number system\n* Explore the possibilities of the [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) method for a number, look at examples\n* Additionally, you can use the [padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) method\n","prepared_readme":"## solution.js\n\nImplement and export the `ipToInt()` and `intToIp()` functions, which convert the representation of an IP address from an 8-bit format to a 32-bit decimal number and vice versa.\n\nThe `ipToInt()` function takes a string as input and returns a number. The function `intToIp()` works the opposite way: it takes a number as input, and returns a string.\n\n### Examples\n\n```javascript\nipToInt('128.32.10.1'); // 2149583361\nipToInt('0.0.0.0'); // 0\nipToInt('255.255.255.255'); // 4294967295\n\nintToIp(2149583361); // '128.32.10.1'\nintToIp(0); // '0.0.0.0'\nintToIp(4294967295); // '255.255.255.255'\n```\n\n### Tips\n\n* [IPv4](https://en.wikipedia.org/wiki/IPv4)\n* Use the [parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) function to convert the string to the required number system\n* Explore the possibilities of the [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) method for a number, look at examples\n* Additionally, you can use the [padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) method\n","has_solution":true,"entity_name":"IP converter"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":605,"slug":"js_functions_ip_converter_exercise","percent_of_success":"50%"},{"exercise":{"id":2041,"slug":"js_functions_filter_anagrams_exercise","name":"Anagrams filter","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"An anagram is a word or phrase formed by rearranging the letters of a different word or phrase. For example\n\n - restful — fluster\n - Santa — Satan\n - evil — live — veil\n\n### filterAnagrams.js\n\nImplement and export as default a function that finds all anagrams of a word. The function takes the source word and the checklist (array) and returns an array of all anagrams. An empty array is returned if no anagrams are found in the list.\n\n#### Examples\n\n```javascript\nfilterAnagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']);\n// ['aabb', 'bbaa']\n\nfilterAnagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']);\n// ['carer', 'racer']\n\nfilterAnagrams('laser', ['lazing', 'lazy', 'lacer']);\n// []\n```\n","prepared_readme":"An anagram is a word or phrase formed by rearranging the letters of a different word or phrase. For example\n\n - restful — fluster\n - Santa — Satan\n - evil — live — veil\n\n### filterAnagrams.js\n\nImplement and export as default a function that finds all anagrams of a word. The function takes the source word and the checklist (array) and returns an array of all anagrams. An empty array is returned if no anagrams are found in the list.\n\n#### Examples\n\n```javascript\nfilterAnagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']);\n// ['aabb', 'bbaa']\n\nfilterAnagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']);\n// ['carer', 'racer']\n\nfilterAnagrams('laser', ['lazing', 'lazy', 'lacer']);\n// []\n```\n","has_solution":true,"entity_name":"Anagrams filter"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":603,"slug":"js_functions_filter_anagrams_exercise","percent_of_success":"100%"},{"exercise":{"id":2046,"slug":"js_functions_horisontal_histogram_exercise","name":"Horizontal histogram","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"Dice is a six-sided die that is thrown several times. A histogram is a graphical representation of data using columns.\n\n## histogram.js\n\nImplement and export as default a function that displays a horizontal histogram. The function takes as input the number of dice rolls and a function that simulates the dice roll (already implemented). The output of this function is a number between 1 and 6 that represents one of the six faces of the dice.\n\nThe dice faces and the number of their rolls are represented by rows in the histogram. The results are displayed graphically (using the `#` characters) and as a numeric value, except when the number is 0 (zero).\n\n### Examples\n\n```javascript\nimport play from '../histogram.js';\n\nplay(100, rollDie);\n// => 1|####################### 23\n// 2|################## 18\n// 3|############# 13\n// 4|#################### 20\n// 5|############ 12\n// 6|############## 14\n\nplay(13, rollDie);\n// => 1|\n// 2|## 2\n// 3|# 1\n// 4|## 2\n// 5|#### 4\n// 6|#### 4\n```\n\n### Tips\n\n* [Histogram](https://en.wikipedia.org/wiki/Histogram)\n* Use the functions from the [lodash](https://lodash.com/docs) library to solve the task\n","prepared_readme":"Dice is a six-sided die that is thrown several times. A histogram is a graphical representation of data using columns.\n\n## histogram.js\n\nImplement and export as default a function that displays a horizontal histogram. The function takes as input the number of dice rolls and a function that simulates the dice roll (already implemented). The output of this function is a number between 1 and 6 that represents one of the six faces of the dice.\n\nThe dice faces and the number of their rolls are represented by rows in the histogram. The results are displayed graphically (using the `#` characters) and as a numeric value, except when the number is 0 (zero).\n\n### Examples\n\n```javascript\nimport play from '../histogram.js';\n\nplay(100, rollDie);\n// => 1|####################### 23\n// 2|################## 18\n// 3|############# 13\n// 4|#################### 20\n// 5|############ 12\n// 6|############## 14\n\nplay(13, rollDie);\n// => 1|\n// 2|## 2\n// 3|# 1\n// 4|## 2\n// 5|#### 4\n// 6|#### 4\n```\n\n### Tips\n\n* [Histogram](https://en.wikipedia.org/wiki/Histogram)\n* Use the functions from the [lodash](https://lodash.com/docs) library to solve the task\n","has_solution":true,"entity_name":"Horizontal histogram"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":604,"slug":"js_functions_horisontal_histogram_exercise","percent_of_success":"100%"},{"exercise":{"id":2039,"slug":"js_functions_count_by_years_exercise","name":"Coeval counter","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## users.js\n\nImplement and export as default a function that takes a list of users and returns an object where the key is the birth year and the value is the number of men born that year.\n\n### Examples\n\n```javascript\nconst users = [\n { name: 'Bronn', gender: 'male', birthday: '1973-03-23' },\n { name: 'Reigar', gender: 'male', birthday: '1973-11-03' },\n { name: 'Eiegon', gender: 'male', birthday: '1963-11-03' },\n { name: 'Sansa', gender: 'female', birthday: '2012-11-03' },\n { name: 'Jon', gender: 'male', birthday: '1980-11-03' },\n { name: 'Robb', gender: 'male', birthday: '1980-05-14' },\n { name: 'Tisha', gender: 'female', birthday: '2012-11-03' },\n { name: 'Rick', gender: 'male', birthday: '2012-11-03' },\n { name: 'Joffrey', gender: 'male', birthday: '1999-11-03' },\n { name: 'Edd', gender: 'male', birthday: '1973-11-03' },\n];\n\ngetMenCountByYear(users);\n// {\n// 1973: 3,\n// 1963: 1,\n// 1980: 2,\n// 2012: 1,\n// 1999: 1,\n// };\n```\n\n### Tips\n\n* To extract the year from a date use the [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) method\n","prepared_readme":"## users.js\n\nImplement and export as default a function that takes a list of users and returns an object where the key is the birth year and the value is the number of men born that year.\n\n### Examples\n\n```javascript\nconst users = [\n { name: 'Bronn', gender: 'male', birthday: '1973-03-23' },\n { name: 'Reigar', gender: 'male', birthday: '1973-11-03' },\n { name: 'Eiegon', gender: 'male', birthday: '1963-11-03' },\n { name: 'Sansa', gender: 'female', birthday: '2012-11-03' },\n { name: 'Jon', gender: 'male', birthday: '1980-11-03' },\n { name: 'Robb', gender: 'male', birthday: '1980-05-14' },\n { name: 'Tisha', gender: 'female', birthday: '2012-11-03' },\n { name: 'Rick', gender: 'male', birthday: '2012-11-03' },\n { name: 'Joffrey', gender: 'male', birthday: '1999-11-03' },\n { name: 'Edd', gender: 'male', birthday: '1973-11-03' },\n];\n\ngetMenCountByYear(users);\n// {\n// 1973: 3,\n// 1963: 1,\n// 1980: 2,\n// 2012: 1,\n// 1999: 1,\n// };\n```\n\n### Tips\n\n* To extract the year from a date use the [slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) method\n","has_solution":true,"entity_name":"Coeval counter"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":601,"slug":"js_functions_count_by_years_exercise","percent_of_success":"100%"},{"exercise":{"id":2040,"slug":"js_functions_dictionaries_merge_exercise","name":"Merging dictionaries","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## dictionary.js\n\nImplement and export as default a function that merges several dictionaries (objects) into a single dictionary. The function takes any number of arguments and returns an object in which each key contains a list of unique values as an array. The items in the list are arranged in the order in which they appear in the given dictionaries.\n\nExamples:\n\n```javascript\nmerge({}, {}, {});\n// {}\n\nmerge({ a: 1, b: 2 }, { a: 3 });\n// { a: [1, 3], b: [2] }\n\nmerge(\n { a: 1, b: 2, c: 3 },\n {},\n { a: 3, b: 2, d: 5 },\n { a: 6 },\n { b: 4, c: 3, d: 2 },\n { e: 9 },\n );\n// { a: [1, 3, 6], b: [2, 4], c: [3], d: [5, 2], e: [9] }\n```\n","prepared_readme":"## dictionary.js\n\nImplement and export as default a function that merges several dictionaries (objects) into a single dictionary. The function takes any number of arguments and returns an object in which each key contains a list of unique values as an array. The items in the list are arranged in the order in which they appear in the given dictionaries.\n\nExamples:\n\n```javascript\nmerge({}, {}, {});\n// {}\n\nmerge({ a: 1, b: 2 }, { a: 3 });\n// { a: [1, 3], b: [2] }\n\nmerge(\n { a: 1, b: 2, c: 3 },\n {},\n { a: 3, b: 2, d: 5 },\n { a: 6 },\n { b: 4, c: 3, d: 2 },\n { e: 9 },\n );\n// { a: [1, 3, 6], b: [2, 4], c: [3], d: [5, 2], e: [9] }\n```\n","has_solution":true,"entity_name":"Merging dictionaries"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":602,"slug":"js_functions_dictionaries_merge_exercise","percent_of_success":"100%"},{"exercise":{"id":2058,"slug":"js_functions_same_parity_exercise","name":"Same parity","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## sameParityFilter.js\n\nImplement and export as default a function that takes an array as input and returns a new one consisting of elements that have the same parity as the first element of the input array.\n\n### Examples\n\n```javascript\nsameParity([-1, 0, 1, -3, 10, -2]); // [-1, 1, -3]\nsameParity([2, 0, 1, -3, 10, -2]); // [2, 0, 10, -2]\nsameParity([]); // []\n```\n","prepared_readme":"## sameParityFilter.js\n\nImplement and export as default a function that takes an array as input and returns a new one consisting of elements that have the same parity as the first element of the input array.\n\n### Examples\n\n```javascript\nsameParity([-1, 0, 1, -3, 10, -2]); // [-1, 1, -3]\nsameParity([2, 0, 1, -3, 10, -2]); // [2, 0, 10, -2]\nsameParity([]); // []\n```\n","has_solution":true,"entity_name":"Same parity"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":609,"slug":"js_functions_same_parity_exercise","percent_of_success":"100%"},{"exercise":{"id":2056,"slug":"js_functions_rgb_hex_conversion_exercise","name":"Color model conversion","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"Hexadecimal numbers are used in HTML and CSS to specify colors. The grid sign `#` is put in front of the hexadecimal number, for example, `#135278`, to prevent confusion when determining the numeral system. The color designation (rrggbb) is broken up into three parts, with the first two symbols designating the color's red component, the middle two symbols its green component, and the last two symbols its blue component. In the hexadecimal system, each of the three colors - red, green, and blue — can thus take values ranging from 00 to FF.\n\n## solution.js\n\nWhen working with colors, it is often required to obtain separate values of the red, green and blue (RGB) color components in decimal and vice versa. Implement and export the functions `rgbToHex()` and `hexToRgb()`, which return the corresponding color model.\n\n### Examples\n\n```javascript\nhexToRgb('#24ab00'); // { r: 36, g: 171, b: 0 }\n\nrgbToHex(36, 171, 0); // '#24ab00'\n```\n\n### Tips\n\n* You may find of use for the [chunk](https://lodash.com/docs#chunk) function from the lodash library\n* Use the [parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) function to convert the string into the required numeral system\n* Explore the possibilities of the [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) method for a number, look at examples\n* Additionally, you can use the [padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) method\n","prepared_readme":"Hexadecimal numbers are used in HTML and CSS to specify colors. The grid sign `#` is put in front of the hexadecimal number, for example, `#135278`, to prevent confusion when determining the numeral system. The color designation (rrggbb) is broken up into three parts, with the first two symbols designating the color's red component, the middle two symbols its green component, and the last two symbols its blue component. In the hexadecimal system, each of the three colors - red, green, and blue — can thus take values ranging from 00 to FF.\n\n## solution.js\n\nWhen working with colors, it is often required to obtain separate values of the red, green and blue (RGB) color components in decimal and vice versa. Implement and export the functions `rgbToHex()` and `hexToRgb()`, which return the corresponding color model.\n\n### Examples\n\n```javascript\nhexToRgb('#24ab00'); // { r: 36, g: 171, b: 0 }\n\nrgbToHex(36, 171, 0); // '#24ab00'\n```\n\n### Tips\n\n* You may find of use for the [chunk](https://lodash.com/docs#chunk) function from the lodash library\n* Use the [parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) function to convert the string into the required numeral system\n* Explore the possibilities of the [toString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) method for a number, look at examples\n* Additionally, you can use the [padStart()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) method\n","has_solution":true,"entity_name":"Color model conversion"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":608,"slug":"js_functions_rgb_hex_conversion_exercise","percent_of_success":"100%"},{"exercise":{"id":2037,"slug":"js_functions_bar_chart_exercise","name":"Bar chart","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## solution.js\n\nImplement and export as default a function that displays a bar chart. The function takes as input a series of numbers with a length equal to the number of columns in the chart. The vertical size of the chart should be determined by the input data.\n\n### Examples\n\n```javascript\nimport barChart from '../solution.js';\n\nbarChart([5, 10, -5, -3, 7]);\n// => *\n// *\n// *\n// * *\n// * *\n// ** *\n// ** *\n// ** *\n// ** *\n// ** *\n// ##\n// ##\n// ##\n// #\n// #\n\nbarChart([5, -2, 10, 6, 1, 2, 6, 4, 8, 1, -1, 7, 3, -5, 5]);\n// => *\n// *\n// * *\n// * * *\n// ** * * *\n// * ** * * * *\n// * ** *** * *\n// * ** *** ** *\n// * ** **** ** *\n// * ******** ** *\n// # # #\n// # #\n// #\n// #\n// #\n```\n\n### Tips\n\n* Use [lodash](https://lodash.com/docs) functions in your solution\n","prepared_readme":"## solution.js\n\nImplement and export as default a function that displays a bar chart. The function takes as input a series of numbers with a length equal to the number of columns in the chart. The vertical size of the chart should be determined by the input data.\n\n### Examples\n\n```javascript\nimport barChart from '../solution.js';\n\nbarChart([5, 10, -5, -3, 7]);\n// => *\n// *\n// *\n// * *\n// * *\n// ** *\n// ** *\n// ** *\n// ** *\n// ** *\n// ##\n// ##\n// ##\n// #\n// #\n\nbarChart([5, -2, 10, 6, 1, 2, 6, 4, 8, 1, -1, 7, 3, -5, 5]);\n// => *\n// *\n// * *\n// * * *\n// ** * * *\n// * ** * * * *\n// * ** *** * *\n// * ** *** ** *\n// * ** **** ** *\n// * ******** ** *\n// # # #\n// # #\n// #\n// #\n// #\n```\n\n### Tips\n\n* Use [lodash](https://lodash.com/docs) functions in your solution\n","has_solution":true,"entity_name":"Bar chart"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":599,"slug":"js_functions_bar_chart_exercise","percent_of_success":"100%"},{"exercise":{"id":2048,"slug":"js_functions_ipv6_validator_exercise","name":"IPv6 validator","state":"active","kind":"challenge","language":"javascript","locale":"en","has_web_view":false,"has_test_view":false,"reviewable":true,"readme":"## validator.js\n\nImplement and export as default the predicate function `isValidIPv6()` that checks if IPv6 addresses (the sixth version of the Internet Protocol) are valid. The function takes a string with an IPv6 address as input and returns `true` if the address is valid, otherwise `false`.\n\nAdditional conditions:\n\n- The function does not depend on the case of characters\n- Leading zeros in digit groups are optional\n- The longest sequence of groups of zeros, for example, `:0:0:0:` can be replaced with two colons `::`. Such a substitution can be made only once\n- One group of zeros `:0:` cannot be replaced by `::`\n\n### Examples\n\n```javascript\nisValidIPv6('10:d3:2d06:24:400c:5ee0:be:3d'); // true\nisValidIPv6('0B0:0F09:7f05:e2F3:0D:0:e0:7000'); // true\nisValidIPv6('000::B36:3C:00F0:7:937'); // true\nisValidIPv6('::1'); // true\n\nisValidIPv6('2607:G8B0:4010:801::1004'); // false\nisValidIPv6('1001:208:67:4f00:e3::2c6:0'); // false\nisValidIPv6('2.001::'); // false\nisValidIPv6('9f8:0:69S0:9:9:d9a:672:f90d'); // false\n```\n\n### Tips\n\n* [IPv6](https://en.wikipedia.org/wiki/IPv6)\n* To check for borderline cases, carefully examine the list of IP addresses in the file with tests\n","prepared_readme":"## validator.js\n\nImplement and export as default the predicate function `isValidIPv6()` that checks if IPv6 addresses (the sixth version of the Internet Protocol) are valid. The function takes a string with an IPv6 address as input and returns `true` if the address is valid, otherwise `false`.\n\nAdditional conditions:\n\n- The function does not depend on the case of characters\n- Leading zeros in digit groups are optional\n- The longest sequence of groups of zeros, for example, `:0:0:0:` can be replaced with two colons `::`. Such a substitution can be made only once\n- One group of zeros `:0:` cannot be replaced by `::`\n\n### Examples\n\n```javascript\nisValidIPv6('10:d3:2d06:24:400c:5ee0:be:3d'); // true\nisValidIPv6('0B0:0F09:7f05:e2F3:0D:0:e0:7000'); // true\nisValidIPv6('000::B36:3C:00F0:7:937'); // true\nisValidIPv6('::1'); // true\n\nisValidIPv6('2607:G8B0:4010:801::1004'); // false\nisValidIPv6('1001:208:67:4f00:e3::2c6:0'); // false\nisValidIPv6('2.001::'); // false\nisValidIPv6('9f8:0:69S0:9:9:d9a:672:f90d'); // false\n```\n\n### Tips\n\n* [IPv6](https://en.wikipedia.org/wiki/IPv6)\n* To check for borderline cases, carefully examine the list of IP addresses in the file with tests\n","has_solution":true,"entity_name":"IPv6 validator"},"course":{"start_lesson":{"exercise":null,"units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"links":[],"ordered_units":[{"id":6637,"name":"theory","url":"/courses/js-functions/lessons/about/theory_unit"}],"id":2908,"slug":"about","state":"approved","name":"About course","course_order":1,"goal":"Learn about the course, its structure, objectives, and goals","self_study":null,"theory_video_provider":null,"theory_video_uid":null,"theory":"Functions is a powerful tool with a wide range of possibilities. This course is designed to help you get to grips with the functions for real. Everything before this course is just the tip of the iceberg.\n\nIn this course, we will learn how to create functions so that code is predictable and convenient. Let's examine the handling of collections and see how functions are used in libraries and modern web frameworks.\n\nBasic concepts of the course:\n\n* Net functions and side effects. Determinacy.\n* Scope and closure\n* Spread and rest operators\n* Objects of the first kind\n* Higher order functions\n* Functional programming\n\nThe topics and features listed above are not always present in a JS developer's daily routine (and even more so in other languages), but it's important to be aware of them. First, the approaches covered in this course are not specific to JavaScript. Knowing them will make it much easier for you to switch to other languages. \nSecondly, working with functions will significantly boost your programming skills.\n"},"id":290,"slug":"js-functions","challenges_count":13,"name":"JS: Functions","allow_indexing":true,"state":"approved","course_state":"finished","pricing_type":"paid","description":"JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the \"mapping\", \"filtering\", and \"aggregation\" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.","kind":"basic","updated_at":"2026-01-20T11:37:36.345Z","language":"javascript","duration_cache":47220,"skills":["Use advanced function capabilities to write concise and efficient code","Separate pure functions from those with side effects","Use higher-order functions (map/filter/reduce) to handle collections","Recognize the imperative and declarative (functional) paradigms"],"keywords":[],"lessons_count":14,"cover":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png"},"id":606,"slug":"js_functions_ipv6_validator_exercise","percent_of_success":"100%"}],"recommendedLandings":[{"stack":{"id":15,"slug":"frontend","title":"Frontend Developer","audience":"for_beginners","start_type":"anytime","pricing_model":"purchase","priority":"low","kind":"profession","state":"published","stack_state":"finished","order":1,"duration_in_months":10},"id":22,"slug":"frontend","title":"Frontend Developer","subtitle":"","subtitle_for_lists":"","locale":"en","current":true,"duration_in_months_text":"10 months","stack_slug":"frontend","price_text":"from $49","duration_text":"10 months","cover_list_variant":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png"}]},"url":"/courses/js-functions","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="--container-size:var(--container-size-lg);margin-top:var(--mantine-spacing-xl);height:100%" class="m_7485cace mantine-Container-root" data-size="lg" data-strategy="block"><style data-mantine-styles="inline">.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}@media(min-width: 36em){.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}}</style><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root __m__-_R_eub_"><style data-mantine-styles="inline">.__m__-_R_deub_{width:100%;}@media(min-width: 62em){.__m__-_R_deub_{width:66%;}}</style><div class="__m__-_R_deub_"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="1">Course “JS: Functions”</h1></div></div></div><style data-mantine-styles="inline">.__m__-_R_1iub_{width:100%;}@media(min-width: 62em){.__m__-_R_1iub_{width:66%;}}</style><div style="margin-bottom:var(--mantine-spacing-xl)" class="__m__-_R_1iub_"><div style="margin-bottom:var(--mantine-spacing-lg)" class=""></div><div style="margin-top:var(--mantine-spacing-lg)" class="mantine-hidden-from-md"><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-color:var(--mantine-color-white);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="md" data-underline="hover" href="https://hexlet.io/subscription/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe</span></span></a><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm);text-align:center" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Access this and all courses with a subscription</p></div></div></div><style data-mantine-styles="inline">.__m__-_R_2iub_{--grid-gutter:var(--mantine-spacing-md);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_2iub_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_dmiub_"><div style="margin-bottom:var(--mantine-spacing-xl);padding-inline:var(--mantine-spacing-xl);padding-block:var(--mantine-spacing-lg)" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><p style="margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">What's included</p><style data-mantine-styles="inline">.__m__-_R_ajddmiub_{--sg-spacing-x:var(--mantine-spacing-xs);--sg-spacing-y:var(--mantine-spacing-xs);--sg-cols:1;}@media(min-width: 48em){.__m__-_R_ajddmiub_{--sg-cols:2;}}</style><div class="m_2415a157 mantine-SimpleGrid-root __m__-_R_ajddmiub_"><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_1mqjddmiub_"><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:var(--mantine-spacing-xs);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-check "><path d="M5 12l5 5l10 -10"></path></svg></div>14 lessons (video and/or text)</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_2mqjddmiub_"><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:var(--mantine-spacing-xs);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-check "><path d="M5 12l5 5l10 -10"></path></svg></div>9 exercises in the simulator</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_3mqjddmiub_"><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:var(--mantine-spacing-xs);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-check "><path d="M5 12l5 5l10 -10"></path></svg></div>37 verification tests</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_4mqjddmiub_"><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:var(--mantine-spacing-xs);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-check "><path d="M5 12l5 5l10 -10"></path></svg></div>Self-study tasks</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5mqjddmiub_"><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:var(--mantine-spacing-xs);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-check "><path d="M5 12l5 5l10 -10"></path></svg></div>Extra materials</div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_6mqjddmiub_"><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:var(--mantine-spacing-xs);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-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div>14 extended materials</div></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Description</h2><div class="m_d08caa0 mantine-Typography-root"><p>JavaScript functions go much beyond what you already know! You will learn about first-class objects, lambda functions, and higher-order functions in this course. Learn how to do the "mapping", "filtering", and "aggregation" operations, as well as how to pass and take an infinite number of arguments. Learn about external libraries that make programming much simpler.</p></div></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">You will learn</h2><ul class="m_abbac491 mantine-List-root" data-type="none"><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><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;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-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Use advanced function capabilities to write concise and efficient code</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><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;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-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Separate pure functions from those with side effects</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><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;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-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Use higher-order functions (map/filter/reduce) to handle collections</span></div></li><li style="margin-bottom:var(--mantine-spacing-xs);line-height:var(--mantine-line-height-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><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;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-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg></div></span><span class="mantine-List-itemLabel">Recognize the imperative and declarative (functional) paradigms</span></div></li></ul></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Syllabus</h2><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m_b23fa0ef mantine-Table-table"><tbody class="m_b2404537 mantine-Table-tbody"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/about/theory_unit">About course</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn about the course, its structure, objectives, and goals</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/pure-functions/theory_unit">Pure functions</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn about the concepts of determinism and side effects</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">3</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/command-query-separation/theory_unit">Command–query separation</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Meet the CQS principle</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/rest-operator/theory_unit">Rest parameter syntax (packing arguments)</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to use the rest syntax to form an array from function arguments</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/spread-operator/theory_unit">Spread syntax (unpacking arguments)</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to use the spread syntax with a function call</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">6</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/params-destructuring/theory_unit">Parameter destructuring</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to apply the destructuring assignment for function parameters</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">7</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/first-class-citizen/theory_unit">First-class objects</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Consider functions as data. Learn about arrow functions</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">8</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/high-order-functions/theory_unit">Higher-order functions</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to build abstractions using functions</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">9</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/map/theory_unit">Mapping</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to use the map method</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">10</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/filter/theory_unit">Filtering</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to use the filter method</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">11</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/reduce/theory_unit">Reducing</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Learn how to use the reduce method</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">12</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/signals/theory_unit">Signals</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Come to grips with the concept of standard interface</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">13</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/paradigms/theory_unit">Programming paradigms</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Become familiar with the "paradigm" concept and examine the differences between imperative and declarative paradigms</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">14</p></td><td style="padding-block:var(--mantine-spacing-lg)" class="m_4e7aa4ef mantine-Table-td"><a style="color:inherit;font-size:var(--mantine-font-size-h5)" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses/js-functions/lessons/abstraction/theory_unit">Building abstraction using functions</a><p style="color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Summarize knowledge about functions and get to grips with the concept of abstraction</p></td></tr></tbody></table></div><div style="margin-bottom:var(--mantine-spacing-xl)" class=""><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-md)" class="m_4081bf90 mantine-Group-root"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="2">Challenges</h2><button style="--ai-size:var(--ai-size-sm);--ai-bg:transparent;--ai-hover:transparent;--ai-color:var(--mantine-color-indigo-light-color);--ai-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:var(--mantine-color-dimmed)" class="mantine-focus-auto mantine-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root" data-variant="transparent" data-size="sm" type="button" aria-haspopup="dialog" aria-expanded="false" id="mantine-_R_amtddmiub_-target"><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="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-info-square-rounded "><path d="M12 9h.01"></path><path d="M11 12h1v4h1"></path><path d="M12 3c7.2 0 9 1.8 9 9c0 7.2 -1.8 9 -9 9c-7.2 0 -9 -1.8 -9 -9c0 -7.2 1.8 -9 9 -9"></path></svg></span></button></div><table style="--table-vertical-spacing:calc(0.4375rem * var(--mantine-scale))" class="m_b23fa0ef mantine-Table-table"><tbody class="m_b2404537 mantine-Table-tbody"><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Configuration parsing</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">NRZI encoding</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">3</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Vertical histogram</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">4</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Sea Battle 2</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">5</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">IP converter</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">6</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Anagrams filter</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">7</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Horizontal histogram</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">8</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Coeval counter</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">9</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Merging dictionaries</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">10</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Same parity</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">11</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Color model conversion</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">12</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Bar chart</p></td></tr><tr class="m_4e7aa4fd mantine-Table-tr" data-with-row-border="true"><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">13</p></td><td class="m_4e7aa4ef mantine-Table-td"><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">IPv6 validator</p></td></tr></tbody></table></div><div class=""><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md)" class="m_8a5d1357 mantine-Title-root" data-order="2">Recommended programs</h2><style data-mantine-styles="inline">.__m__-_R_avddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_avddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_avddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/frontend?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">10 months</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">For beginners</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Frontend Developer</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root"></p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTIzNTMsInB1ciI6ImJsb2JfaWQifX0=--f1948fb0c5a45a6d76671a1a32b8cf6f0b53ee57/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Software%20code%20testing-cuate.png" alt="Frontend Developer" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">from $49</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Explore →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&promo_position=course&promo_creative=catalog_card&promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Catalog</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">A complete list of available courses by direction</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div></div></div><style data-mantine-styles="inline">.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 62em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_lmiub_"><div style="--paper-shadow:var(--mantine-shadow-sm);margin-top:calc(-10.625rem * var(--mantine-scale));padding:0rem;position:sticky;top:calc(3.125rem * var(--mantine-scale))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root mantine-visible-from-md"><div class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="margin-bottom:var(--mantine-spacing-md)" class="m_599a2148 mantine-Card-section" data-first-section="true"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NTc1MSwicHVyIjoiYmxvYl9pZCJ9fQ==--8aefd21b8a165d7212b826fc3b458a91a3c13739/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fZmlsbCI6WzYwMCw0MDBdfSwicHVyIjoidmFyaWF0aW9uIn19--39ba06fa99226096df9fc6bb31f84e1d29ea98e9/image.png" alt="Course Cover"/></div><ul style="margin-bottom:var(--mantine-spacing-md)" class="m_abbac491 mantine-List-root"><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-device-desktop-code "><path d="M12.5 16h-8.5a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v8"></path><path d="M7 20h4"></path><path d="M9 16v4"></path><path d="M20 21l2 -2l-2 -2"></path><path d="M17 17l-2 2l2 2"></path></svg></span><span class="mantine-List-itemLabel">Run code right in the browser</span></div></li><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-infinity "><path d="M9.828 9.172a4 4 0 1 0 0 5.656a10 10 0 0 0 2.172 -2.828a10 10 0 0 1 2.172 -2.828a4 4 0 1 1 0 5.656a10 10 0 0 1 -2.172 -2.828a10 10 0 0 0 -2.172 -2.828"></path></svg></span><span class="mantine-List-itemLabel">Lifetime access</span></div></li><li style="line-height:var(--mantine-line-height-xl)" class="m_abb6bec2 mantine-List-item" data-with-icon="true" data-centered="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-clock "><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg></span><span class="mantine-List-itemLabel">Learn at your own pace</span></div></li></ul><div style="--stack-gap:var(--mantine-spacing-xs);--stack-align:stretch;--stack-justify:flex-start" class="m_6d731127 mantine-Stack-root"><a style="--button-height:var(--button-height-md);--button-padding-x:var(--button-padding-x-md);--button-fz:var(--mantine-font-size-md);--button-color:var(--mantine-color-white);text-decoration:none" class="mantine-focus-auto m_849cf0da mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="md" data-underline="hover" href="https://hexlet.io/subscription/new"><span class="m_80f1301b mantine-Button-inner"><span class="m_811560b9 mantine-Button-label">Subscribe</span></span></a><p style="color:var(--mantine-color-dimmed);font-size:var(--mantine-font-size-sm);text-align:center" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Access this and all courses with a subscription</p></div></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>