Basics

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio: function () {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function () {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

person.name;
person.name[0];
person.age;
person.bio();
// "Bob Smith is 32 years old."
person.introduceSelf();
// "Hi! I'm Bob."

// Same thing
const person = {
  name: ["Bob", "Smith"],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  },
};

Terms

The value of an object member can be pretty much anything β€” in our person object we've got a number, an array, and two functions.

The first two items are data items, and are referred to as the object'sΒ properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object'sΒ methods.

An object like this is referred to as anΒ πŸ”₯object literalΒ β€” we've literally written out the object contents as we've come to create it. This is different compared to objects instantiated from classes, which we'll look at later on.

prototypes

JavaScriptλŠ” ν”„λ‘œν† νƒ€μž… 기반 μ–Έμ–΄μž…λ‹ˆλ‹€. μ΄λŠ” JavaScriptμ—μ„œ 객체 지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ΄ ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 ν•œλ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. λ‹€λ₯Έ 언어듀이 클래슀(class)λ₯Ό μ‚¬μš©ν•˜μ—¬ 객체λ₯Ό μƒμ„±ν•˜λŠ” 반면, JavaScriptλŠ” ν”„λ‘œν† νƒ€μž…μ„ μ‚¬μš©ν•©λ‹ˆλ‹€

κ°„λ‹¨νžˆ μ„€λͺ…ν•˜λ©΄, JavaScriptμ—μ„œλŠ” λͺ¨λ“  객체가 λ‹€λ₯Έ κ°μ²΄λ‘œλΆ€ν„° μƒμ†λœλ‹€λŠ” κ°œλ…μ΄ μ€‘μš”ν•©λ‹ˆλ‹€. μ΄λ•Œ μƒμ†μ˜ 기반이 λ˜λŠ” 것이 ν”„λ‘œν† νƒ€μž…μž…λ‹ˆλ‹€.

κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž… 객체λ₯Ό 가지고 있고, 이λ₯Ό 톡해 λ‹€λ₯Έ κ°μ²΄λ‘œλΆ€ν„° 속성과 λ©”μ„œλ“œλ₯Ό μƒμ†λ°›μŠ΅λ‹ˆλ‹€. 객체λ₯Ό 생성할 λ•Œ, ν•΄λ‹Ή 객체의 ν”„λ‘œν† νƒ€μž…μ„ μ§€μ •ν•˜κ±°λ‚˜ κΈ°μ‘΄ 객체λ₯Ό μˆ˜μ •ν•˜μ—¬ μƒˆλ‘œμš΄ 객체λ₯Ό λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

// ν”„λ‘œν† νƒ€μž… 객체 생성
var animal = {
  eat: function () {
    console.log("λ¨Ήλ‹€");
  },
};

// μƒˆλ‘œμš΄ 객체 생성 및 ν”„λ‘œν† νƒ€μž… 지정
var dog = Object.create(animal);
dog.bark = function () {
  console.log("μ§–λ‹€");
};

dog.eat();  // "λ¨Ήλ‹€"
dog.bark(); // "μ§–λ‹€"

이 μ˜ˆμ œμ—μ„œ dog κ°μ²΄λŠ” animal 객체λ₯Ό ν”„λ‘œν† νƒ€μž…μœΌλ‘œ 가지고 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ **dog**λŠ” eat λ©”μ„œλ“œλ₯Ό 상속받아 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ΄λŸ¬ν•œ ν”„λ‘œν† νƒ€μž… 기반의 μ ‘κ·Ό 방식은 JavaScriptλ₯Ό μœ μ—°ν•˜κ²Œ λ§Œλ“€μ–΄μ£Όλ©°, 클래슀 기반 μ–Έμ–΄μ™€λŠ” λ‹€λ₯Έ κ°œλ…μ„ 가지고 μžˆμŠ΅λ‹ˆλ‹€. ES6λΆ€ν„°λŠ” 클래슀(class) 문법이 μΆ”κ°€λ˜μ—ˆμ§€λ§Œ μ—¬μ „νžˆ ν”„λ‘œν† νƒ€μž…λ„ ν•¨κ»˜ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ •μ˜ν•˜κΈ°

일반적인 λ°©μ‹μœΌλ‘œλŠ” 속성은 μƒμ„±μžμ—μ„œ, λ©”μ†Œλ“œλŠ” ν”„λ‘œν† νƒ€μž…μ—μ„œ μ •μ˜ν•©λ‹ˆλ‹€. μƒμ„±μžμ—λŠ” 속성에 λŒ€ν•œ μ •μ˜λ§Œ 있으며 λ©”μ†Œλ“œλŠ” λ³„λ„μ˜ λΈ”λŸ­μœΌλ‘œ ꡬ뢄할 수 μžˆμœΌλ‹ˆ μ½”λ“œλ₯Ό 읽기가 훨씬 μ‰¬μ›Œμ§‘λ‹ˆλ‹€.

// μƒμ„±μžμ—μ„œ 속성 μ •μ˜
function Test(a, b, c, d) {
  // 속성 μ •μ˜
}

// 첫 λ©”μ†Œλ“œ μ •μ˜
Test.prototype.x = function() { ... };

// λ‘λ²ˆμ§Έ λ©”μ†Œλ“œ μ •μ˜
Test.prototype.y = function() { ... };

// κ·Έ μ™Έ.

Object-oriented programming

Classes and instances