Surveying JavaScript – A Beginner’s Guide to Core Concepts

This article introduces foundational JavaScript concepts for new developers, adapted from Chapter 2 of You Don’t Know JS Yet: Get Started. It covers how JS treats each file as a standalone program, the nature of values (primitives and objects), and how to determine value types. While not a full reference, this survey lays the groundwork for deeper learning and confident coding.

JavaScriptvaluesmodulestypeof

~3 دقیقه مطالعه · آخرین به‌روزرسانی ۲۲ مهر ۱۴۰۴

Introduction


The best way to master JavaScript is to start coding. But to do that effectively, you need to understand how the language works. This article offers a high-level overview of key JS concepts to help you build confidence and prepare for deeper learning. Take your time with each section, especially if you’re new to programming.


Each File Is a Program


JavaScript treats each standalone file (typically ending in .js) as a separate program. If one file fails during parsing or execution, it doesn’t necessarily stop other files from running. However, if your application depends on multiple files, a failure in one may cause partial functionality.


Files interact through the global scope, sharing state and functions. Since ES6, JS also supports modules, which are file-based and imported using import statements or <script type="module"> tags. Modules are treated as separate programs but can interact at runtime.


Note: Build tools like Webpack often combine multiple files into one. In that case, JS treats the combined file as a single program.


Values in JavaScript


Values are the building blocks of JS programs. They represent state and come in two categories: primitives and objects.


Primitive Values


  • Strings: Ordered character sequences. Use " or ' for basic strings, and ` (backticks) for interpolation:
    let firstName = "Kyle";
    console.log(`My name is ${firstName}`);

  • Numbers: Used for math or indexing. Prefer Math.PI over hardcoded values like 3.141592. Use bigint for very large numbers.

  • Booleans: true or false for logic. Example:
    while (false) {
      console.log("This won't run.");
    }

  • null and undefined: Represent absence of value. Use undefined as the default empty value:
    while (value != undefined) {
      console.log("Still got something!");
    }

  • Symbols: Unique keys for object properties, mostly used in libraries:
    hitchhikersGuide[Symbol("meaning of life")]; // 42


Objects and Arrays


  • Arrays: Ordered lists with numeric indices:
    let names = ["Frank", "Kyle", "Peter", "Susan"];
    console.log(names.length); // 4
    console.log(names[1]); // Kyle

  • Objects: Unordered collections with string keys:
    let name = {
      first: "Kyle",
      last: "Simpson",
      age: 39,
      specialties: ["JS", "Table Tennis"]
    };
    console.log(`My name is ${name.first}`);


Note: Functions and arrays are special types of objects. More on that later.


Determining Value Types


Use typeof to check a value’s type:


typeof 42; // "number"
typeof "abc"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" -- known bug!
typeof { a: 1 }; // "object"
typeof [1, 2, 3]; // "object"
typeof function hello() {}; // "function"

Warning: typeof null returns "object" due to a legacy bug. Arrays also return "object", not a distinct "array" type.


Type conversion (coercion) and the difference between value and reference behavior are covered later in the book.


Conclusion


This survey introduces the foundational concepts of JavaScript: how files behave, what values are, and how to identify types. These ideas will be expanded in future chapters. For now, practice writing code, explore examples, and build your confidence step by step.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

Coercive Conditional Comparison and Prototypal Classes in JavaScript – Understanding Implicit Logic and Legacy Inheritance Patterns

This article explores two advanced topics from Appendix A of You Don’t Know JS Yet: how JavaScript performs coercive comparisons in conditional expressions, and how prototypal class patterns were used before ES6 introduced the class keyword. Through practical examples, it clarifies how implicit boolean logic works and how prototype chains enable behavior delegation.

ادامه

Value vs Reference and the Many Forms of Function Definitions

Value vs Reference and the Many Forms of Function Definitions

ادامه

Prototypes in JavaScript – Delegation, Prototype Chains, and Dynamic this Behavior

Prototypes in JavaScript provide a mechanism for property delegation between objects. This article explains how prototype chains work, how to create linked objects using Object.create, and how property access and assignment behave in relation to delegation. It also explores how the dynamic nature of this enables prototype-based method reuse across multiple objects.

ادامه

Closure and this in JavaScript – Scope Memory and Dynamic Execution Context

Closure and this are two foundational and often misunderstood concepts in JavaScript. This article defines closure as a function’s ability to remember variables from its outer scope, and explains how this refers to the dynamic execution context of a function call. Through practical examples, it clarifies the difference between static scope and dynamic context.

ادامه

Iteration in JavaScript – The Iterator Pattern, Built-in Iterables, and Standard Data Consumption

Iteration is a foundational pattern for processing data in JavaScript. This article explores the iterator protocol, how to consume iterators using for..of loops and the spread operator, the distinction between iterators and iterables, and how built-in structures like arrays, strings, maps, and sets support standardized iteration. It also shows how to customize iteration for your own data structures.

ادامه

Modules in JavaScript – From Classic Patterns to ES Modules and Structural Differences

Modules in JavaScript, like classes, are designed to group data and behavior into logical units. This article explores the classic module pattern using factory functions, compares it to class-based design, and introduces ES Modules (ESM) introduced in ES6. It explains how modules are defined, exported, imported, and instantiated, and highlights the differences in structure and usage.

ادامه