{"id":1606,"date":"2020-09-25T20:04:13","date_gmt":"2020-09-26T02:04:13","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=1606"},"modified":"2024-04-05T16:15:56","modified_gmt":"2024-04-05T22:15:56","slug":"variables-en-javascript-y-constantes","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/variables-en-javascript-y-constantes\/","title":{"rendered":"Javascript variables and constants"},"content":{"rendered":"

Variables<\/h2>\n\n\n\n

One of the most used elements are variables<\/strong> in Javascript. We can describe variables in Javascript as boxes to hold information, which we label so that we can find that information easily. This label is the name of the variable and the box is the space used in RAM.<\/p>\n\n\n\n

\"Variables
Variables and constants, boxes that store information<\/figcaption><\/figure>\n\n\n\n

This is what variables are like in Javascript, and in fact in any programming language. You can also store any datatype<\/a>, whether they are numbers, text strings, functions or any type of object.<\/p>\n\n\n\n

There are two ways to declare a variable. One is using let<\/strong> and the other using var<\/strong>.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/Variables de tipo String<\/span><\/span>\nvar<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\nlet<\/span> last name <\/span>=<\/span> <\/span>"<\/span>Cervantes<\/span>"<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The shape var<\/code><\/strong> It is the one that has always existed since the origin of language, then in 2015 it appeared let<\/code><\/strong> in order to mitigate certain deficiencies of var<\/code>. For this reason, the recommendation is to use let<\/code>In any case, it is important to know well var<\/code> because you will come across a lot of code that still uses var<\/code>.<\/p>\n\n\n\n
How are variables used in Javascript?<\/h2>\n\n\n\n
The name or identifier<\/strong> of a variable, it cannot start with a number, it must start with some letter (including _ and $), and Javascript is also case-sensitive. Is not the same name<\/strong><\/code> and Name<\/strong><\/code>, these are two different variables.<\/p>\n\n\n\n
Variables are defined in two ways:<\/p>\n\n\n\n
 With a single let<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n    last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>,<\/span><\/span>\n    mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
a single var<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n    last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>,<\/span><\/span>\n    mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Now with a let for each variable:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\nlet<\/span> last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>;<\/span><\/span>\nlet<\/span> mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
With a var<\/code> for each variable.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\nvar<\/span> last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>;<\/span><\/span>\nvar<\/span> mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In the previous example we define variables of type string<\/code> (text strings), but remember that you can store any type of data. <\/p>\n\n\n\n
It is advisable to put each variable on its own line because it is faster to understand for the \u201cyou\u201d of the future and your colleagues who have not touched your code. For example, DO NOT define the variables like this:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span> last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>,<\/span> mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span> edad <\/span>=<\/span> <\/span>32<\/span>,<\/span> sexo <\/span>=<\/span> <\/span>'<\/span>H<\/span>'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Let's try numbers.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> edad <\/span>=<\/span> <\/span>32.9<\/span>;<\/span><\/span>\nlet<\/span> hijos <\/span>=<\/span> <\/span>1<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> edad <\/span>=<\/span> <\/span>32.9<\/span><\/span>\nvar<\/span> hijos <\/span>=<\/span> <\/span>1<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Boolean data only stores false or true.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
let<\/span> esHombre <\/span>=<\/span> <\/span>true<\/span>;<\/span><\/span>\nlet<\/span> esAlto <\/span>=<\/span> <\/span>false<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> esHombre <\/span>=<\/span> <\/span>true<\/span>;<\/span><\/span>\nvar<\/span> esAlto <\/span>=<\/span> <\/span>false<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
As its name says, its value can be variable<\/strong>, therefore you can reassign a new value to your variable:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
var<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\nname <\/span>=<\/span> <\/span>'<\/span>Pepito<\/span>'<\/span>;<\/span><\/span>\nname <\/span>=<\/span> <\/span>'<\/span>Menganito<\/span>'<\/span>;<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(nombre)<\/span>;<\/span> <\/span>\/\/ 'Menganito'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Variable scopes in Javascript, let vs var<\/h2>\n\n\n\n
The main difference between variables defined with let<\/code> and var<\/code> is the scope they reach when they are declared:<\/p>\n\n\n\n
    \n
  • With let<\/strong><\/code> you have block scope  {}<\/code>.<\/li>\n\n\n\n
  • With var<\/strong><\/code> you have scope of function function()<\/code> but not block.<\/li>\n<\/ul>\n\n\n\n
    Example of block scope.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    if<\/span> (<\/span>true<\/span>) <\/span>{<\/span><\/span>\n  <\/span>let<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>'<\/span>James<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(nombre)<\/span>;<\/span> <\/span>\/\/ Uncaught ReferenceError: nombre is not defined<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Because let<\/code> has block scope, when wanting to access the variable name<\/code> Javascript shows:<\/p>\n\n\n\n
    Uncaught ReferenceError: name is not defined<\/code><\/p>\n\n\n\n
    Try to use block scope with var<\/code>.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    if<\/span> (<\/span>true<\/span>) <\/span>{<\/span><\/span>\n  <\/span>var<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(nombre)<\/span>;<\/span> <\/span>\/\/ 'Jaime';<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    In this example the variable name<\/code> If it can be accessed from outside the blocks, this is because it is not inside any function.<\/p>\n\n\n\n
    Now we are going to declare the variable with var<\/code> inside a function.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    functions<\/span> <\/span>setearNombre<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>var<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span>\nsetearNombre<\/span>()<\/span>;<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(nombre)<\/span>;<\/span> <\/span>\/\/ Uncaught ReferenceError: nombre is not defined<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Let's see what happens with let<\/code> when we try to use function scope.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    functions<\/span> <\/span>setearNombre<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>let<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>;<\/span><\/span>\n}<\/span><\/span>\nsetearNombre<\/span>()<\/span>;<\/span><\/span>\nconsole<\/span>.<\/span>log<\/span>(nombre)<\/span>;<\/span> <\/span>\/\/ Uncaught ReferenceError: nombre is not defined<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    If we define a variable with let<\/code> inside a function, we can't access it from outside either, because the function definition itself uses blocks {}<\/code>.<\/p>\n\n\n\n
    Constants in Javascript<\/h2>\n\n\n\n
    Constants are in the same way as variables, labeled boxes to store information, with the only difference that they cannot be reassigned to any other value.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    const<\/span> name <\/span>=<\/span> <\/span>"<\/span>Jaime<\/span>"<\/span>;<\/span><\/span>\nname <\/span>=<\/span> <\/span>"<\/span>Pepito<\/span>"<\/span>;<\/span> <\/span>\/\/ Uncaught TypeError: Assignment to constant variable <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Let's not forget to declare each constant on its own line to improve the readability of our code.<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    const<\/span> name <\/span>=<\/span> <\/span>"<\/span>Jaime<\/span>"<\/span>;<\/span><\/span>\nconst<\/span> last name <\/span>=<\/span> <\/span>"<\/span>Cervantes<\/span>"<\/span>;<\/span><\/span>\nconst<\/span> mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    const<\/span> name <\/span>=<\/span> <\/span>'<\/span>Jaime<\/span>'<\/span>,<\/span><\/span>\n    last name <\/span>=<\/span> <\/span>'<\/span>Cervantes<\/span>'<\/span>,<\/span><\/span>\n    mother's last name <\/span>=<\/span> <\/span>'<\/span>Velasco<\/span>'<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Same rules as variables with let<\/h2>\n\n\n\n
    Constants follow the same block scope rules as variables in Javascript with let<\/code>.<\/p>\n\n\n\n
    As well as let<\/code>, const<\/code> has block scope, so if you define a variable with var<\/code> and has the same name as a constant, the following error will be thrown:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    {<\/span><\/span>\n  <\/span>const<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>"<\/span>Jaime<\/span>"<\/span>;<\/span><\/span>\n  <\/span>var<\/span> <\/span>name<\/span> <\/span>=<\/span> <\/span>"<\/span>Pepito<\/span>"<\/span>;<\/span> <\/span>\/\/ Uncaught SyntaxError: Identifier 'nombre' has already been declared<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Constants in javascript read-only and mutable<\/h2>\n\n\n\n
    Constants are read-only, which is why they cannot be reassigned a value. Even so, these saved values continue to preserve the behavior of their data type. <\/p>\n\n\n\n
    For example, if you create a constant for an object, you can change the properties of that object.<\/p>\n\n\n\n
    An object literal in JavaScript is nothing more than a set of values identified with a name or key, like the following:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
    const<\/span> James <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>name<\/span>:<\/span> <\/span>"<\/span>Jaime<\/span>"<\/span>,<\/span><\/span>\n  <\/span>last name<\/span>:<\/span> <\/span>"<\/span>Cervantes<\/span>"<\/span>,<\/span><\/span>\n  <\/span>mother's last name<\/span>:<\/span> <\/span>"<\/span>Velasco<\/span>"<\/span><\/span>\n};<\/span><\/span>\nJames<\/span>.<\/span>name <\/span>=<\/span> <\/span>"<\/span>Pepito<\/span>"<\/span>;<\/span> <\/span>\/\/ todo bien, se puede cambiar una propiedad<\/span><\/span>\nJames <\/span>=<\/span> <\/span>{};<\/span> <\/span>\/\/ Uncaught Type Error: Assigment to constant variable<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
     The reference to the object is read-only, but it does not mean that the value is immutable. As seen in the example, you can change the property, but not reassign a new value to the constant James<\/code> as we can see in the last line of the example.<\/p>\n\n\n\n
    How to name variables and constants in Javascript?<\/h2>\n\n\n\n
    \n
    Any fool can write code that a computer can understand. Good programmers write code that humans can understand.<\/p>\nMartin Fowler<\/cite><\/blockquote>\n\n\n\n
    The main objective of naming variables and constants is to immediately understand what we are storing in them. It is important to correctly describe the content of the variables, because this makes life easier for the next person who needs to read and modify our code.<\/p>\n\n\n\n
    This next person is very often \u201cyou\u201d from the future, and unless you are a robot, you won't be able to remember every detail of your code.<\/p>\n\n\n\n
    Most of the time spent by a programmer is reading and understanding code, we don't want to spend a lot of time deciphering the content of them, as programmers we are happier creating new things.<\/p>\n\n\n\n
    For this reason we should not be surprised by the importance in naming our variables and constants, it is one of the best ways to not waste our time and the time of our colleagues.<\/p>\n\n\n\n
    Recommendations:<\/h3>\n\n\n\n
      \n
    • Take enough time to name a variable. It's like organizing your room, the tidier it is, the faster it will be to find the other sock (it happens to me a lot when I don't organize mine) xd<\/code>.<\/li>\n\n\n\n
    • The name must be very semantic and explain its context. Avoid names like data<\/code> either info<\/code> because they don't say much about the context, it is obvious that they are data and information, but for what? or what?.<\/li>\n\n\n\n
    • Agree with your colleagues on how to name variables, especially those that are closely related to the business. For example, for a user's registration data, it can be \u201cUserRegistration\u201d, \u201cCustomerRegistration\u201d, \u201cVisitorRegistration\u201d, all three forms can be valid (it depends a lot on the context), but it is better to follow a convention through an agreement.<\/li>\n\n\n\n
    • Avoid very short names like \u201cu1\u201d, \u201ca2\u201d, \u201c_\u201d, \u201c_c\u201d<\/li>\n\n\n\n
    • Avoid abbreviations, prefixes, suffixes and infixes. These are difficult to understand. For example pmContent<\/code>What is \u201cpm\u201d? <\/li>\n\n\n\n
    • If the variable or constant has a very small scope, that is, it is used in nearby lines, then the name can be short.<\/li>\n\n\n\n
    • If the variable or constant is used in a large scope, that is, it is referenced over a distance of many lines, then the name must be very descriptive, and therefore it is normal that it can be long.<\/li>\n<\/ul>\n\n\n\n
      Related posts<\/h2>\n\n\n\n
      \nhttps:\/\/www.pensemosweb.com\/introduccion-javascript\/\n<\/div><\/figure>\n\n\n\n
      \nhttps:\/\/www.pensemosweb.com\/javascript-scheme-self-java\/\n<\/div><\/figure>","protected":false},"excerpt":{"rendered":"
      Variables Uno de los elementos m\u00e1s usados son las variables en Javascript. Podemos describir a las variables en Javascript como cajas para guardar informaci\u00f3n, las cuales etiquetamos para que podamos encontrar esa informaci\u00f3n f\u00e1cilmente. Esta etiqueta es el nombre de la variable y la cajita es el espacio utilizado en la memoria RAM. As\u00ed son las […]<\/p>","protected":false},"author":2,"featured_media":3729,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[28,30],"tags":[54,64],"class_list":["post-1606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-node-js","tag-javascript","tag-node-js"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/1606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=1606"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/1606\/revisions"}],"predecessor-version":[{"id":3820,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/1606\/revisions\/3820"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3729"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=1606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=1606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=1606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}