2nd/10_Wiki/Topic_JavaScript/JavaScript_Objects.md

---
id: javascript-objects
title: "JavaScript Objects"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["JS objects", "object literal", "object definitions", "new Object", "key value pairs", "objects are mutable", "primitives"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.86
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["javascript", "js", "web", "frontend", "w3schools", "objects", "object-literal", "primitives"]
raw_sources: ["https://www.w3schools.com/js/js_objects.asp", "https://www.w3schools.com/js/js_object_definition.asp"]
applied_in: []
github_commit: ""
---

# [[JavaScript Objects]]

## 🎯 한 줄 통찰 (One-line insight)
Objects are variables that can store both values and functions, and in JavaScript almost everything except primitives is an object — addressed by reference, not by value. [S1][S2]

## 🧠 핵심 개념 (Core concepts)
- **Objects store values and functions** — they are one of the most important concepts in JavaScript. [S1]
- **Key:value pairs** — an object literal is a list of property `key:value` pairs inside curly braces `{ }`. [S2]
- **Many ways to define** — object literal, the `new` keyword, an object constructor, `Object.assign()`, `Object.create()`, and `Object.fromEntries()`. [S2]
- **Objects are king** — in JavaScript almost everything is an object; all JavaScript values except primitives are objects. [S2]
- **Objects are mutable and passed by reference** — they are addressed by reference, not by value, so a "copy" actually shares the same memory. [S2]
- **Primitives are immutable** — the seven primitive types hold a single value that cannot be changed. [S2]

## 🧩 추출된 패턴 (Extracted patterns)
- **Prefer the object literal** — for readability, simplicity, and execution speed, use the object literal over `new Object()`. [S2]
- **Reference-aliasing caution** — `const x = person;` does not copy; `x` *is* `person`, so changing `x.age` changes `person.age`. [S2]
- **Build objects from data** — `Object.fromEntries()` constructs an object from iterable key/value pairs; `Object.assign()` merges sources into a target. [S2]

## 📖 세부 내용 (Details)
**What JavaScript objects are**
Objects are variables that can store both values and functions, and they are one of the most important concepts in JavaScript. The learning path covers object basics, properties (which can be changed, added, and deleted), methods (functions stored as property values), the `this` keyword (which refers to the calling object), display techniques (loops and `JSON.stringify()`), and constructors (for creating multiple objects of the same type). [S1]

**Using an Object Literal**
An object literal is a list of property `key:value` pairs inside curly braces `{ }`. [S2]
```javascript
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
```
```javascript
// Create an Object
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
```
Note: there is no need to use `new Object()`. For readability, simplicity, and execution speed, use the object literal method. Objects written as name/value pairs are similar to associative arrays in PHP, dictionaries in Python, hash tables in C, hash maps in Java, and hashes in Ruby and Perl. [S2]

**Using the new Keyword** [S2]
```javascript
// Create an Object
const person = new Object({
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
});
```
The examples above do exactly the same. [S2]

**Object.create()**
The `Object.create()` method creates an object from an existing object. [S2]
```javascript
// Create an Object:
const person = {
  firstName: "John",
  lastName: "Doe"
};

// Create new Object
const man = Object.create(person);
man.firstName = "Peter";
```

**Object.fromEntries()**
ES2019 added the `fromEntries()` method, which creates an object from iterable key/value pairs. [S2]
```javascript
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
```
`fromEntries()` is an ECMAScript 2019 feature, supported in all modern browsers since January 2020. [S2]

| Browser | Version | Release Date |
| --- | --- | --- |
| Chrome | 66 | Apr 2018 |
| Edge | 79 | Jan 2020 |
| Firefox | 61 | Jun 2018 |
| Safari | 12 | Sep 2018 |
| Opera | 50 | May 2018 |

**Object.assign()**
The `Object.assign()` method copies properties from one or more source objects to a target object. [S2]
```javascript
// Create Target Object
const person1 = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Create Source Object
const person2 = {firstName: "Anne",lastName: "Smith"};

// Assign Source to Target
Object.assign(person1, person2);
```

**In JavaScript, Objects are King**
"If you understand objects, you understand JavaScript." In JavaScript, almost everything is an object: objects are objects, maths are objects, functions are objects, dates are objects, arrays are objects, maps are objects, and sets are objects. All JavaScript values, except primitives, are objects. [S2]

**JavaScript Primitives**
A primitive data type can only store a single primitive value. There are seven primitive types: [S2]

| Type | Example Value |
| --- | --- |
| `string` | "Hello" |
| `number` | 3.14 |
| `boolean` | true |
| `bigint` | 12345678901234n |
| `null` | null |
| `undefined` | undefined |
| `symbol` | symbol |

Primitive values are immutable (they are hardcoded and cannot be changed). If `x = 3.14`, you can change the value of `x`, but you cannot change the value of `3.14`. [S2]

**JavaScript Objects are Mutable**
Objects are mutable: they are addressed by reference, not by value. If `person` is an object, `const x = person;` will not create a copy of `person`. The object `x` is not a copy of `person` — `x` *is* `person`; they share the same memory address, and any change to `x` also changes `person`: [S2]
```javascript
//Create an Object
const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

// Try to create a copy
const x = person;

// This will change age in person:
x.age = 10;
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| Definition method | When to use | Note |
| --- | --- | --- |
| Object literal `{ }` | Default choice | Best readability, simplicity, execution speed [S2] |
| `new Object()` | Equivalent to literal | Does exactly the same; literal preferred [S2] |
| `Object.create()` | Create from an existing object | Inherits from the source object [S2] |
| `Object.assign()` | Merge sources into a target | Copies properties from source(s) [S2] |
| `Object.fromEntries()` | Build from key/value pairs | ES2019 feature [S2] |

## 🛠️ 적용 사례 (Applied in summary)
The page's own snippets are the canonical applied examples — the `person` object literal, the `new Object()` equivalent, `Object.create()`/`Object.assign()`/`Object.fromEntries()`, and the reference-aliasing demonstration. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Preferred object literal:
```javascript
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
```
Reference aliasing (not a copy):
```javascript
const x = person;
x.age = 10; // also changes person.age
```
Build an object from key/value pairs:
```javascript
const myObj = Object.fromEntries(fruits);
```

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Version notes: `Object.fromEntries()` is an ECMAScript 2019 feature supported in all modern browsers since January 2020. [S2]

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.86
- **중복 검사 결과:** 신규 생성 (New discovery). Note: the js_objects.asp page is an overview/index; code detail is grounded in the linked "Object Definitions" lesson [S2].

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[JavaScript Tutorial]]
- **관련 개념:** [[JavaScript Object Properties]], [[JavaScript Object Methods]], [[JavaScript Object this]], [[JavaScript Object Display]]
- **참조 맥락:** The foundation for all object-related topics — properties, methods, `this`, and display.

## 📚 출처 (Sources)
- [S1] W3Schools — JavaScript Objects — https://www.w3schools.com/js/js_objects.asp
- [S2] W3Schools — JavaScript Object Definitions — https://www.w3schools.com/js/js_object_definition.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Objects" page (Astra wiki-curation, P-Reinforce v3.1 format).