Files
2nd/10_Wiki/Topic_JavaScript/JavaScript_Objects.md
T
koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00

8.7 KiB

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

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 cautionconst x = person; does not copy; x is person, so changing x.age changes person.age. [S2]
  • Build objects from dataObject.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]

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// 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]

// 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]

// 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]

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]

// 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 personx is person; they share the same memory address, and any change to x also changes person: [S2]

//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:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Reference aliasing (not a copy):

const x = person;
x.age = 10; // also changes person.age

Build an object from key/value pairs:

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)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Objects" page (Astra wiki-curation, P-Reinforce v3.1 format).