DEV Community

Cover image for JavaScript Simple Code Structure
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript Simple Code Structure


Values that have data types but are not explicitly indicated with variables are called untyped languages. In JavaScript, whether it is a number or string, or any other data type, only the var let or const keyword is used for declaration.

JavaScript

var name = "Bello";
Enter fullscreen mode Exit fullscreen mode

Untyped languages do not need a variable to be declared with a data type. They are also called dynamically typed languages

Examples of other untyped languages besides JavaScript are Python, Perl, Ruby, etc.

Other languages like Java, C#, C++ are static typed.

A statically typed language needs a variable to declared with a data type

In Java, a declared variable will look like shown below:

Java

String name = "Bello"; // "Bello"
Enter fullscreen mode Exit fullscreen mode

There are 8 data types in JavaScript:

  • Number
  • BigInt
  • String
  • Boolean
  • Null
  • Undefined
  • Symbols
  • Objects

Number

The number type is either an integer or a floating-point number.

Let's perform a mathematical operation below:

let numb = 23; // integer
let score = numb; 

const length = 12.5; // floating-point
console.log(12.5 / 0.5); // 25 => integer
Enter fullscreen mode Exit fullscreen mode

In the example above, there are two obvious observations.

An Integer number contains no decimal, and floating-point numbers are numbers with a decimal

Other numbers are either in infinity or NaN.

Infinity is a special value that is greater than any number.

console.log(1 / 0); // Infinity
Enter fullscreen mode Exit fullscreen mode

Or reference it directly:

console.log(Infinity); // Infinity
Enter fullscreen mode Exit fullscreen mode

Note: Number.POSITIVE_INFINITY is Infinity and Number.NEGATIVE_INFINITY is -Infinity.

Number.POSITIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity
Enter fullscreen mode Exit fullscreen mode

NaN (Not a Number) is an incorrect or an undefined mathematical operation

console.log(Infinity / Infinity); // NaN
console.log("string" / 2); //NaN
console.log(NaN + NaN); // NaN
Enter fullscreen mode Exit fullscreen mode

Number type limit is shown below:
Alt Text

That is Number type maximum number is 9,007,199,254,740,991 and minimum number is -9,007,199,254,740,991

Recall the Number limits with the code below:

Maximum Number

Number.MAX_SAFE_INTEGER; // 9007199254740991
Enter fullscreen mode Exit fullscreen mode

Minimum Number

Number.MIN_SAFE_INTEGER; // -9007199254740991
Enter fullscreen mode Exit fullscreen mode

BigInt

Numbers greater than the maximum safe number or lesser than the minimum safe number, the BigInt data type can be used. It was introduced in JavaScript ES10 (ECMAScript 2019).

const bigInt = 1234567890123456789012345678901234567890n;
Enter fullscreen mode Exit fullscreen mode

The BigInt data type number can also be treated as a regular number by appending n to it.

1n + 2n; // 3n
7n / 2n; // 3n
Enter fullscreen mode Exit fullscreen mode

Notice BigInt 7n / 2n equals 3n not 3.5 because JavaScript always rounds down such BigInt data division to the nearest figure.

The code snippet above can be rewritten as shown below:

console.log( BigInt(1) + BigInt(2) ); // 3n
console.log( BigInt(7) / BigInt(2) ); // 3n
Enter fullscreen mode Exit fullscreen mode

String

A string is a text surrounded by quotation marks. The quotation marks can either be 'single quotes', "double quotes", or ‡backticks quotes‡

console.log('single quotes'); // single quotes
console.log("double quotes"); // double quotes
console.log(`backtick quotes`); //backtick quotes
Enter fullscreen mode Exit fullscreen mode

For single or double quotes, we have:

const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = 'My name is' + firstName + ' ' + lastName + '.'
console.log(fullName); // My name is Osagie Bello.
Enter fullscreen mode Exit fullscreen mode

There's practically no difference between single quotes and double-quotes. For backtick quotes, it is purposely used for template literal. Template literal was introduced in ES6 (ECMAScript 2015).

The above code snippet can be rewritten as shown below:

const firstName = 'Osagie';
const lastName = 'Bello';

const fullName = `My name is ${firstName} ${lastName}.`
console.log(fullName); // My name is Osagie Bello.
Enter fullscreen mode Exit fullscreen mode

The variable in between the curly braces above and below are expressions.

const calc = 2 + 5 * (22 / 3);
console.log(`The answer is ${calc}!`); 
// The answer is 38.666666666666664!
Enter fullscreen mode Exit fullscreen mode

image.png


Boolean

Boolean is a logical type that is either true or false.

const nameFieldChecked = true;
const ageFieldChecked = false;
Enter fullscreen mode Exit fullscreen mode

A Boolean value is returned during comparison:

const isGreater = 5 > 3;
console.log(isGreater); // true
Enter fullscreen mode Exit fullscreen mode

The Boolean function can be used to check if a data is true or false

Boolean(""); // false
Boolean("string"); // true
Boolean(1); // true
Boolean(0); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean(null); // false
Boolean(502); // true
Enter fullscreen mode Exit fullscreen mode

More of Boolean later.


Null

Null means nothing or empty value. It makes a type on its own and doesn't point or refer to a non-existing variable or object.

const age = null;
Enter fullscreen mode Exit fullscreen mode

The code above means that age is unknown.


Undefined

A variable declared without assigning it to a value is created as an undefined value.

const myAge; 
const yourAge = undefined;

console.log(myAge); // undefined
console.log(yourAge); // undefined
Enter fullscreen mode Exit fullscreen mode

Object

All the data types mentioned above are all primitive data types. Objects are non-primitive data because they can hold as much primitive data type to a variable.

List

An object can be an array. An array is also called a list. The list uses zero-based indexing.

const randomStuff = [ 'brush', 23, null, undefined, false ];
console.log( randomStuff[2] );
Enter fullscreen mode Exit fullscreen mode

DIAGRAM (1).png

More on array later.

Object

Just like a list, an object can contain as many primitive data types as possible.

const obj = { name: 'Bello', age: 27, hobby: 'coding' };
console.log( obj[name] ); // Bello
Enter fullscreen mode Exit fullscreen mode

DIAGRAM.png

The name, age, hobby are called the object property names or object keys while Bello, 27, coding are called the object property values or simply object values.

More on objects later.


Symbol

The symbol is also a primitive data type used to create unique identifiers for objects.

const obj = {};
const sym = Symbol();
obj[sym] = 'foo';
obj.bar = 'bar';
console.log(obj); // { bar: 'bar', [Symbol()]: 'foo' }
console.log(sym in obj); // true
console.log( obj[sym] ); // foo
console.log( Object.keys(obj) ); // ['bar']
Enter fullscreen mode Exit fullscreen mode

The example above may not make sense, but more of the symbol later.


The typeof Operator

It is not part of the data types but returns a data type as a result.

It supports two syntaxes:

typeof value

typeof(value)
Enter fullscreen mode Exit fullscreen mode
typeof undefined; // "undefined"

typeof 34; // number

typeof 3n; // bigint

typeof true; // boolean

typeof "egg"; // string

typeof Symbol("id"); // symbol

typeof Math; // object 

typeof null; // object

typeof alert; // function
Enter fullscreen mode Exit fullscreen mode

typeof null as an object is a flaw in JavaScript. It shouldn't be an object.

typeof alert as a function is convenient in practice.

They are common mistakes in JavaScript.


Buy me a Coffee


TechStack Media | Bluehost

  • Get a website with a free domain name for 1st year and a free SSL certificate.
  • 1-click WordPress install and 24/7 support.
  • Starting at $3.95/month.
  • 30-Day Money-Back Guarantee.

Top comments (0)