Value vs Reference and the Many Forms of Function Definitions

Value vs Reference and the Many Forms of Function Definitions

value-vs-referenceanonymous-functionarrow-functionfunction-naming

~2 min read · Updated Oct 20, 2025

Value vs Reference


In JavaScript, the type of data determines whether it’s passed by value or reference. Primitive types (like strings, numbers, booleans) are passed by value:


var myName = "Kyle";
var yourName = myName;
myName = "Frank";

console.log(myName);    // Frank
console.log(yourName);  // Kyle

Each variable holds its own copy. In contrast, objects (arrays, functions, etc.) are passed by reference:


var myAddress = { street: "123 JS Blvd" };
var yourAddress = myAddress;

myAddress.street = "456 TS Ave";
console.log(yourAddress.street); // 456 TS Ave

Both variables point to the same object in memory, so changes are shared.


Function Definition Forms


JavaScript supports many ways to define functions. One common form is the anonymous function expression:


var awesomeFunction = function(coolThings) {
  return amazingStuff;
};

In ES6, JS may infer a name for anonymous functions, but it’s only metadata — not usable as an identifier.


Named Function Expression:


var awesomeFunction = function someName(coolThings) {
  return amazingStuff;
};
awesomeFunction.name; // "someName"

Here, someName is an internal identifier, useful for recursion or debugging.


Why Naming Matters


If a function exists, it has a purpose — and that purpose deserves a name. Naming functions improves readability, debugging, and long-term maintenance. Even a simple function like x * 2 benefits from being called double or multBy2.


Other Function Forms


JavaScript offers many function forms:


  • Generator: function* two() {}
  • Async: async function three() {}
  • Arrow: x => x * 2
  • IIFE: (function(){})()
  • Class Method: class A { method() {} }
  • Object Method: { method() {}, old: function() {} }

Each form has its use case. For example, arrow functions preserve this lexically, but they’re not ideal for every situation.


Conclusion


Understanding the difference between value and reference, and mastering the various function forms, are essential skills for writing professional JavaScript. Naming functions clearly and choosing the right form for each task improves clarity and maintainability across your codebase.


Written & researched by Dr. Shahin Siami

Related Articles

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.

Continue

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.

Continue

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.

Continue

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.

Continue

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.

Continue

Organizing Code in JavaScript – Classes, Modules, and Object-Oriented Inheritance

JavaScript offers two major patterns for organizing code: classes and modules. This article focuses on class-based design, including how to define and instantiate classes, encapsulate data and behavior, and use inheritance and polymorphism to extend functionality. Understanding these patterns helps developers write clean, maintainable, and scalable programs.

Continue