Javascript Module 5

  Module 5 : Data Types in JavaScript 

JavaScript is a dynamically typed language, meaning variables can hold values of any type without strict 

declarations. Understanding JavaScript data types is essential for effective scripting, debugging, and optimizing performance.

2. Types of Data in JavaScript

JavaScript has two main categories of data types:

A. Primitive Data Types

String

Represents textual data.

js

let name = "Alice";

Number

Represents both integer and floating-point numbers.

js

let age = 30; let price = 10.99;

Boolean

Logical entity with two values: true or false.

js

let isOnline = true;

Undefined

A variable declared but not assigned a value.

js

let x;

Null

Denotes intentional absence of value.

js

let y = null;

Symbol (ES6)

Unique and immutable value.

js

const sym = Symbol("id");

BigInt (ES11)

For very large integers.

js

const big = 1234567890123456789012345678901234567890n;

B. Non-Primitive (Reference) Data Types

Object

Complex data structures.

js

let person = { name: "Alice", age: 25 };

Array

List-like objects.

js

let colors = ["red", "green", "blue"];

Function

Reusable block of code.

js

function greet() { return "Hello!"; }

3. Working with Data Types

A. Type Checking

Using typeof

js

code

console.log(typeof 42); // "number" console.log(typeof "hello"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" (quirk) console.log(typeof Symbol()); // "symbol" console.log(typeof BigInt(10)); // "bigint" console.log(typeof []); // "object" console.log(typeof {}); // "object" console.log(typeof function(){}); // "function"

Using Array.isArray()

js

code

console.log(Array.isArray([])); // true

B. Type Conversion

String to Number

js

 code

let str = "123"; let num = Number(str); // 123

Number to String

js

code

let num = 123; let str = String(num); // "123"

Boolean Conversion

js

 code

Boolean("") // false Boolean("text") // true Boolean(0) // false Boolean(1) // true

4. Exercises with Explanation

Exercise 1: Type Identification

Write a function identifyType that takes any value and returns its type.

js

 code

function identifyType(value) { if (Array.isArray(value)) return "array"; return typeof value; } console.log(identifyType(100)); // "number" console.log(identifyType("hello")); // "string" console.log(identifyType([1, 2, 3])); // "array" console.log(identifyType(null)); // "object"

Explanation:

This helps identify quirks like typeof null being "object" and differentiate arrays from objects.

Exercise 2: Conversion Practice

Write a function convertToBoolean that returns the Boolean version of a value and explain the logic.

js

code

function convertToBoolean(value) { return Boolean(value); } console.log(convertToBoolean("")); // false console.log(convertToBoolean("hi")); // true console.log(convertToBoolean(0)); // false console.log(convertToBoolean(1)); // true

Explanation:

 learn how truthy and falsy values behave.

5. Explanation

Type Checking and Dynamic Behavior

Objective:

Explore how JavaScript behaves when different data types interact.

Instructions:

Create a file datatypes.js.

Paste and run the following code:

js

code

let result1 = "5" + 5; // "55" let result2 = "5" - 2; // 3 let result3 = true + 1; // 2 let result4 = false + "5"; // "false5" let result5 = null + 1; // 1 let result6 = undefined + 1; // NaN console.log({ result1, result2, result3, result4, result5, result6 });

Explanation:

"5" + 5 results in string concatenation.

"5" - 2 converts "5" to a number.

true becomes 1, false becomes 0.

undefined + 1 results in NaN.

Learning Outcome:

Observe JavaScript's implicit type coercion and understand its rules.

6. Best Practices

Recent Highlights:

Dynamic vs Static Typing: Studies show static typing (TypeScript) leads to fewer runtime errors (Microsoft Developer Blog, 2023).

Performance: Type coercion can cause performance issues in large codebases. Explicit conversions are recommended.

Maintainability: Type annotations improve code maintainability and clarity.

Best Practices:

Always use === and !== to avoid implicit coercion.

Explicitly convert data types rather than relying on JavaScript’s automatic conversions.

Use Array.isArray() instead of typeof for checking arrays.

Avoid comparing directly to null or undefined without checks.

7. Summary and Key Takeaways

JavaScript has primitive and reference data types.

Use typeof, instanceof, and Array.isArray() to check types.

Implicit coercion can be unpredictable—prefer explicit type conversion.

essential—understanding comes through trial and testing.

Stay updated with JavaScript enhancements (e.g., BigInt, Symbol).

8. Final Challenge

Create a typeInspector utility that returns a detailed type summary:

js

code

function typeInspector(value) { return { value: value, type: typeof value, isArray: Array.isArray(value), isNull: value === null, constructor: value?.constructor?.name || "N/A" }; } console.log(typeInspector([1, 2, 3])); console.log(typeInspector("OpenAI")); console.log(typeInspector(null));