--- id: javascript-classes title: "JavaScript Classes" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["ES6 classes", "class syntax", "constructor method", "class methods", "use strict"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.89 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["javascript", "js", "web", "frontend", "w3schools", "classes", "oop", "es6"] raw_sources: ["https://www.w3schools.com/js/js_classes.asp"] applied_in: [] github_commit: "" --- # [[JavaScript Classes]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) A JavaScript class, introduced in ES6, is a template for objects (not an object itself), defined with the `class` keyword and a `constructor()` method that runs automatically on `new`. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Classes are ES6 templates** β€” a class is a template for JavaScript objects, defined with the `class` keyword and a `constructor()` method. [S1] - **A class is not an object** β€” it is a template from which objects are created. [S1] - **The constructor runs automatically** β€” the `constructor` method is called automatically when a new object is created with `new`. [S1] - **Constructor rules** β€” it must use the exact name `constructor`, executes automatically, and initializes properties. [S1] - **Class methods** are defined inside the class body and can take parameters. [S1] - **Strict mode** β€” classes require "strict mode" compliance (e.g. variables must be declared with `const`/`let`). [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **constructor + `this` initialization** β€” assign incoming arguments to `this.*` in the constructor to set up object state. [S1] - **Method computes from state** β€” methods like `age()` derive values from the instance's own properties (e.g. `this.year`). [S1] - **Pass external data as a parameter** β€” when a method needs outside data (like the current year), pass it in as an argument rather than recomputing. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **JavaScript Class Syntax** ES6 introduced JavaScript Classes as templates for objects. The basic syntax uses the `class` keyword with a `constructor()` method: [S1] ```javascript class ClassName { constructor() { ... } } ``` A concrete example: [S1] ```javascript class Car { constructor(name, year) { this.name = name; this.year = year; } } ``` A JavaScript class is **not** an object. It is a **template** for JavaScript objects. [S1] **Using a Class** Instantiate with `new`: [S1] ```javascript const myCar1 = new Car("Ford", 2014); const myCar2 = new Car("Audi", 2019); ``` The constructor method is called automatically when a new object is created. [S1] **The Constructor Method** The constructor must use the exact name `constructor`, executes automatically when objects are created, and initializes properties. [S1] **Class Methods** A method computing the car's age from `this.year`: [S1] ```javascript class Car { constructor(name, year) { this.name = name; this.year = year; } age() { const date = new Date(); return date.getFullYear() - this.year; } } const myCar = new Car("Ford", 2014); document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old."; ``` A method that accepts a parameter: [S1] ```javascript class Car { constructor(name, year) { this.name = name; this.year = year; } age(x) { return x - this.year; } } const date = new Date(); let year = date.getFullYear(); const myCar = new Car("Ford", 2014); document.getElementById("demo").innerHTML= "My car is " + myCar.age(year) + " years old."; ``` **"use strict"** Classes require "strict mode" compliance β€” variables must be properly declared: [S1] ```javascript class Car { constructor(name, year) { this.name = name; this.year = year; } age() { // date = new Date(); // This will not work const date = new Date(); // This will work return date.getFullYear() - this.year; } } ``` ## πŸ› οΈ 적용 사둀 (Applied in summary) The `Car` class is the running applied example β€” defining name/year in the constructor, deriving age in a method (with and without a parameter), and demonstrating strict-mode variable declaration. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Define a class and instantiate it (language: JavaScript): ```javascript class Car { constructor(name, year) { this.name = name; this.year = year; } } const myCar1 = new Car("Ford", 2014); ``` Add a method that uses instance state: ```javascript age() { const date = new Date(); return date.getFullYear() - this.year; } ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.89 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[JavaScript Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[JavaScript Class Inheritance]], [[JavaScript Class Static]], [[JavaScript Objects]], [[JavaScript Object Constructors]] - **μ°Έμ‘° λ§₯락:** The foundation for object-oriented JavaScript; extended by class inheritance and static-method pages. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” JavaScript Classes β€” https://www.w3schools.com/js/js_classes.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Classes" page (Astra wiki-curation, P-Reinforce v3.1 format).