Object Properties and Technics

Table of contents

1. Object Property
   1. Object Property Features
2. Object Technics
   1. Simple Way to Creating Object
      1. 4 ways to creating a JavaScript Object
   2. Accessing Object Properties
      1. for in loop
   3. Adding new properties
   4. Deleting properties
      1. delete keyword
   5. Displaying Object Properties
      1. Object.values()
      2. JSON.stringify()
3. Prototype Properties

Object Property

Object Property Features

Property(name) + Property(value) = Properties

▸ JavaScript객체는 정렬되지 않은 속성의 모음

▸ 속성은 JavaScript 개체와 관련된값

▸ 속성은 일반적으로 변경, 추가 및 삭제할 수 있지만 일부는 읽기 전용임

▸ 값(value)은 Property의 attributes 중 하나

→ (다른 attributes : enumerable, configurable, and writable)

▸ 이 attributes들은 속성들이 어떻게 접근될 수 있는지 정의함

▸ 자바스크립트에서는 모든 attributes들은 읽을 수 있지만 value attribute만 값이 바뀔 수 있음

Object Technics

Simple Way to Creating Object

{}로 생성함 (객체를 만드는 가장 쉬운 방법)

▸ 값은 주로 name:value 쌍으로 나타남 (name and value separated by a colon)

▸ 객체 리터럴을 사용하면 한 명령문에서 객체를 정의하고 만들 수 있음

▸ 객체 리터럴은 중괄호 ({}) 안에 이름 : 값 쌍의 목록

▸ 공백과 줄 바꿈은 중요하지 않음. 객체 정의는 여러 줄에 걸쳐있을 수 있음

Syntax

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
//네 가지 속성으로 새 JavaScript 객체를 만듦

or 

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
//object definition can span multiple lines

4 ways to creating a JavaScript Object

새 객체를 만드는 방법에는 네가지 방법이 있음

1. 객체 리터럴을 사용하여 단일 객체를 정의하고 만들기

2. 키워드를 사용하여 단일 객체를 정의하고 만들기 new

3. 객체 생성자를 정의한 다음 생성 된 유형의 객체를 만들기

4. ECMAScript 5에서 함수를 사용하여 객체를 만들 수도 있음 Object.create()

Using the JavaScript Keyword new

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Accessing Object Properties

1. objectName.propertyName

2. objectName[“propertyName”]

3. objectName[expression]

4. objectName.values() //객체를 배열로 전환(value만 추출)

예제

var person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

var x = "id"

document.getElementById("a").innerHTML = person.firstName
document.getElementById("b").innerHTML = person["lastName"]
document.getElementById("c").innerHTML = person[x]

for in loop

for…in문은 개체의 속성을 반복

▸ for…in루프 내부의 코드 블록은 각 속성에 대해 한 번씩 실행

▸ 반복하는 변수는 name(key)가 된다

syntax

var person = {fname:"John", lname:"Doe", age:25};

for (x in person) {
  txt += person[x];
}
//txt : John Doe 25

note!

Adding new properties

단순히 값을 제공하여 기존 객체에 새 속성을 추가할 수 있음

▸ 존재하는 객체에 대해 속성을 부여해야 함

syntax

person.nationality = "English";

Deleting properties

delete keyword

속성 값과 속성 자체를 모두 삭제

▸ 삭제 후에는 다시 추가하기 전에 속성을 사용할 수 없음

▸ object 속성에만 영향을 주고 변수나 함수에는 영향이 없음

▸ 미리 정의된 자바스크립트 객체속성에 사용할 수 없음

syntax

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;   // or delete person["age"];
// person.age = undefined 

Displaying Object Properties

총 네가지 방법이 있음

1. 이름으로 개체속성 표시(위에서 설명)

2. loop로 개체속성 표시(위에서 설명)

3. Object.values()를 사용하여 객체표시 : 객체를 배열로 바꾸는 방법

4. JSON.stringify()를 사용하여 객체표시 : 객체를 문자열로 바꾸는 방법

Object.values()

객체의 값만을 새로운 배열로 생성하는 객체 메소드

syntax

var person = {name:"John", age:30, city:"New York"};

var myArray = Object.values(person);
// myArray is John,50,New York

JSON.stringify()

모든 JavaScript 객체를 문자열화 (문자열로 변환)

▸ 배열을 문자열화 할 때도 사용함

syntax

var person = {name:"John", age:30, city:"New York"};

var myString = JSON.stringify(person);
// myString is {"name":"John","age":30,"city":"New York"}

▸ 객체 안에 있는 함수는 문자열화하지 않아서 객체를 따로 변환해줘야함

예제

var person = {name:"John", age:function () {return 30;}};
person.age = person.age.toString();

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;

W3School

#9656; 날짜를 문자열로 변환

예제

var person = {name:"John", today:new Date()};

var myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
//myString is {"name":"John","today":"2021-05-10T12:18:26.377Z"}

W3School

Prototype Properties

JavaScript 객체는 프로토타입의 속성을 상속함

delete키워드는 상속 된 속성을 삭제하지 않지만 직접 프로토 타입 속성을 삭제하면 프로토 타입에서 상속된 모든 객체에 영향을 미침