Uma variável pode armazenar funções, textos, números, e vários outros itens, como objetos, elementos HTML, e etc.
Você pode simplesmente criar uma variável que contém números e texto juntas, mas os números existentes serão convertidos para texto.
O resultado disto será o seguinte valor: "2020 é um ano do calendário.". Isto é diferente quando tem apenas números:
O valor ano será de 2021. Mas caso coloque alguma string, nem que seja em branco, ou vazia, o valor será apenas concatenado juntamente.
Imagina qual será o resultado disto? Se você pensou em "20211", parabéns, acertou. O JavaScript tentará somar tudo o que ele conseguirá até a primeira string.
Aqui temos um erro bem clássico, que confunde muitos programadores e desenvolvedores Web. O resultado disto será o quê afinal? O valor 1 + 3 será somado? Não. Após qualquer string, mesmo que seja vazia, todo o restante da variável será concatenado, mesmo que haja alguma ação possível de ser calculada. O valor desta ação será "202113".
Quando encapsulamos com parênteses, tudo muda radicalmente, pois isto permite ao JavaScript entender que deverá tratar isto em primeiro lugar. O valor disto será sempre calculado, e teremos o resultado "20214".
Aqui temos uma nova situação, e que expressa bem como um parênteses é como se fosse uma nova variável, em um escopo limpo. Aqui teremos a soma dentro do parênteses apenas dos dois primeiros elementos, e a concatenação do último valor. O resultado será "202143".
Perceba que houve um cálculo que gerou um número contendo casas decimais, e o último valor foi concatenado.
Caso o texto que você queira concatenar tenha aspas duplas no meio, perceba que isto irá quebrar o código JavaScript caso você também use aspas duplas para determinar este valor. Com isto, o JavaScript permite que você atribua os valores com aspas simples também.
Agora se precisar colocar aspas simples e aspas duplas no meio do texto? Há então os caracteres de evasão (escape), que pode ser adicionado usando uma barra invertida, e isto será interpretado automaticamente pelo JavaScript que deverá ser alterado pelo código que você precisa, sem quebrar a instrução da variável.
Há outros caracteres possíveis de serem adicionados usando o mesmo mecanismo como os a seguir, que não podem ser adicionados de forma direta, como os a seguir:
A tecla <ENTER>, não é só apenas uma nova linha como todos pensam. Ele é composto por 2 bytes, o CR + LF. Sempre que fazemos uma quebra de linha em um texto puro, usamos \r\n dentro de uma String de JavaScript.
Apesar do código HTML ignorar a tecla <ENTER>, necessitando da tag br ou p para definir as quebras e parágrafos, em alguns momentos necessitamos usar o texto puro para uso em alguns lugares, como elementos de texto, como textarea, ou mesmo para exibir mensagens em alertas JavaScript, que também não reconhecem tags html.
Obs.: Linux e Mac OS X, podem usar outras formas para representar a tecla <ENTER>, como por exemplo, o Linux só precisa do <LF> e o Mac só precisa do <CR>, sem que haja necessidade dos dois caracteres ao mesmo tempo para saber que se trata de uma quebra de linha em um texto. No Windows, entretanto, documentos que tenham apenas um destes dois caracteres, todo o texto ficará unido como se não houvesse nada.