[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_objects [Back]  [Original]

- JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

JavaScript . , ('') . . . , , , .

In this article

JavaScript , () . JavaScript .

JavaScript (entity). , , , , . JavaScript .

JavaScript . . JavaScript , . .

js
objectName.propertyName;

JavaScript , ( ) . . myCar , make, model, year .

js
const myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

, ({}) .

js
const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 1969,
};

undefined. (null )

js
myCar.color; // undefined

JavaScript ( ) . ' '(associative array) , . myCar .

js
myCar["make"] = "Ford";
myCar["model"] = "Mustang";
myCar["year"] = 1969;

JavaScript , . JavaScript ( , ) . , . .

js
//     
//    
const myObj = new Object(),
  str = "myString",
  rand = Math.random(),
  obj = new Object();

myObj.type = " ";
myObj["date created"] = "  ";
myObj[str] = " ";
myObj[rand] = " ";
myObj[obj] = "";
myObj[""] = " ";

console.log(myObj);

. JavaScript () ( , [] ). , myObj obj JavaScript obj.toString() .

.

js
let propertyName = "make";
myCar[propertyName] = "Ford";

propertyName = "model";
myCar[propertyName] = "Mustang";

for...in . , .

js
function showProps(obj, objName) {
  let result = "";
  for (let i in obj) {
    // obj.hasOwnProperty()        
    if (obj.hasOwnProperty(i)) {
      result += `${objName}.${i} = ${obj[i]}\n`;
    }
  }
  console.log(result);
}

showProps(myCar, 'myCar') .

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

.

'' ( , ) . .

js
function listAllProperties(o) {
  let objectToInspect = o;
  let result = [];

  while (objectToInspect !== null) {
    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
    objectToInspect = Object.getPrototypeOf(objectToInspect);
  }

  return result;
}

JavaScript . . , new .

" " . " "(Object initializer) C++ .

.

js
const obj = {
  property_1: value_1, //     
  2: value_2, //   
  // ...,
  "property n": value_n, //   
};

obj , (, , ), value_i . obj , . ( )

. . new Object() . Object .

cond x .

js
let x;
if (cond) {
  x = { greeting: "" };
}

myHonda . engine .

js
const myHonda = {
  color: "red",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};

. .

, .

  1. . , , .
  2. new .

, , . . Car , , .

js
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

this .

mycar .

js
var mycar = new Car("Eagle", "Talon TSi", 1993);

mycar . mycar.make "Eagle", mycar.year 1993 .

new Car .

js
const kenscar = new Car("Nissan", "300ZX", 1992);
const vpgscar = new Car("Mazda", "Miata", 1990);

. Person .

js
function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}

Person .

js
const rand = new Person("Rand McKinnon", 33, "M");
const ken = new Person("Ken Jones", 39, "M");

Car , Person owner .

js
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

, .

js
const car1 = new Car("Eagle", "Talon TSi", 1993, rand);
const car2 = new Car("Nissan", "300ZX", 1992, ken);

rand ken . car2 .

js
car2.owner.name;

. ,

js
car1.color = "black";

car1 color 'black' . . Car .

Object.create

Object.create() . .

js
//    
const Animal = {
  type: "", //   
  displayType: function () {
    //    
    console.log(this.type);
  },
};

// animal1     
const animal1 = Object.create(Animal);
animal1.displayType(); // : 

// fish     
const fish = Object.create(Animal);
fish.type = "";
fish.displayType(); // : 

JavaScript . , prototype . .

. , .

( Car ) , (myCar.color = 'red') . myCar[5] = '25 mpg' myCar[5] .

HTML , document.forms , ( ) . <form> name="myForm" document.forms[1], document.forms['myForm'], document.forms.myForm .

prototype . . Car color , car1 .

js
Car.prototype.color = null;
car1.color = "black";

.

(method) , . , . . .

js
objectName.methodName = functionName;

const myObj = {
  myMethod: function(params) {
    //  ...
  }

  //   
  myOtherMethod(params) {
    //   ...
  }
};

objectName , methodName , functionname .

.

js
object.methodName(params);

. Car .

js
function displayCar() {
  const result = ` ${this.year} ${this.make} ${this.model}`;
  prettyPrint(result);
}

prettyPrint . this .

Car .

js
this.displayCar = displayCar;

Car .

js
function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}

displayCar .

js
car1.displayCar();
car2.displayCar();

this

JavaScript this . this . Managerand Intern . name, age, job . sayHi() this.name . ', ', name, '.' .

js
const Manager = {
  name: "John",
  age: 27,
  job: " ",
};
const Intern = {
  name: "Ben",
  age: 21,
  job: "  ",
};

function sayHi() {
  console.log(`,   ${this.name}.`);
}

//    sayHi  
Manager.sayHi = sayHi;
Intern.sayHi = sayHi;

Manager.sayHi(); // ,   John .'
Intern.sayHi(); // ,   Ben .'

this . howOldAmI() .

js
function howOldAmI() {
  console.log(` ${this.age}.`);
}
Manager.howOldAmI = howOldAmI;
Manager.howOldAmI(); //  27.

. . , .

...

  • ,
  • / .

, get, set . , ( ) .

js
const o = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  },
};

console.log(o.a); // 7
console.log(o.b); // 8 <--   get b()  
o.c = 50; //   <--   set c(x)  
console.log(o.a); // 25

o .

  • o.a
  • o.b o.a 1
  • o.c o.c o.a

"[gs]et property()" . [gs]et propertyName(){ } .

Object.defineProperties() . , / , / . / .

js
const o = { a: 0 };

Object.defineProperties(o, {
  b: {
    get: function () {
      return this.a + 1;
    },
  },
  c: {
    set: function (x) {
      this.a = x / 2;
    },
  },
});

o.c = 10; //  , a  10 / 2 = 5 
console.log(o.b); //  , a + 1 = 6 

. . . JavaScript , .

delete .

js
// a b     
const myobj = new Object();
myobj.a = 5;
myobj.b = 12;

// a   b  
delete myobj.a;
console.log("a" in myobj); // : false

JavaScript . , .

js
//   ,        
const fruit = { name: "" };
const fruitbear = { name: "" };

fruit == fruitbear; // false 
fruit === fruitbear; // false 
js
//   ,  
const fruit = { name: "" };
const fruitbear = fruit; // fruit   fruitbear 

// fruit fruitbear   
fruit == fruitbear; // true 
fruit === fruitbear; // true 

fruit.name = "";
console.log(fruitbear); // : { name: "" }  { name: "" }

.


Web Proxy Viewer  |  New URL  |  Original Page