{"id":129920,"date":"2022-04-13T16:42:02","date_gmt":"2022-04-13T20:42:02","guid":{"rendered":"https:\/\/brainstation.io\/?post_type=codex-reference&#038;p=129920"},"modified":"2025-02-04T14:56:26","modified_gmt":"2025-02-04T19:56:26","slug":"basics","status":"publish","type":"codex-reference","link":"https:\/\/brainstation.io\/learn\/javascript\/basics","title":{"rendered":"Basics"},"content":{"rendered":"\n<header class=\"wp-block-bstn-blocks-hero-with-overview bstn-blocks-hero-with-overview\"><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--main\"><svg fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-hero-with-overview__bg-flair--full\"><g opacity=\"0.35\"><path d=\"M-103.887 96.613H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55-136.427v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332-232v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 100.134c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M-244.061 214.487H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55 214.009v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332 118.436v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 218.03c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M534.544 96.613h140.811m138.263 0H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 96.772v21.664-21.664zM813.618-232v350.436V-232zm139.218 0v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M535.357 100.134c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M673.444 214.487H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 118.436v228.739-228.739zm138.9 0v350.436-350.436zm139.218 0v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M813.696 218.03c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm-278.339 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><\/g><\/svg><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__copy-container\"><p class=\"bstn-blocks-hero-with-overview__subtitle\"><meta charset=\"utf-8\">javascript Tutorial<\/p><h1 class=\"bstn-blocks-hero-with-overview__title\">JavaScript Basics<\/h1><p class=\"bstn-blocks-hero-with-overview__description\"><meta charset=\"utf-8\">Learn more about one of the world&#8217;s most popular programming languages. <\/p><\/div><div class=\"bstn-blocks-hero-with-overview__image-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__image\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12115008\/Javascript-Light-Transparent.svg\" alt=\"\"\/><\/div><\/div><\/div><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--offset\"><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__card-container\"><div class=\"bstn-blocks-hero-with-overview__copy-card\"><nav class=\"bstn-blocks-hero-overview\"><h2 class=\"bstn-blocks-hero-overview__title\"><meta charset=\"utf-8\">Tutorial Contents<\/h2><ol class=\"bstn-blocks-hero-overview__list\">\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-fundamentals\">JavaScript Fundamentals<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-best-practices\">JavaScript Best Practices<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#javascript-file-naming-conventions\">JavaScript File Naming Conventions<\/a><\/li>\n<\/ol><\/nav><\/div><\/div><\/div><\/div><\/header>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript is the most popular programming language for adding interactive elements to websites. Although JavaScript is a powerful scripting language that can be used to create complex animations and graphics, database-driven applications, mobile apps, and video games, JavaScript basics are easy enough to grasp that beginners can learn JavaScript skills and, along with HTML and CSS, begin applying them to add functionality and interactivity to web pages right away.<\/p>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-fundamentals\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Fundamentals<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Before getting started with JavaScript programming, it&#8217;s worth exploring JavaScript fundamentals and core JavaScript concepts, beginning with basic JavaScript language.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript was initially called Livescript because it was designed to make websites live or bring interactivity to it. JavaScript code is written as&nbsp;<strong>scripts<\/strong>. Hence, coding in JavaScript is called scripting. Using JavaScript is fairly straightforward as it does not require any setup. One can just open up a browser window and start writing JavaScript code.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Before we deep dive into JavaScript code, let\u2019s help aspiring Web Developers understand some basic JavaScript terms:<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Variables<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Variables are containers that store values, and in the JavaScript language, variables are crucial to creating anything interactive or dynamic because variables are needed to change values. You declare a variable with the var or the let keyword, and then you give the variable a value.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Variables can hold values with the following different data types:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>String<\/li><li>Number<\/li><li>Boolean<\/li><li>Array<\/li><li>Objects and symbols<\/li><\/ul>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Comments<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript comments are brief bits of text that can be added alongside code that a web browser will ignore. You can add comments in JavaScript the same way you can in CSS. The comments can be used to prevent execution while you are testing alternative code, they can be used to explain JavaScript code, or they can be used to make code more readable.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Operators<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Operators are math symbols like addition, multiplication, division, and subtraction that produce results based on two values\/variables. Basic JavaScript arithmetic operators are used to perform math operations on numbers, whereas JavaScript assignment operators give values to JavaScript variables, JavaScript comparison operators determine equality or difference between variables or values, and JavaScript string operators can be used to concatenate strings.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Conditionals<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Conditional statements in JavaScript are code structures used to perform different actions for different conditions. Conditionals are often used to test if an expression returns true or not. The most commonly found example would be the if &#8230; else statement. The if &#8230; statement scans a condition in parentheses and, if the result is true, a block of code is executed.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Functions<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript functions are blocks of code that you want to reuse so that you don&#8217;t have to write the same code over and over again. You can define a body of code as a function that can be executed whenever it&#8217;s invoked or called.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">If you see what looks like a variable name followed by parentheses, it is probably a function. The parentheses contain arguments, which should be separated by commas if there are multiples.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Events<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">To implement interactive elements on a website, you need event handlers, which run code in response to activity in the browser. When JavaScript code is used in HTML pages, JavaScript reacts to those events. Examples of events on an HTML page in JavaScript include a button click, information being entered into an input field, or a web page finishing the loading process.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">HTML events include actions both by the user and the browser.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Expressions<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">The smallest possible structure while writing code is called an Expression. An expression is anything that is a value or maybe the outcome in a piece of code.&nbsp;<code>2 + 3<\/code>&nbsp;is an expression because it produces a value that is&nbsp;<code>5<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Statements<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">A statement is basically interchangeable with an expression. However, a statement is more of an instruction or one line of code that instructs the browser in this case to perform a task or carry out an operation.&nbsp;<code>result = 2 + 3<\/code>&nbsp;is a statement because it does not necessarily produce a value but it does instruct the browser to store the value&nbsp;<code>5<\/code>&nbsp;in a variable called&nbsp;<code>result<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Syntax<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Syntax of a programming language like JavaScript means the form or set of rules that a given statement or expression should follow. Programming languages are nothing but a sequence of characters and symbols and each language has its own way of defining what sequence is valid or invalid. When a piece of code in JavaScript does not adhere to its syntax, it is said to have syntax errors.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Semantics<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Semantics in contrast to syntax is the actual meaning of the programming language construct like an expression or a statement. It describes how the script or the program might be executed. It could also describe the browser or the platform on which the code is running and the input\/output parameters needed to successfully execute the program. A piece of code with invalid syntax cannot be evaluated semantically because it is of an invalid structure not acceptable by the language.<\/p>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-best-practices\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Best Practices<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript best practices ensure quality code, improve code readability, and make it easier to maintain code. JavaScript best practices around file naming conventions and coding conventions include rules about naming and declaring variables and functions, using whitespace, indentation, and comments, as well as general JavaScript programming practices and principles. These best practices are standard to almost every JavaScript course and will often be documented for a web development, game development, or software development team to ensure strict adherence.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript best practices include:<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Coding Conventions<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript code conventions include always using two spaces to indent code blocks (never tabulators, which are interpreted differently by different editors), putting space around operators and after commas, always ending a statement with a semicolon, and avoiding lines longer than 80 characters.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Although browsers tend to be forgiving around JavaScript syntax \u2014 which is part of why JavaScript is considered such a beginner-friendly programming language \u2014 that does not mean you should make a habit out of writing messy code.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Clean code means fewer bugs to troubleshoot, better code security, and an easier time involving other Programmers. Clean code can also be converted by scripts to other formats, rather than requiring human intervention.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript validation tools called linters can help you spot syntax issues in your code automatically when you save it.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Global variables and local variables<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">You should aim to minimize the use of global variables or avoid them entirely, including all objects, data types, and functions. Since every JavaScript file on a page runs in the same scope, having global functions or variables in your code could lead to a situation where other scripts included after yours could contain the same variable and function names and, as a result, overwrite your variables and functions. Using local variables instead is preferable.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Every variable used in a function should be declared as a local variable (they should be declared either with the var or let keyword or they will become global variables).<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript Declarations<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Best practice for JavaScript declarations is to put them at the top of each script or function. That makes it much easier to avoid unwanted global variables, minimize the chances of unintended re-declarations, and ultimately create cleaner code overall.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Treat JavaScript numbers, strings, or booleans as primitive values<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">You should avoid declaring string, number, and boolean as objects because it can greatly slow execution speed and lead to a host of unwanted side issues.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Block scored declarations<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Since the beginning, JavaScript Developers have used var to declare variable, which can cause issues with the scope of the variables that are created when it&#8217;s used. Since the release of ES6, the const and let keywords empower Developers to declare variables in the block level scope, so the variables exist only within the corresponding block.<\/p>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey bstn-blocks-section-divider--32\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 bstn-blocks-heading--mt-0 has-text-align-left\" id=\"javascript-file-naming-conventions\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">JavaScript File Naming Conventions<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">JavaScript file naming conventions ensure consistency and functionality for all JavaScript code that you write.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Some naming conventions come down to the choice of each Developer \u2014 for instance, many choose to write global variables and constants in uppercase \u2014 while there are some hard rules, like not beginning names with a $ sign (because it will conflict with the names of many JavaScript libraries).<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">There is debate among Programmers about using hyphens, underscores, or camelCase in variable names. JavaScript itself uses camelCase, as does as jQuery and other JavaScript libraries, so that&#8217;s generally recommended.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Other JavaScript file naming conventions to keep in mind include:<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Be specific with names<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">The more specific you are, the less time you&#8217;ll have to waste trying to remember what the names are referring to. This also saves you from having to overpopulate your code with comments, which is another important best practice for JavaScript.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">One-letter names<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Again, to avoid slowing things down with unnecessary confusion, try to avoid using one-letter names. (An exception could be made for extremely common names.)<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Although short names are generally better than long ones, it might be worth opting for a longer name in certain situations where the extra description will greatly help clarity.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Variable names<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">When you name a variable, the name should be clear and detailed enough that it leaves no doubt about what it is used for. Again, you shouldn&#8217;t need to write comments just to define variables.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Function names<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Begin function names with a verb, since they&#8217;re used to perform actions. Try to be consistent with the same verbs for the same actions \u2014 this is not an area where you want to get creative with your verb choices.<\/p>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Class and file names<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Class names should be a noun and they should follow PascalCase. For JavaScript file names, either PascalCase or kebab-case are usually used and it comes down to personal choice. PascalCase should be used for component names with React.<\/p>\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-content-navigation-footer bstn-blocks-content-nav-footer bstn-blocks-content-nav-footer--article\"><div class=\"bstn-blocks-content-nav-footer__links-container\"><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title bstn-blocks-content-nav-footer__link--desktop\">Previous<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\/what-is-javascript-used-for\"><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--left\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--left\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><span class=\"bstn-blocks-content-nav-footer__link-text bstn-blocks-content-nav-footer__link--desktop\">What Is JavaScript Used For? <\/span><\/a><\/div><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title\">Next<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\/comment\"><span class=\"bstn-blocks-content-nav-footer__link-text\">JavaScript Comment<\/span><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--right\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--right\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><\/a><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-container bstn-blocks-container bstn-blocks-container--dark-blue bstn-blocks-container--96 bstn-blocks-container--negative-container bstn-blocks-container--overflow-hidden\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1140 621\" fill=\"none\" class=\"bstn-blocks-container__bg-flair\"><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.026 736.434V203.02\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.364 436.132L-120 436.131l180.364.001zm0-99.873H-120 60.364zm0-99.872H-120 60.364zM128 536.004h-248 248z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M57.518 535.982a2.286 2.286 0 114.572 0 2.286 2.286 0 01-4.572 0zm0-99.836a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002z\" cliprule=\"evenodd\"><\/path><\/g><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M979.195-28.206V397.98m81.185-524.745V397.98\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M1141.45 168.46H964h177.45zm0 98.334H964h177.45zm0 98.333H964h177.45zm66.55-295H964h244z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M1138.66 70.148a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49-.001zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.25zm-81.707 0a2.25 2.25 0 104.5.004 2.25 2.25 0 00-4.5-.005zm81.707 98.299a2.252 2.252 0 002.25 2.251 2.252 2.252 0 000-4.503 2.253 2.253 0 00-2.25 2.252zm-81.707 0a2.25 2.25 0 104.498 0 2.25 2.25 0 00-2.249-2.252 2.25 2.25 0 00-2.249 2.252zm161.917-.001a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm0 98.299a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm81.707 98.299c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm161.917 0a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0z\" cliprule=\"evenodd\"><\/path><\/g><\/svg><div class=\"bstn-blocks-container__wrapper bstn-blocks-container__wrapper--readable-width bstn-blocks-container__wrapper--negative-container\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h2 has-text-align-left bstn-blocks-heading--divider\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Learn JavaScript Today<\/h2><\/div>\n\n\n\n<p><meta charset=\"utf-8\">Get hands-on experience writing code with interactive tutorials in our free online learning platform. <\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list is-style-kg-list-checklist-alternate\"><li>Free and fun<\/li><li>Designed for beginners<\/li><li>No downloads or setup required<\/li><\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-bstn-button-primary\"><a class=\"wp-block-button__link\" href=\"https:\/\/brainstation.io\/learn\/javascript\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/13110639\/Javascript-promo-clip.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript is the most popular programming language for adding interactive elements to websites. Although JavaScript is a powerful scripting language that can be used to create complex animations and graphics, database-driven applications, mobile apps, and video games, JavaScript basics are easy enough to grasp that beginners can learn JavaScript skills and, along with HTML and [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":129957,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-129920","codex-reference","type-codex-reference","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference"}],"about":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/types\/codex-reference"}],"version-history":[{"count":10,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129920\/revisions"}],"predecessor-version":[{"id":133244,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129920\/revisions\/133244"}],"up":[{"embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129957"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/media?parent=129920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/categories?post=129920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/tags?post=129920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}