Character Set in JavaScript

In the previous blog, we learned about Introduction to JavaScript. JavaScript is the Web programming language used by the vast majority of modern websites, and all modern web browsers. If you want to know more about JavaScript, visit the JavaScript Introduction blog. In this blog, we will learn about what a Character Set is, key features of a Character Set, etc.

What is a Character Set?

A character set is a collection of text-representable characters. In JavaScript, we use a character set called Unicode. The Unicode character encoding standard is utilized by most of the world's writing systems. Every character in the Unicode character set has its own code point. A code point is a number that uniquely identifies a character. The code points are distributed in such a way that no two characters have the same code point.

Features of Character Set

Following are some of the features of Character Set

Case Sensitivity

JavaScript is picky about how you write things — it cares about capital letters! This means keywords, variables, and function names all need to have the same capitalization throughout.

For instance, if we want to check some condition using the keyword if, then we must write it as if not If or IF. Because if we write If or IF instead of the keyword if, then JavaScript will consider them as two different variables. Similarly accno, accNo, Accno, AccNo, ACCNO are considered as five different variables. But on the contrary, HTML is not case-sensitive. In HTML if we write the keyword if as if or IF both will be considered the same and will work as a control statement.

Many JavaScript objects and properties on the client side share the same names as the HTML tags and attributes they represent. While these tags and attribute names can be put in any case in HTML, but in JavaScript they must usually be all lowercase. For example, the HTML onclick event handler attribute is sometimes specified as onClick in HTML, but in JavaScript code (or in XHTML documents), it must be specified as onclick.

Here are the key points about the case sensitivity of JavaScript

Variable Names

JavaScript variables are case-sensitive. For instance, varName, VarName, varname and VARNAME are separate variable names. In the following example, all variables are treated as separate variables due to the variation in letter casing.

let varName = "Welcome to World of Scripting";
let Varname = "Welcome to JavaScript Blog";
let varname = "Welcome to Atrowel";
let VARNAME = "Welcome to the Learning Platform";
console.log("varName:",varName);
console.log("Varname:",Varname);
console.log("varname:",varname);
console.log("VARNAME:",VARNAME);

Output

varName: Welcome to World of Scripting
Varname: Welcome to JavaScript Blog
varname: Welcome to Atrowel
VARNAME: Welcome to the Learning Platform

Function Names

The names of functions are similarly case-sensitive. MyFunction is not synonymous with Myfunction or myfunction. In the following example, all Functions are treated as separate Functions due to the variation in letter casing.

function displayMsg(){
  console.log("Inside the displayMsg()");
}
function Displaymsg(){
  console.log("Inside the Displaymsg()");
}
function displaymsg(){
  console.log("Inside the displaymsg()");
}
displayMsg();
Displaymsg();
displaymsg();

Output

Inside the displayMsg()
Inside the Displaymsg()
Inside the displaymsg()

Keywords

JavaScript keywords like if, else, while, and for are all in lowercase. Using various case variations will not work. In JavaScript, keywords, also known as reserved words, are case-sensitive. This means that the language treats the uppercase and lowercase versions of keywords as distinct entities.

const value = true;
If(value){
  console.log("Inside the If");
}
if(value){
  console.log("Inside the if");
}

Output

ERROR!
/tmp/Nh7Px3iRAC.js:2
If(value){
        ^

SyntaxError: Unexpected token '{'
  at internalCompileFunction (node:internal/vm:73:18)
  at wrapSafe (node:internal/modules/cjs/loader:1178:20)
  at Module._compile (node:internal/modules/cjs/loader:1220:27)
  at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
  at Module.load (node:internal/modules/cjs/loader:1119:32)
  at Module._load (node:internal/modules/cjs/loader:960:12)
  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
  at node:internal/main/run_main_module:23:47

In the above code as we had written If instead if on the 2nd line so the code terminated and compiler throwed an error.

Let's see the example which will be error-free using keyword if

const value = true;
if(value){
  console.log("Inside the if");
}

Output

Inside the if

Object Properties

When accessing object properties or methods, you need to use the correct case. For instance, if an object has a property called name, attempting to access it using Name or NAME will result in an error. In the following example, all Object variables are treated as separate Object variables due to the variation in letter casing.

let empDetails = {
  empName: "Emey",
  empId: 12345
};
console.log(empDetails.empName);
console.log(empDetails.empId);
console.log(empDetails.EmpName);

Output

Emey
12345
undefined

String Comparison

String Comparison is also case-sensitive. In String Comparison if the string is hello and if we compare it with Hello then it will give us a different result .i.e hello is not considered the same as Hello.

The equality operator (==) compares values for equality after performing type coercion if needed. The strict equality operator (===) checks for both value and type equality without coercion.

Let's take a look into the example

let string1 = "Welcome";
let string2 = "welcome";
let string3 = "welcome"
console.log(string1 == string2);
console.log(string2 === string3);

Output

false
true

HTML Attributes

HTML properties that relate to JavaScript functions or variables are also case-sensitive. For example, <button onclick="displayMsg()">Click me</button> would invoke a function called displayMsg, not DisplayFunction.

Coding Conventions

While JavaScript is case-sensitive, coding standards frequently encourage using camelCase for variable and function names, with the first letter in lowercase (e.g., empName, displayMsg). Class names usually use PascalCase (e.g., EmployeeDetails).

String Methods

JavaScript includes many built-in methods for working with strings, including toUpperCase(), toLowerCase(), charAt(), indexOf(), substring(), and more.

White Space and Line Break

White Space

JavaScript does not support whitespaces. This means that you can remove all whitespaces from a JavaScript program and still have legal JavaScript code. When JavaScript code is minified, whitespaces are removed. Minification is the process of removing whitespaces and other unnecessary characters from JavaScript code to make it smaller.

In JavaScript, whitespaces can be used to regulate the execution flow. For example, you could utilize whitespaces to create a code block that is only run if a certain condition is met.

Let's take a look at an example

let message = "Welcome to   JavaScript   Blog";
let multiLineString = 'JavaScript is the
  Web programming language'
;
let text = "  Hello  ";
let trimmedText = text.replace(/s+/g, " ").trim();

console.log(message);
console.log(multiLineString);
console.log(trimmedText);

Output

Welcome to   JavaScript   Blog
JavaScript is the
  Web programming language

Hello

Line Break

In JavaScript, there are two ways to insert a line break:

• The \n escape sequence is used.
• Using the HTML element <br>.

The \n escape sequence is a special character that signals the beginning of a new line. It can be used to produce a line break in strings. For instance, the following code will generate a string of two lines:

Let's take a look into an example

const text = "JavaScript is the Web programming language.
It is used by the vast majority of modern websites";
console.log(text);

Output

JavaScript is the Web programming language.
It is used by the vast majority of modern websites

In HTML, the <br> HTML element is used to produce a line break. In JavaScript, it can also be used to generate a line break. For example, the following code will generate a string with two lines:

Let's take a look at an example

<br>JavaScript is the Web programming language. <br>It is used by the vast majority of modern websites

Output

JavaScript is the Web programming language.
It is used by the vast majority of modern websites

The method you use to produce a line break in JavaScript is determined by individual requirements. When working with strings, the \n escape sequence is an excellent choice. When working with HTML, the <br> element is a smart choice.

Here are some other things to remember regarding line breaks in JavaScript:

• The JavaScript console does not always show line breaks. This is because the console will automatically insert line breaks into large strings.
• Line breaks can be used to manipulate the layout of text on a web page.
• Line breaks can be used to separate text into paragraphs.

JavaScript's character set, Unicode, is like a toolkit for letters and symbols, forming a universal language for computers. Each character has a unique number, and using the right capitalization is key. This set is the backbone, ensuring text works seamlessly across languages in web development. In the next blog, we will learn about Unicode Escape Sequence and Normalization.